🏆🏆🏆教程全知识点简介：数据模型 模板管理 模板管理业务流程 模板制作 GridFS研究 模板存储 静态化测试 页面预览 4 添加“页面预览”链接 页面发布 需求分析 技术方案 测试 管理 环境搭建 我的 数据字典 新增 页面完善 新增 服务端 信息修改 管理页面说明 服务端 前端 计划 页面原型 图片 上传图片开发 项目概述 项目背景 项目的功能构架 项目的技术架构 CMS 什么是CMS CMS需求分析与工程搭建 静态门户工程搭建 图片查询 前端开发 预览 预览技术方案 详情页面静态化 数据模型查询接口 信息模板设计 预览功能开发 CMS页面预览测试 CMS添加页面接口 发布 搜索服务 搜索需求分析 索引 准备 索引信息 搭建ES环境 Logstash创建索引 搜索前端技术需求 了解SEO 服务端渲染和客户端渲染 Nuxt.js入门 创建Nuxt工程 页面布局 路由 搜索页面 分页查询 按分类搜索 集成测试 在线学习与媒资管理 在线学习需求分析 需求描述 视频点播解决方案 视频编码 生成m3u8/ts文件 播放器 后端工程搭建 导入CMS数据库 MongoEngine入门 在Django中使用MongoDB 定义文档 开发环境 上传文件 断点续传解决方案 文件分块与合并 前端页面 媒资服务端编写 媒体视频处理队列 媒体视频路由key 媒体处理交换机 加载可用的任务 保存视频信息 学习页面查询 计划 Api接口 Logstash扫描 计划媒资 搜索服务查询 媒资接口 ESClient类 JWT 用户登录前端 用户注册后端 订order单与选课 分布式事务 问题描述 CAP理论 解决方案 自动添加选课方案 增加数据 修改数据 删除数据 查询数据 Q对象 其他 查询集 QuerySet 页面管理后端开发 Celery Beat定时任务 订order单服务定时发送消息 查询前N条任务 接口说明 接口开发规范 封装异常处理 封装JSON返回值 站点列表和模板列表接口 新增页面 页面查询接口定义 自定义条件查询 3 测试接口 页面详情 修改页面 删除页面 CMS前端工程创建 导入系统管理前端工程 单页面应用介绍 CMS前端页面查询开发 创建页面 Table组件测试 进入页面立即查询 前后端请求响应流程小结 新增页面前端开发 添加页面测试 页面处理流程 页面静态化及预览发布 页面静态化需求

📚📚👉👉👉本站这篇博客：   https://bbs.huaweicloud.com/blogs/460818    中查看

📚📚👉👉👉本站这篇博客：   https://bbs.huaweicloud.com/blogs/455592    中查看

📚📚👉👉👉本站这篇博客：   https://bbs.huaweicloud.com/blogs/455592    中查看

✨ 本教程项目亮点

🧠 知识体系完整：覆盖从基础原理、核心方法到高阶应用的全流程内容
💻 全技术链覆盖：完整前后端技术栈，涵盖开发必备技能
🚀 从零到实战：适合 0 基础入门到提升，循序渐进掌握核心能力
📚 丰富文档与代码示例：涵盖多种场景，可运行、可复用
🛠 工作与学习双参考：不仅适合系统化学习，更可作为日常开发中的查阅手册
🧩 模块化知识结构：按知识点分章节，便于快速定位和复习
📈 长期可用的技术积累：不止一次学习，而是能伴随工作与项目长期参考

🎯🎯🎯全教程总章节

🚀🚀🚀本篇主要内容

进入页面立即查询

学习目标

• 了解vue的生命周期
• 实现进入页面立即查询功能

目前实现的功能是进入页面点击查询按钮向服务端表求查询，实际的需求是进入页面立即查询。

如何实现？

这要用到vue的钩子函数，每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

通常使用最多的是created和mounted两个钩子：

created：vue实例已创建但是DOM元素还没有渲染生成。

mounted：DOM元素渲染生成完成后调用。

本例子在两个方法的任意一个都满足需求：

添加如下代码(src/module/cms/page/page_list.vue)：

methods:{
  ...
},
mounted() {
  //默认查询页面
  this.query()
}

重新刷新页面。

自定义条件查询

学习目标

• 实现自定义条件查询前端功能

1 页面

1、增加查询表单(src/module/cms/page/page_list.vue)

