🏆🏆🏆教程全知识点简介：数据模型 模板管理 模板管理业务流程 模板制作 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组件测试 进入页面立即查询 前后端请求响应流程小结 新增页面前端开发 添加页面测试 页面处理流程 页面静态化及预览发布 页面静态化需求

📚📚仓库code.zip 👉直接-->：   https://gitee.com/yinuo112/Backend/blob/master/Python/嘿马云课堂web完整实战项目/note.md    🍅🍅

✨ 本教程项目亮点

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

🎯🎯🎯全教程总章节

🚀🚀🚀本篇主要内容

导入系统管理前端工程

学习目标

• 了解项目的工程结构

​CMS系统使用Vue-cli脚手架创建， Vue-cli是Vue官方提供的快速构建单页应用的脚手架，github地址：[

1 工程结构

如果我要基于Vue-Cli创建的工程进行开发还需要在它基础上作一些封装，导入资料中提供Vue-Cli封装工程。

将资料中的xc-ui-pc-teach.zip拷贝到UI工程目录中，并解压，用WebStorm打开xc-ui-pc-teach目录。

1.1 package.json

package.json记录了工程所有依赖，及脚本命令：

开发使用：npm run dev

打包使用：npm run build

1.2 webpack.base.conf.js

webpack.base.conf.js就是webpack的webpack.config.js配置文件，在此文件中配置了入口文件及各种Loader。

webpack是通过vue-load解析.vue文件，通过css-load打包css文件等。

1.3 main.js

main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等。

index.html是模板文件。

1.4 src目录

src目录下存放页面及js代码。

assets：存放一些静态文件，如图片。

base：存放基础组件

​ base/api：基础api接口

​ base/component：基础组件，被各各模块都使用的组件

​ base/router：总的路由配置，加载各模块的路由配置文件。

common：工具类

component：组件目录，本项目不用。

mock：存放前端单元测试方法。

module：存放各业务模块的页面和api方法。

​ 下级目录以模块名命名，下边以cms举例：

​ cms/api：cms模块的api接口

​ cms/component：cms模块的组件

​ cms/page： cms模块的页面

​ cms/router：cms模块的路由配置

statics：存放第三方组件的静态资源

vuex：存放vuex文件，本项目不使用

static：与src的平级目录，此目录存放静态资源。它与assets的区别在于，static目录中的文件不被webpack打包处理，会原样拷贝到dist目录下。

2 小结

• CMS系统使用Vue-cli脚手架创建
• 开发使用：npm run dev
• 打包使用：npm run build

单页面应用介绍

学习目标

• 了解什么是单页面应用
• 知道单页面应用的优缺点

1 单页面应用介绍

什么是单页应用？

引用百度百科：

单页面应用的优缺点：

优点：

1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。

2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

缺点：

1、首页加载慢

单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好。

2、SEO不友好

SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。

总结：

本项目的门户、介绍不采用单页面应用架构去开发，对于需要用户登录的管理系统采用单页面开发。

2 小结

• 单页面应用的优点

• 用户操作体验好

• 适合前后端分离开发

• 单页面应用的缺点

• 首页加载慢

• SEO不友好

CMS前端页面查询开发

页面原型

创建页面

学习目标

• 实现基本页面结构

1 页面结构

在model目录创建 cms模块的目录结构

在page目录新建page_list.vue，扩展名为.vue。

.vue文件的结构如下：

<template>
<!--编写页面静态部分，即view部分-->
<div>测试页面显示...</div>
</template>
<script>
/*编写页面静态部分，即model及vm部分。*/
</script>
<style>
/*编写页面样式，不是必须*/
</style>

在页面的template中填写 “测试页面显示...”。

注意：template内容必须有一个根元素，否则vue会报错，这里 在template标签内定义一个div。

[Scikit-learn 文档]

2 页面路由

在cms目录下创建page_list.vue页面。

现在先配置路由，实现url访问到页面再进行内容完善与调试。

1、在cms的router下配置路由(src/module/cms/router/index.js)

import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
export default [{
    path: '/cms',
    component: Home,
    name: 'CMS内容管理',
    hidden: false,
    children:[
      {path:'/cms/page/list',name:'页面列表',component: page_list,hidden:false}
    ]
  }
]

2、在base目录下的router导入cms模块的路由(src/base/router/index.js)

// 导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)
concat(CmsRouter)

3 测试

启动工程，刷新页面，页面可以正常浏览，并且看到“测试页面显示...”字样

Table组件测试

学习目标

• 熟悉Table组件的基本用法

1 Element-UI介绍

本项目使用Element-UI来构建界面，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

Element-UI官方站点：[

2 Table组件测试

本功能实现的页面列表，用户可以进行分页查询、输入查询条件查询，通过查看Element-UI库， 需要Table 表格、Form表单 及Pagination 分页组件。

进入Element-UI官方，找到Table组件，拷贝源代码到vue页面中(src/module/cms/page/page_list.vue)，如下：

<template>
  <div>
    <!--相当于编写html的内容-->
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  //填写js代码，实现VM的功能，创建vue实例
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>
<style>
  /*css样式*/
</style>

[pathlib 文档]

3 测试

通过查看代码发现：

el-table组件绑定了tableData模型数据。

tableData模型数据在script标签中定义。

页面内容完善

学习目标

• 完善页面列表内容

1 完善内容

[SQLAlchemy 文档]

根据需求完善页面内容，完善列表字段，添加分页组件(src/module/cms/page/page_list.vue)。 ```javascript