【Python使用】嘿马云课堂web完整实战项目第1篇：项目概述,项目背景【附代码文档】

教程总体简介：项目概述 项目背景 项目的功能构架 项目的技术架构 CMS 什么是CMS CMS需求分析与工程搭建 静态门户工程搭建 SSI服务端包含技术 页面预览开发 4 添加“页面预览”链接 页面发布 需求分析 技术方案 测试 环境搭建 数据字典 服务端 前端 数据模型 页面原型 前端页面 上传图片开发 前端开发 图片查询 静态页面测试 CMS页面预览测试 CMS添加页面接口 搜索服务 搭建ES环境 后端工程搭建 导入CMS数据库 MongoEngine入门 在Django中使用MongoDB 定义文档 Logstash创建索引 创建搜索应用 定义ESClient 搜索前端技术需求 了解SEO 服务端渲染和客户端渲染 Nuxt.js入门 创建Nuxt工程 页面布局 路由 获取数据 搜索页面 查询全部 分页查询 按分类搜索 按难度等级搜索 集成测试 在线学习与媒资管理 在线学习需求分析 需求描述 视频点播解决方案 视频编码 FFmpeg的基本使用 生成m3u8/ts文件 播放器 搭建学习中心前端 媒资管理 开发环境 上传文件 断点续传解决方案 文件分块与合并 媒资服务端编写 视频处理 发送视频处理消息 我的媒资 选择视频 保存视频信息 Api接口 学习页面获取视频播放地址 在线学习接口 登录注册与认证授权 增加数据 修改数据 删除数据 查询数据 Q对象 其他 查询集 QuerySet 页面管理后端开发 接口说明 接口开发规范 JWT Django REST framework JWT 用户登录前端 前端显示当前用户 用户退出 前端集成认证授权 用户注册后端 订单与选课 分布式事务 问题描述 CAP理论 解决方案 自动添加选课方案 Celery Beat定时任务 订单服务定时发送消息 查询前N条任务 乐观锁取任务 RabbitMQ配置 学习服务添加选课 订单服务结束任务 传智云课堂 封装异常处理 封装JSON返回值 站点列表和模板列表接口 新增页面 页面查询接口定义 自定义条件查询 3 测试接口 页面详情 修改页面 删除页面 CMS前端工程创建 导入系统管理前端工程 单页面应用介绍 CMS前端页面查询开发 创建页面 Table组件测试 页面内容完善 跨域问题解决 进入页面立即查询 前后端请求响应流程小结 新增页面前端开发 页面处理流程 页面静态化及预览发布 页面静态化需求 模板管理 模板管理业务流程 模板制作 GridFS研究 模板存储

完整笔记资料代码：https://gitee.com/yinuo112/Backend/tree/master/Python/嘿马云...

感兴趣的小伙伴可以自取哦~

---

全套教程部分目录：

---

部分文件图片：

项目概述

项目背景

学习目标

• 了解项目背景

1 项目背景

​受互联网+概念的催化，当今中国在线教育市场的发展可谓是百花齐放、如火如荼。根据Analysys易观发布的数据显示，2015年至2018年中国互联网教育市场交易规模持续高速增长，并且预计2020年中国互联网教育市场交易规模将达到4293亿元人民币，未来互联网教育市场规模依旧保持高速增长。

​传智云课堂是一个提供IT职业在线学习的平台，它为即将和已经加入IT领域的技术人才提供在线学习服务，用户通过在线学习掌握所学的IT技能。

2 小结

项目背景：

• 未来互联网教育市场规模依旧保持高速增长
• 传智云课堂是一个提供IT职业在线学习的平台

项目的功能构架

学习目标

• 熟悉项目的功能模块
• 熟悉项目的原型

1 功能模块

​当前市场的在线教育模式多种多样，包括：B2C、C2C、B2B2C等业务模式，传智云课堂采用B2C业务模式，即企业向个人提供在线教育培训服务，学生通过线上完成整个学习的过程，市场上类似的平台有：慕课网、新东方在线、学而思网校等，传智云课堂的特点是IT职业在线教学。

​传智云课堂包括门户、搜索中心、学习中心、教学管理中心等功能模块。