<!--查询表单-->
<el-form :model="params">
  <el-select v-model="params.siteId" placeholder="请选择站点">
    <el-option
               v-for="item in siteList"
               :key="item.siteId"
               :label="item.siteName"
               :value="item.siteId">
    </el-option>
  </el-select>
  <el-select v-model="params.templateId" placeholder="请选择模板">
    <el-option
               v-for="item in templateList"
               :key="item.templateId"
               :label="item.templateName"
               :value="item.templateId">
    </el-option>
  </el-select>
  <el-select v-model="params.pageType" placeholder="请选择页面类型">
    <el-option
               v-for="item in pageTypeList"
               :key="item.typeValue"
               :label="item.typeName"
               :value="item.typeValue">
    </el-option>
  </el-select>
  <br>
  页面名称：<el-input v-model="params.pageName"  style="width: 200px"></el-input>
  页面别名：<el-input v-model="params.pageAlias"  style="width: 200px"></el-input>
  <el-button type="primary" v-on:click="query" class="cz-button-solid" round>查询</el-button>
</el-form>

[paramiko 文档]

[TutorialsPoint Python]

2、数据模型对象

增加siteList、templateList、pageTypeList、pageType、pageAlias、pageName、siteId、templateId，如下(src/module/cms/page/page_list.vue)：

data() {
  return {
    siteList:[],//站点列表
    templateList:[],//模板列表
    pageTypeList:[
      {typeValue:'0', typeName:'静态'},
      {typeValue:'1', typeName:'动态'},
    ],
    list:[],
    total:50,
    params:{
      siteId:'',
      templateId:'',
      pageType: '',
      pageName:'',
      pageAlias:'',
      page:1,//页码
      size:2//每页显示个数
    }
  }
}

[sys 文档]

2 Api调用

1、添加获取站点和模板列表的接口，并在页面列表接口中向服务端传递查询条件，修改 cms.js，如下(src/module/cms/api/cms.js)：

//public是对axios的工具类封装，定义了http请求方法
import http from './../../../base/api/public'
import querystring from 'querystring'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.czApiUrlPre;

export const siteList = () => {
  return http.requestGet(apiUrl+'/cms/site/list')
}
export const templateList = () => {
  return http.requestGet(apiUrl+'/cms/template/list')
}
export const pageList = (page,size,params) => {
  //将json对象转成key/value对
  let query = querystring.stringify(params)
  return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size+'/?'+query)
}

2、在钩子方法中 构建siteList、templateList(src/module/cms/page/page_list.vue)

mounted() {
  //默认查询页面
  this.query()
  //初始化站点列表
  cmsApi.siteList().then((res)=>{
    console.log(res);
    this.siteList = res.data
  })
  //初始化模板列表
  cmsApi.templateList().then((res)=>{
    console.log(res);
    this.templateList = res.data
  })
}

3、页面调用api方法(src/module/cms/page/page_list.vue)

//查询
query:function () {
  cmsApi.pageList(this.params.page,this.params.size,this.params).then((res)=>{
    console.log(res)
    this.total = res.data.total
    this.list = res.data.list
  })
}

[celery 文档]

4、测试如下：

前后端请求响应流程小结

学习目标

• 熟悉前后端请求响应的整体流程

现将前后端请求响应流程总结如下：

1、在浏览器输入前端url

2、前端框架vue.js根据url解析路由，根据路由找到page_list.vue页面

3、首先执行page_list.vue中的钩子方法

4、在钩子方法中调用query方法。

5、在query方法中调用cms.js中的page_list方法

6、cms.js中的page_list方法通过axios请求服务端接口

7、采用proxyTable解决跨域问题，node.js将请求转发到服务端([)

8、服务端处理，将查询结果响应给前端

9、成功响应调用then方法，在then方法中处理响应结果，将查询结果赋值给数据模型中的total和list变量。

10、vue.js通过双向数据绑定将list数据渲染输出。

新增页面前端开发

[asyncpg 文档]

新增页面

学习目标

• 完成新增页面页面内容

1 编写page_add.vue页面

使用Element-UI的form组件编写添加表单内容，页面效果如下：

1、创建page_add.vue页面

2、配置路由

在cms模块的路由文件中配置“添加页面”的路由(/src/module/cms/router/index.js)：

import page_list from '@/module/cms/page/page_list.vue';
import page_add from '@/module/cms/page/page_add.vue';
export default [{
    ...
    children:[
      {path:'/cms/page/list',name:'页面列表',component: page_list,hidden:false},
      {path:'/cms/page/add',name:'新增页面',component: page_add,hidden:true}
    ]
  }
]

注意：由于“添加页面”不需要显示为一个菜单，这里hidden设置为true隐藏菜单。

测试，在浏览器地址栏输入[

3、在页面列表添加“添加页面”的按钮

实际情况是用户进入页面查询列表，点击“新增页面”按钮进入新增页面窗口。

在查询按钮的旁边添加(src/module/cms/page/page_list.vue)：

<router-link class="mui-tab-item" :to="{path:'/cms/page/add/'}">
  <el-button  type="primary" class="cz-button-solid" round>新增页面</el-button>
</router-link>

说明：router-link是vue提供的路由功能，用于在页面生成路由链接，最终在html渲染后就是[标签。]

​ to：目标路由地址

4、完善页面内容：

代码如下(src/module/cms/page/page_add.vue)： ```vue <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="ite