功能模块名称	功能说明
门户	在首页、活动页、专题页等页面提供学习入口。
学习中心	学生登录学习中心在线学习。
教学管理中心	管理人员登录教学管理中心进行管理、资源管理、订单管理等教学管理活动。

2 项目原型

​通过项目原型进一步了解项目的功能，包括：门户首页、搜索页、在线学习页面、个人中心等

参考“项目原型”。

3 小结

• 功能模块

  • 门户
  • 学习中心
  • 教学管理中心

• 项目原型

  • 熟悉项目原型，并进一步了解项目功能

项目的技术架构

学习目标

• 熟悉项目技术架构

1 技术架构

​传智云课堂采用当前流行的前后端分离架构开发，由用户层、UI层、服务层、数据层等部分组成，后端服务可以为PC、App、H5等多种客户端提供服务。下图是系统的技术架构图：

业务流程举例：

1、用户可以通过pc、等客户端访问系统进行在线学习。

2、 系统应用CDN技术，对一些图片、CSS、视频等资源从CDN调度访问。

3、所有的请求全部经过负载均衡器。

4、对于PC、H5等客户端请求，首先请求UI层，渲染用户界面。

5、客户端UI请求服务层获取进行具体的业务操作。

6、服务层将数据持久化到数据库。

各模块说明如下：

名称	功能描述
用户层	用户层描述了本系统所支持的用户类型包括：pc用户、app用户、h5用户。pc用户通过浏览器访问系统、app用户通过android、ios访问系统，H5用户通过h5页面访问系统。
CDN	CDN全称Content Delivery Network，即内容分发网络，本系统所有静态资源全部通过CDN加速来提高访问速度。系统静态资源包括：html页面、js文件、css文件、image图片、md教学文档、video视频等。
负载均衡	系统的CDN层、UI层、服务层及数据层均设置了负载均衡服务，上图仅在UI层前边标注了负载均衡。
UI层	UI层描述了系统向pc用户、app用户、h5用户提供的产品界面。根据系统功能模块特点确定了UI层包括如下产品界面类型： 1）面向pc用户的门户系统、学习中心系统、教学管理系统、系统管理中心。 2）面向h5用户的门户系统、学习中心系统。 3）面向app用户的门户系统、学习中心系统未在上图标注，在app项目中有详细说明。
服务层	服务层将系统服务分类三类：前端服务、后端服务。 前端服务：主要为学习用户提供学习服务。 后端服务：主要为管理用户提供教学管理服务。
数据层	数据层描述了系统的数据存储的内容类型，持久化的业务数据使用MySQL和MongoDB保存，其中MongoDB中主要保存系统日志及JSON化信息。 消息队列：存储系统服务间通信的消息，本身提供消息存取服务，与服务层的系统服务连接。 索引库：存储信息的索引信息，本身提供索引维护及搜索的服务，与服务层的系统服务连接。 缓存：作为系统的缓存服务，存储信息、分类信息、用户信息等，与服务层的所有服务连接。 文件存储：提供系统静态资源文件的分布式存储服务，文件存储服务器作为CDN服务器的数据来源，CDN上的静态资源将最终在文件存储服务器上保存多份。 流媒体服务：作为流媒体服务器，存储所有的流媒体文件。
外部系统接口	1）、支付接口，本系统提供、两种支付接口。 2）短信接口，本系统与第三方平台对接短信发送接口。 3）CDN，本系统与第三方CDN服务对接，使用CDN加速服务来提高本系统的访问速度。

2 小结

• 技术架构

  • 用户层：PC、H5、Android、iOS
  • CDN
  • 负载均衡

  • UI层

    • 门户
    • 学习中心
    • 教学管理中心(系统管理中心)

  • 服务层

    • 前端服务
    • 后端服务
    • 系统服务

  • 数据层

    • MySQL
    • MongoDB
    • 消息队列 RabbitMQ
    • 搜索引擎 ES
    • 文件存储 FastFDS、GridFS

CMS

什么是CMS

学习目标

• 了解CMS是什么
• 了解CMS有哪些类型
• 知道本项目CMS的定位

1 CMS是什么 ？

​ CMS （Content Management System）即内容管理系统，不同的项目对CMS的定位不同，比如：一个在线教育网站，有些公司认为CMS系统是对所有的资源进行管理，而在早期网站刚开始盛行时很多公司的业务是网站制作，当时对CMS的定位是创建网站，即对网站的页面、图片等静态资源进行管理。

2 CMS有哪些类型？

​ 上边也谈到每个公司对每个项目的CMS定位不同，CMS基本上分为：针对后台数据内容的管理、针对前端页面的管理、针对样式风格的管理等 。比如：一个给企业做网站的公司，其CMS系统主要是网站页面管理及样式风格的管理。

3 本项目CMS的定位是什么？

​ 本项目作为一个大型的在线教育平台，对CMS系统的定位是对各个网站（子站点）页面的管理，主要管理由于运营需要而经常变动的页面，从而实现根据运营需要快速进行页面开发、上线的需求。

4 小结

• CMS （Content Management System）即内容管理系统

• CMS基本上分为以下类型：

  • 针对后台数据内容的管理
  • 针对前端页面的管理
  • 针对样式风格的管理
• 本项目CMS系统的定位是对各个网站（子站点）页面的管理，主要管理由于运营需要而经常变动的页面

CMS需求分析与工程搭建

静态门户工程搭建

学习目标：

• 完成静态门户工程搭建

​本项目CMS是对页面进行管理，对页面如何进行管理呢？我们首先搭建学成网的静态门户工程，根据门户的页面结构来分析页面的管理方案。

​门户，是一个网站的入口，一般网站都有一个对外的门户，传智云课堂门户效果图如下：

1 导入门户工程

1、运行WebStorm

2、导入门户工程

将资料中的门户工程拷贝到代码目录。

使用WebStorm打开门户工程目录，目录的结构如下，后期会根据开发的推进进行扩充。

2 配置虚拟主机

1、在nginx中配置虚拟主机：

server {
        listen       80;
        server_name  www.czstudy.com;
        ssi on;
        ssi_silent_errors on;
        location / {
            alias  /Users/apple/workspace/czStudy/cz-ui-pc-static-portal/;
            index  index.html;
        }

    }

其中alias指定的目录/Users/apple/workspace/czStudy/cz-ui-pc-static-portal/ 即为门户的主目录。

2、配置hosts文件(/etc/hosts)

127.0.0.1 www.czstudy.com

Windows环境修改C:\Windows\System32\drivers\etc\hosts文件

进入浏览器，输入 [

3 小结

• location中通过alias指定门户的主目录
• 配置hosts文件：ip地址 域名

SSI服务端包含技术

学习目标

• 了解SSI是什么
• 知道SSI的指令
• 知道nginx中SSI相关配置

1 首页的管理方案。

1、页面内容多如何管理？

将页面拆分成一个一个的小页面，通过cms去管理这些小页面，当要更改页面内容时只需要更改具体某个或某几个小页面即可。

2、页面拆出来怎么样通过web服务浏览呢？

使用web服务(例如nginx)的SSI技术，可以将多个子页面合并渲染输出。

2 SSI是什么？

ssi类似于模板文件中的include指令，ssi是在web服务端将include指定的页面包含在网页中，渲染成完整的html网页响应给客户端 。nginx、apache等多数web容器都支持SSI指令。

ssi指令如下：

<!--#include virtual="/../....html"-->

3 首页拆分方案

将首页拆分成

index.html：首页主体内容
include/header.html：头部区域
include/index_banner.html：轮播图
include/index_category.html：左侧列表导航
include/footer.html：尾部区域

4 nginx配置

在nginx虚拟主机中开启SSI

server{
    listen       80;
    server_name  www.czstudy.com;
    ssi on;
    ssi_silent_errors on;
    ......

ssi的配置参数如下：

ssi on：开启ssi支持

ssi_silent_errors on：默认为off，设置为on则在处理SSI文件出错时不输出错误信息

ssi_types：默认为 ssi_types text/html

5 测试

去掉某个#include查看页面效果。

6 小结

• ssi是在web服务端将include指定的页面包含在网页中，渲染成完整的html网页响应给客户端
• ssi指令如下：

<!--#include virtual="/../....html"-->

• ssi的配置参数：

  • <u>ssi</u>on：开启ssi支持
  • ssi_silent_errors on：在处理SSI文件出错时不输出错误信息