学成在线 第1天 讲义-项目概述 CMS接口开发1 项目的功能构架1.1 项目背景

​ 受互联网+概念的催化，当今中国在线教育市场的发展可谓是百花齐放、如火如荼。 按照市场领域细分为：学前教育、K12教育、高等教育、留学教育、职业教育、语言教育、兴趣教育以及综合平台，其中，职业教育和语言教育的市场优势突出。 根据Analysys易观发布的数据显示，预计2019年中国互联网教育市场交易规模将达到3718亿元人民币，未来三年互联网教育市场规模保持高速增长。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1-%E6%9C%AA%E6%9D%A5%E4%B8%89%E5%B9%B4%E4%BA%92%E8%81%94%E7%BD%91%E6%95%99%E8%82%B2%E5%B8%82%E5%9C%BA%E8%A7%84%E6%A8%A1%E7%BB%9F%E8%AE%A1.jpg

​ 学成在线借鉴了MOOC（大型开放式网络课程，即MOOC（massive open online courses））的设计思想，是一个提供IT职业课程在线学习的平台，它为即将和已经加入IT领域的技术人才提供在线学习服务，用户通过在线学习、在线练习、在线考试等学习内容，最终掌握所学的IT技能，并能在工作中熟练应用。

1.2 功能模块

​ 当前市场的在线教育模式多种多样，包括：B2C、C2C、B2B2C等业务模式，学成在线采用B2B2C业务模式，即向企业或个人提供在线教育平台提供教学服务，老师和学生通过平台完成整个教学和学习的过程，市场上类似的平台有：网易云课堂、腾讯课堂等，学成在线的特点是IT职业课程在线教学。

​ 学成在线包括门户、学习中心、教学管理中、社交系统、系统管理等功能模块。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1532072105254.png

序号

名称

功能描述

1用户层用户层描述了本系统所支持的用户类型包括：pc用户、app用户、h5用户。pc用户通过浏览器访问系统、app用户通过android、ios手机访问系统，H5用户通过h5页面访问系统。
2CDNCDN全称Content Delivery Network，即内容分发网络，本系统所有静态资源全部通过CDN加速来提高访问速度。系统静态资源包括：html页面、js文件、css文件、image图片、pdf和ppt及doc教学文档、video视频等。
3负载均衡系统的CDN层、UI层、服务层及数据层均设置了负载均衡服务，上图仅在UI层前边标注了负载均衡。 每一层的负载均衡会根据系统的需求来确定负载均衡器的类型，系统支持4层负载均衡+7层负载均衡结合的方式，4层负载均衡是指在网络传输层进行流程转发，根据IP和端口进行转发，7层负载均衡完成HTTP协议负载均衡及反向代理的功能，根据url进行请求转发。
4UI层UI层描述了系统向pc用户、app用户、h5用户提供的产品界面。根据系统功能模块特点确定了UI层包括如下产品界面类型： 1）面向pc用户的门户系统、学习中心系统、教学管理系统、系统管理中心。 2）面向h5用户的门户系统、学习中心系统。 3）面向app用户的门户系统、学习中心系统未在上图标注，在app项目中有详细说明。
5微服务层微服务层将系统服务分类三类：前端服务、后端服务及系统服务。 前端服务：主要为学习用户提供学习服务。 后端服务：主要为管理用户提供教学管理服务。 系统服务：公共服务，为系统的所有微服务提供公共服务功能。 服务网关：提供服务路由、负载均衡、认证授权等服务。
6数据层数据层描述了系统的数据存储的内容类型，持久化的业务数据使用MySQL和MongoDB保存，其中MongoDB中主要保存系统日志信息。 消息队列：存储系统服务间通信的消息，本身提供消息存取服务，与微服务层的系统服务连接。 索引库：存储课程信息的索引信息，本身提供索引维护及搜索的服务，与微服务层的系统服务连接。 缓存：作为系统的缓存服务，存储课程信息、分类信息、用户信息等，与微服务层的所有服务连接。 文件存储：提供系统静态资源文件的分布式存储服务，文件存储服务器作为CDN服务器的数据来源，CDN上的静态资源将最终在文件存储服务器上保存多份。 流媒体服务：作为流媒体服务器，存储所有的流媒体文件。
7外部系统接口1）微信、QQ、微博登录接口，本系统和微信、QQ、微博系统对接，用户输入微信、QQ、微博的账号和密码即可登录本系统。 2）微信、QQ、微博分享接口，本系统和微信、QQ、微博系统对接，可直接将本系统的课程资源信息分享到微信、QQ、微博。 3）支付宝、微信、网银支付接口，本系统提供支付宝、微信、网银三种支付接口。 4）短信接口，本系统与第三方平台对接短信发送接口。 5）邮件接口，本系统需要连接第三方的smpt邮件服务器对外发送电子邮件。 6）微信公众号，本系统与微信公众号平台接口，用户通过微信公众号访问H5页面。 7）点播、直播，前期视频点播与直播采用第三方服务方式，本系统与第三方点、直播服务对接，对外提供视频点播与直播服务。 8）OSS存储 ，前期静态资源文件的存储采用第三方服务方式，本系统与第三方提供的OSS存储服务对接，将系统的静态资源文件存储到第三方提供的OSS存储服务器上。 9）CDN，本系统与第三方CDN服务对接，使用CDN加速服务来提高本系统的访问速度。
8DevOpsDevOps（英文Development和Operations的组合）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。本项目供了许多开发、运营、维护支撑的系统，包括： Eureka服务治理中心：提供服务治理服务，包括：服务注册、服务获取等。 Spring Cloud Config服务配置管理中心：提供服务配置管理服务，包括：配置文件更新、配置文件下发等。 Hystrix Dashboard服务熔断监控：监控熔断的请求响应时间、成功率等 。 Zipkin服务追踪监控：监控服务调用链路健康情况。 Jenkins持续集成服务：提供系统持续集成服务。 Git/GitLab代码管理服务:提供git代码管理服务。 ELK日志分析服务:提供elk日志分析服务，包括系统运行日志分析、告警服务。 Docker容器化部署服务：将本系统所有服务采用容器化部署方式。 Maven项目管理工具：提供管理项目所有的Java包依赖、项目工程打包服务。
2.2 技术栈

下图是项目技术架构的简图，通过简图了解项目所使用的技术栈。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1532072294112.png

重点了解微服务技术栈：（修）

服务层/应用层名称

技术栈

学成在线服务端

基于Spring Boot构建，采用Spring Cloud微服务框架

持久层

MySQL、MongoDB、Redis、ElasticSearch

数据访问层

使用Spring Data JPA 、Mybatis、Spring Data Mongodb等

业务层

Spring IOC、Aop事务控制、Spring Task任务调度、Feign、Ribbon、Spring AMQP、Spring Data Redis等。

微服务控制

Eureka、Zuul、Hystrix、Spring Cloud Config等

2.3 开发步骤

项目是基于前后端分离的架构进行开发，前后端分离架构总体上包括前端和服务端，通常是多人协作并行开发，开发步骤如下：

1、需求分析

梳理用户的需求，分析业务流程

2、接口定义

根据需求分析定义接口

3、服务端和前端并行开发

依据接口进行服务端接口开发。

前端开发用户操作界面，并请求服务端接口完成业务处理。

4、前后端集成测试

最终前端调用服务端接口完成业务。

3 CMS需求分析3.1 什么是CMS

1、CMS是什么 ？

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

2、CMS有哪些类型？

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

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

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

3.2 静态门户工程搭建

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

门户，是一个网站的入口，一般网站都有一个对外的门户，学成在线门户效果图如下：

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1-%E5%AD%A6%E6%88%90%E7%BD%91%E9%A6%96%E9%A1%B5.png

3.2.1 导入门户工程1、安装Nginx（修）

​ 1.1在学成在线的资料中有nginx1.8.1压缩包，并解压压缩包

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539069719850.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539069828716.png

​ 1.2解压后在目录中找到nginx.exe,并双击进行启动运行

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539069982038.png

​ 1.3查看任务管理器中nginx进程是否启动

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539071508202.png

​ 1.4访问nginx页面

​ 页面地址：http://localhost

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539071721429.png

下载nginx：http://nginx.org/en/download.html

本教程下载nginx-1.8.1.zip(http://nginx.org/download/nginx-1.8.1.zip)

2、导入门户工程

​ 2.1 在今日下发的资料中，路径\资料\门户下的有门户网站的静态页面

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539072746430.png

​ 2.2 将静态资源的压缩包文件进行解压

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539073121896.png

​ 2.3 使用IDEA打开解压后的目录

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539073295707.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539073408663.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539073582447.png

​ 目录的结构如上图，后期会根据开发的推进进行扩充。

3、配置虚拟主机

​ 3.1 打开nginx配置目录，在配置目录中找到nginx.conf配置文件并打开修改

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539073891344.png

在nginx中配置虚拟主机：

server{
    listen       80;    server_name  www.xuecheng.com;    ssi on;    ssi_silent_errors on;    location / {        alias   F:/teach/xcEdu/xcEduUI/xc-ui-pc-static-portal/;        index  index.html;    }}

解释 alias：

​ 后面的值表示虚拟虚拟主机根目录：

​ F:/teach/xcEdu/xcEduUI/xc-ui-pc-static-portal/ 本目录即为门户的主目录。

配置完后的样图

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539074547551.png

样图解释：

​ 注释①：后添加的配置

​ 注释②：将配置文件中原来的配置的端口号改为81

此配置文件已经放到day01/资料/nginx配置文件中

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539260873824.png

4、配置hosts文件

​ 4.1 找到系统的host文件

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539074823973.png

本教程的开发环境使用Windows 10，修改C:\Windows\System32\drivers\etc\hosts文件，

​ 4.2 打开hosts文件并修改

​ 在文件中最后一行添加下面的配置

127.0.0.1 www.xuecheng.com

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539074953361.png

5、重新加载nginx配置文件

​ 5.1 回到nginx的根目录中

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539075374854.png

​ 5.2 在路径中输入cmd并敲回车

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539075469698.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539075534482.png

​

5.3 在弹出的命令窗口中输入 nginx.exe -s reload

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539075650648.png

​

5.4 进入浏览器，输入http://www.xuecheng.com

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539077270993.png

补充：

​ 访问www.xuecheng.com的分析图： file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539097053929.png

3.3 SSI服务端包含技术

本节分析首页的管理方案。

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

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

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

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

3、SSI是什么？

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1525317889822.png

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

ssi指令如下：

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

4、将首页拆分成

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

SSI技术的介绍补充：https://yq.aliyun.com/articles/11575

5、在nginx虚拟主机中开通SSI

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

ssi的配置参数如下：

ssi on ：开启ssi支持
ssi_silent_errors on ：默认为off，设置为on则在处理SSI文件出错时不输出错误信息ssi_types：默认为 ssi_types text/html，如果需要支持shtml（服务器执行脚本，类似于jsp）则需要设置为          ssi_types text/shtml

6、测试

去掉某个页面头部中的#include查看页面效果。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539085187300.png

取消前的效果：

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539085615903.png

取消后的效果：

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539085548370.png

3.4 CMS页面管理需求

1、这些页面的管理流程是什么？

​ 1）创建站点：

​ 一个网站有很多子站点，比如：学成在线有主门户、学习中心、问答系统等子站点。具体的哪个页面是归属于具体的站点，所以要管理页面，先要管理页面所属的站点。

​ 2）创建模板：

​ 页面如何创建呢？比如电商网站的商品详情页面，每个页面的内容布局、板式是相同的，不同的只是内容，这个页面的布局、板式就是页面模板，模板+数据就组成一个完整的页面，最终要创建一个页面文件需要先定义此页面的模板，最终拿到页面的数据再结合模板就拼装成一个完整的页面。

​ 3）创建页面：

​ 创建页面是指填写页面的基本信息，如：页面的名称、页面的url地址等。

​ 4）页面预览：

​ 页面预览是页面发布前的一项工作，页面预览使用静态化技术根据页面模板和数据生成页面内容，并通过浏览器预览页面。页面发布前进行页面预览的目是为了保证页面发布后的正确性。

​ 5）页面发布：

​ 使用计算机技术将页面发送到页面所在站点的服务器，页面发布成功就可以通过浏览器来访问了。

2、本项目要实现什么样的功能？

​ 1）页面管理

​ 管理员在后台添加、修改、删除页面信息

​ 2）页面预览

​ 管理员通过页面预览功能预览页面发布后的效果。

​ 3）页面发布

​ 管理员通过页面发布功能将页面发布到远程门户服务器。

​ 页面发布成功，用户即可在浏览器浏览到最新发布的页面，整个页面添加、发布的过程由于软件自动执行，无需人工登录服务器操作。

4 CMS服务端工程搭建4.1 开发工具配置（修）

服务端工程使用IntellijIDEA开发。

1、创建工程代码目录 XcEduCode，并且IDEA打开。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088121029.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088168128.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088273242.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088326089.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088388617.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088438931.png

2、配置maven环境

​ 2.1配置maven仓库环境

​ 拷贝老师提供的maven仓库，setting.xml文件中配置maven仓库，maven仓库的目录位置不要去使用中文。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088937043.png

注释①：解压老师提供好的maven仓库

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539089071737.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539089232141.png

注释①：修改maven的conf目录中的配置文件

注释②：修改setting文件中填写本仓库的位置

​ 2.2 配置idea中的maven仓库环境

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088723422.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539097272399.png

上图解释： 注释①：设置自己的maven路径（maven的根目录） 注释②：配置maven的settings文件的位置 注释③：配置maven的仓库位置，如果settings文件中配置好了，此处会自动更改

3、配置编码

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539097906921.png

上图解释： 注释①：全局字符集设置 UTF-8 注释②：项目（Project）字符集设置 UTF-8 注释③：项目中的properties文件的编码集设置 UTF-8，后面的选项要勾选，这样中文字符会自动转 化为16进制

4、配置JDK1.8

​ 4.1安装JDK1.8，并设置环境变量（此处省略配置）

​ 可以参考文档：https://jingyan.baidu.com/article/f96699bbd30ca8894e3c1bdb.html

​ 4.2在IDEA配置JDK1.8

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539098848625.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539099028626.png

上图解释： 注释①：由于之前的IDEA配置过其他的JDK，所以这里显示三个版本，并非IDEA自带。 这里我们可以根据自自己的JDK自行选择，如果没有，需要接着往下看新建JDK配置

​ 4.3在IDEA设置编译级别（此处使用JDK8，所以使用8的编译级别）

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539099490868.png

5、修改代码提示快捷键

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088723422.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539136342266.png

上图解释： 注释①：在settings中的keymap选项中设置快捷键 注释②：在keymap中搜索中查找completion 注释③：在查找后的结果中找到Code-Completion 注释④：找到Basic和SmartType，修改其快捷键

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539140111164.png

上图解释： 注释①：在Basic中右击 注释②：在右键菜单中选择Remove Ctrl+空格

file:///F:/job/%E8%AF%BE%E7%A8%8B%E6%95%99%E6%A1%88/heimaN39/14.%E5%AD%A6%E6%88%90%E5%9C%A8%E7%BA%BF/%E5%8A%A9%E6%95%99%E5%A4%87%E8%AF%BE%E7%94%A8/day01%E5%8A%A9%E6%95%99%E5%A4%87%E8%AF%BE/%E8%AE%B2%E4%B9%89/images/day01/1539140314260.png

上图解释： 注释①：在Basic中右击 注释②：在右键菜单中选择Add Keyboard Shortcut

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539141268494.png

上图解释： 注释①：在设置完Alt+斜杠后，点击OK设置完毕

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539141404948.png

上图解释： 注释①：设置完毕后，会有提示窗口弹出。原因是其他快捷键也有设置Alt+斜杠，在这里我们可以直接 选择Leave就可以了。

6、自动导入包 快捷方式

​ idea可以自动优化导入包，但是有多个同名的类调用不同的包，必须自己手动Alt+Enter设置， 下面可以通过设置来进行导包优化。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539142240955.png

上图解释： 勾选上图面板中的两个选项

7、提示忽略大小写

​ IDEA代码提示默认是区分大小写的，这里设置为提示忽略大小写。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539142457823.png

上图解释： 注释①：在Code Completion选项面板中，选在Case sensitive completion 为 None

9、增大IDEA虚拟机内存

​ 在IDEA的安装目录中我们找到IDEA运行配置文件，如下图

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539143120679.png

上图解释： 注释①：32位运行配置文件 注释②：64位运行配置文件

​ 根据系统环境不同，相应修改不同的配置。如是32位系统修改注释①的配置， 64位系统修改注释②的配置。

将运行配置修改为下面的配置（8G内存的配置-配置前四项即可）

-Xms1024m
-Xmx1024m-XX:MaxPermSize=1024m-XX:ReservedCodeCacheSize=1024m-XX:+UseConcMarkSweepGC-XX:SoftRefLRUPolicyMSPerMB=50-ea-Dsun.io.useCanonCaches=false-Djava.net.preferIPv4Stack=true-XX:+HeapDumpOnOutOfMemoryError-XX:-OmitStackTraceInFastThrow

配置解释：

针对硬件配置高，Java 项目等大型项目的开发人员，一下是推荐的的 vm 配置信息：

• -Xms128m，8 G 内存的机器可尝试设置为 -Xms1024m
• -Xmx750m，8 G 内存的机器可尝试设置为 -Xmx2048m
• -XX:MaxPermSize=350m，8 G 内存的机器可尝试设置为-XX:MaxPermSize=1024m
• -XX:ReservedCodeCacheSize=225m，8 G 内存的机器可尝试设置为-XX:ReservedCodeCacheSize=1024m
  这里的配置会使得 IDEA 运行项目的速度会提升，但这还要根据自己的硬件资源进行配置。
  
  

10、开启IDEA工具栏和工具按钮

​ 在View菜单栏中勾 选Toolbar和 Tool Buttons

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539224897645.png

4.2 导入基础工程4.2.1 工程结构

CMS及其它服务端工程基于maven进行构建，首先需要创建如下基础工程：

parent工程：父工程，提供依赖管理。

学成在线 第1天 讲义-项目概述 CMS接口开发1 项目的功能构架1.1 项目背景

​ 受互联网+概念的催化，当今中国在线教育市场的发展可谓是百花齐放、如火如荼。 按照市场领域细分为：学前教育、K12教育、高等教育、留学教育、职业教育、语言教育、兴趣教育以及综合平台，其中，职业教育和语言教育的市场优势突出。 根据Analysys易观发布的数据显示，预计2019年中国互联网教育市场交易规模将达到3718亿元人民币，未来三年互联网教育市场规模保持高速增长。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1-%E6%9C%AA%E6%9D%A5%E4%B8%89%E5%B9%B4%E4%BA%92%E8%81%94%E7%BD%91%E6%95%99%E8%82%B2%E5%B8%82%E5%9C%BA%E8%A7%84%E6%A8%A1%E7%BB%9F%E8%AE%A1.jpg

​ 学成在线借鉴了MOOC（大型开放式网络课程，即MOOC（massive open online courses））的设计思想，是一个提供IT职业课程在线学习的平台，它为即将和已经加入IT领域的技术人才提供在线学习服务，用户通过在线学习、在线练习、在线考试等学习内容，最终掌握所学的IT技能，并能在工作中熟练应用。

1.2 功能模块

​ 当前市场的在线教育模式多种多样，包括：B2C、C2C、B2B2C等业务模式，学成在线采用B2B2C业务模式，即向企业或个人提供在线教育平台提供教学服务，老师和学生通过平台完成整个教学和学习的过程，市场上类似的平台有：网易云课堂、腾讯课堂等，学成在线的特点是IT职业课程在线教学。

​ 学成在线包括门户、学习中心、教学管理中、社交系统、系统管理等功能模块。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1532072105254.png

序号

名称

功能描述

1用户层用户层描述了本系统所支持的用户类型包括：pc用户、app用户、h5用户。pc用户通过浏览器访问系统、app用户通过android、ios手机访问系统，H5用户通过h5页面访问系统。
2CDNCDN全称Content Delivery Network，即内容分发网络，本系统所有静态资源全部通过CDN加速来提高访问速度。系统静态资源包括：html页面、js文件、css文件、image图片、pdf和ppt及doc教学文档、video视频等。
3负载均衡系统的CDN层、UI层、服务层及数据层均设置了负载均衡服务，上图仅在UI层前边标注了负载均衡。 每一层的负载均衡会根据系统的需求来确定负载均衡器的类型，系统支持4层负载均衡+7层负载均衡结合的方式，4层负载均衡是指在网络传输层进行流程转发，根据IP和端口进行转发，7层负载均衡完成HTTP协议负载均衡及反向代理的功能，根据url进行请求转发。
4UI层UI层描述了系统向pc用户、app用户、h5用户提供的产品界面。根据系统功能模块特点确定了UI层包括如下产品界面类型： 1）面向pc用户的门户系统、学习中心系统、教学管理系统、系统管理中心。 2）面向h5用户的门户系统、学习中心系统。 3）面向app用户的门户系统、学习中心系统未在上图标注，在app项目中有详细说明。
5微服务层微服务层将系统服务分类三类：前端服务、后端服务及系统服务。 前端服务：主要为学习用户提供学习服务。 后端服务：主要为管理用户提供教学管理服务。 系统服务：公共服务，为系统的所有微服务提供公共服务功能。 服务网关：提供服务路由、负载均衡、认证授权等服务。
6数据层数据层描述了系统的数据存储的内容类型，持久化的业务数据使用MySQL和MongoDB保存，其中MongoDB中主要保存系统日志信息。 消息队列：存储系统服务间通信的消息，本身提供消息存取服务，与微服务层的系统服务连接。 索引库：存储课程信息的索引信息，本身提供索引维护及搜索的服务，与微服务层的系统服务连接。 缓存：作为系统的缓存服务，存储课程信息、分类信息、用户信息等，与微服务层的所有服务连接。 文件存储：提供系统静态资源文件的分布式存储服务，文件存储服务器作为CDN服务器的数据来源，CDN上的静态资源将最终在文件存储服务器上保存多份。 流媒体服务：作为流媒体服务器，存储所有的流媒体文件。
7外部系统接口1）微信、QQ、微博登录接口，本系统和微信、QQ、微博系统对接，用户输入微信、QQ、微博的账号和密码即可登录本系统。 2）微信、QQ、微博分享接口，本系统和微信、QQ、微博系统对接，可直接将本系统的课程资源信息分享到微信、QQ、微博。 3）支付宝、微信、网银支付接口，本系统提供支付宝、微信、网银三种支付接口。 4）短信接口，本系统与第三方平台对接短信发送接口。 5）邮件接口，本系统需要连接第三方的smpt邮件服务器对外发送电子邮件。 6）微信公众号，本系统与微信公众号平台接口，用户通过微信公众号访问H5页面。 7）点播、直播，前期视频点播与直播采用第三方服务方式，本系统与第三方点、直播服务对接，对外提供视频点播与直播服务。 8）OSS存储 ，前期静态资源文件的存储采用第三方服务方式，本系统与第三方提供的OSS存储服务对接，将系统的静态资源文件存储到第三方提供的OSS存储服务器上。 9）CDN，本系统与第三方CDN服务对接，使用CDN加速服务来提高本系统的访问速度。
8DevOpsDevOps（英文Development和Operations的组合）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。本项目供了许多开发、运营、维护支撑的系统，包括： Eureka服务治理中心：提供服务治理服务，包括：服务注册、服务获取等。 Spring Cloud Config服务配置管理中心：提供服务配置管理服务，包括：配置文件更新、配置文件下发等。 Hystrix Dashboard服务熔断监控：监控熔断的请求响应时间、成功率等 。 Zipkin服务追踪监控：监控服务调用链路健康情况。 Jenkins持续集成服务：提供系统持续集成服务。 Git/GitLab代码管理服务:提供git代码管理服务。 ELK日志分析服务:提供elk日志分析服务，包括系统运行日志分析、告警服务。 Docker容器化部署服务：将本系统所有服务采用容器化部署方式。 Maven项目管理工具：提供管理项目所有的Java包依赖、项目工程打包服务。
2.2 技术栈

下图是项目技术架构的简图，通过简图了解项目所使用的技术栈。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1532072294112.png

重点了解微服务技术栈：（修）

服务层/应用层名称

技术栈

学成在线服务端

基于Spring Boot构建，采用Spring Cloud微服务框架

持久层

MySQL、MongoDB、Redis、ElasticSearch

数据访问层

使用Spring Data JPA 、Mybatis、Spring Data Mongodb等

业务层

Spring IOC、Aop事务控制、Spring Task任务调度、Feign、Ribbon、Spring AMQP、Spring Data Redis等。

微服务控制

Eureka、Zuul、Hystrix、Spring Cloud Config等

2.3 开发步骤

项目是基于前后端分离的架构进行开发，前后端分离架构总体上包括前端和服务端，通常是多人协作并行开发，开发步骤如下：

1、需求分析

梳理用户的需求，分析业务流程

2、接口定义

根据需求分析定义接口

3、服务端和前端并行开发

依据接口进行服务端接口开发。

前端开发用户操作界面，并请求服务端接口完成业务处理。

4、前后端集成测试

最终前端调用服务端接口完成业务。

3 CMS需求分析3.1 什么是CMS

1、CMS是什么 ？

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

2、CMS有哪些类型？

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

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

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

3.2 静态门户工程搭建

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

门户，是一个网站的入口，一般网站都有一个对外的门户，学成在线门户效果图如下：

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1-%E5%AD%A6%E6%88%90%E7%BD%91%E9%A6%96%E9%A1%B5.png

3.2.1 导入门户工程1、安装Nginx（修）

​ 1.1在学成在线的资料中有nginx1.8.1压缩包，并解压压缩包

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539069719850.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539069828716.png

​ 1.2解压后在目录中找到nginx.exe,并双击进行启动运行

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539069982038.png

​ 1.3查看任务管理器中nginx进程是否启动

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539071508202.png

​ 1.4访问nginx页面

​ 页面地址：http://localhost

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539071721429.png

下载nginx：http://nginx.org/en/download.html

本教程下载nginx-1.8.1.zip(http://nginx.org/download/nginx-1.8.1.zip)

2、导入门户工程

​ 2.1 在今日下发的资料中，路径\资料\门户下的有门户网站的静态页面

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539072746430.png

​ 2.2 将静态资源的压缩包文件进行解压

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539073121896.png

​ 2.3 使用IDEA打开解压后的目录

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539073295707.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539073408663.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539073582447.png

​ 目录的结构如上图，后期会根据开发的推进进行扩充。

3、配置虚拟主机

​ 3.1 打开nginx配置目录，在配置目录中找到nginx.conf配置文件并打开修改

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539073891344.png

在nginx中配置虚拟主机：

server{
    listen       80;    server_name  www.xuecheng.com;    ssi on;    ssi_silent_errors on;    location / {        alias   F:/teach/xcEdu/xcEduUI/xc-ui-pc-static-portal/;        index  index.html;    }}

解释 alias：

​ 后面的值表示虚拟虚拟主机根目录：

​ F:/teach/xcEdu/xcEduUI/xc-ui-pc-static-portal/ 本目录即为门户的主目录。

配置完后的样图

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539074547551.png

样图解释：

​ 注释①：后添加的配置

​ 注释②：将配置文件中原来的配置的端口号改为81

此配置文件已经放到day01/资料/nginx配置文件中

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539260873824.png

4、配置hosts文件

​ 4.1 找到系统的host文件

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539074823973.png

本教程的开发环境使用Windows 10，修改C:\Windows\System32\drivers\etc\hosts文件，

​ 4.2 打开hosts文件并修改

​ 在文件中最后一行添加下面的配置

127.0.0.1 www.xuecheng.com

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539074953361.png

5、重新加载nginx配置文件

​ 5.1 回到nginx的根目录中

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539075374854.png

​ 5.2 在路径中输入cmd并敲回车

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539075469698.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539075534482.png

​

5.3 在弹出的命令窗口中输入 nginx.exe -s reload

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539075650648.png

​

5.4 进入浏览器，输入http://www.xuecheng.com

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539077270993.png

补充：

​ 访问www.xuecheng.com的分析图： file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539097053929.png

3.3 SSI服务端包含技术

本节分析首页的管理方案。

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

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

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

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

3、SSI是什么？

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1525317889822.png

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

ssi指令如下：

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

4、将首页拆分成

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

SSI技术的介绍补充：https://yq.aliyun.com/articles/11575

5、在nginx虚拟主机中开通SSI

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

ssi的配置参数如下：

ssi on ：开启ssi支持
ssi_silent_errors on ：默认为off，设置为on则在处理SSI文件出错时不输出错误信息ssi_types：默认为 ssi_types text/html，如果需要支持shtml（服务器执行脚本，类似于jsp）则需要设置为          ssi_types text/shtml

6、测试

去掉某个页面头部中的#include查看页面效果。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539085187300.png

取消前的效果：

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539085615903.png

取消后的效果：

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539085548370.png

3.4 CMS页面管理需求

1、这些页面的管理流程是什么？

​ 1）创建站点：

​ 一个网站有很多子站点，比如：学成在线有主门户、学习中心、问答系统等子站点。具体的哪个页面是归属于具体的站点，所以要管理页面，先要管理页面所属的站点。

​ 2）创建模板：

​ 页面如何创建呢？比如电商网站的商品详情页面，每个页面的内容布局、板式是相同的，不同的只是内容，这个页面的布局、板式就是页面模板，模板+数据就组成一个完整的页面，最终要创建一个页面文件需要先定义此页面的模板，最终拿到页面的数据再结合模板就拼装成一个完整的页面。

​ 3）创建页面：

​ 创建页面是指填写页面的基本信息，如：页面的名称、页面的url地址等。

​ 4）页面预览：

​ 页面预览是页面发布前的一项工作，页面预览使用静态化技术根据页面模板和数据生成页面内容，并通过浏览器预览页面。页面发布前进行页面预览的目是为了保证页面发布后的正确性。

​ 5）页面发布：

​ 使用计算机技术将页面发送到页面所在站点的服务器，页面发布成功就可以通过浏览器来访问了。

2、本项目要实现什么样的功能？

​ 1）页面管理

​ 管理员在后台添加、修改、删除页面信息

​ 2）页面预览

​ 管理员通过页面预览功能预览页面发布后的效果。

​ 3）页面发布

​ 管理员通过页面发布功能将页面发布到远程门户服务器。

​ 页面发布成功，用户即可在浏览器浏览到最新发布的页面，整个页面添加、发布的过程由于软件自动执行，无需人工登录服务器操作。

4 CMS服务端工程搭建4.1 开发工具配置（修）

服务端工程使用IntellijIDEA开发。

1、创建工程代码目录 XcEduCode，并且IDEA打开。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088121029.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088168128.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088273242.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088326089.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088388617.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088438931.png

2、配置maven环境

​ 2.1配置maven仓库环境

​ 拷贝老师提供的maven仓库，setting.xml文件中配置maven仓库，maven仓库的目录位置不要去使用中文。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088937043.png

注释①：解压老师提供好的maven仓库

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539089071737.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539089232141.png

注释①：修改maven的conf目录中的配置文件

注释②：修改setting文件中填写本仓库的位置

​ 2.2 配置idea中的maven仓库环境

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088723422.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539097272399.png

上图解释： 注释①：设置自己的maven路径（maven的根目录） 注释②：配置maven的settings文件的位置 注释③：配置maven的仓库位置，如果settings文件中配置好了，此处会自动更改

3、配置编码

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539097906921.png

上图解释： 注释①：全局字符集设置 UTF-8 注释②：项目（Project）字符集设置 UTF-8 注释③：项目中的properties文件的编码集设置 UTF-8，后面的选项要勾选，这样中文字符会自动转 化为16进制

4、配置JDK1.8

​ 4.1安装JDK1.8，并设置环境变量（此处省略配置）

​ 可以参考文档：https://jingyan.baidu.com/article/f96699bbd30ca8894e3c1bdb.html

​ 4.2在IDEA配置JDK1.8

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539098848625.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539099028626.png

上图解释： 注释①：由于之前的IDEA配置过其他的JDK，所以这里显示三个版本，并非IDEA自带。 这里我们可以根据自自己的JDK自行选择，如果没有，需要接着往下看新建JDK配置

​ 4.3在IDEA设置编译级别（此处使用JDK8，所以使用8的编译级别）

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539099490868.png

5、修改代码提示快捷键

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539088723422.png

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539136342266.png

上图解释： 注释①：在settings中的keymap选项中设置快捷键 注释②：在keymap中搜索中查找completion 注释③：在查找后的结果中找到Code-Completion 注释④：找到Basic和SmartType，修改其快捷键

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539140111164.png

上图解释： 注释①：在Basic中右击 注释②：在右键菜单中选择Remove Ctrl+空格

file:///F:/job/%E8%AF%BE%E7%A8%8B%E6%95%99%E6%A1%88/heimaN39/14.%E5%AD%A6%E6%88%90%E5%9C%A8%E7%BA%BF/%E5%8A%A9%E6%95%99%E5%A4%87%E8%AF%BE%E7%94%A8/day01%E5%8A%A9%E6%95%99%E5%A4%87%E8%AF%BE/%E8%AE%B2%E4%B9%89/images/day01/1539140314260.png

上图解释： 注释①：在Basic中右击 注释②：在右键菜单中选择Add Keyboard Shortcut

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539141268494.png

上图解释： 注释①：在设置完Alt+斜杠后，点击OK设置完毕

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539141404948.png

上图解释： 注释①：设置完毕后，会有提示窗口弹出。原因是其他快捷键也有设置Alt+斜杠，在这里我们可以直接 选择Leave就可以了。

6、自动导入包 快捷方式

​ idea可以自动优化导入包，但是有多个同名的类调用不同的包，必须自己手动Alt+Enter设置， 下面可以通过设置来进行导包优化。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539142240955.png

上图解释： 勾选上图面板中的两个选项

7、提示忽略大小写

​ IDEA代码提示默认是区分大小写的，这里设置为提示忽略大小写。

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539142457823.png

上图解释： 注释①：在Code Completion选项面板中，选在Case sensitive completion 为 None

9、增大IDEA虚拟机内存

​ 在IDEA的安装目录中我们找到IDEA运行配置文件，如下图

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539143120679.png

上图解释： 注释①：32位运行配置文件 注释②：64位运行配置文件

​ 根据系统环境不同，相应修改不同的配置。如是32位系统修改注释①的配置， 64位系统修改注释②的配置。

将运行配置修改为下面的配置（8G内存的配置-配置前四项即可）

-Xms1024m
-Xmx1024m-XX:MaxPermSize=1024m-XX:ReservedCodeCacheSize=1024m-XX:+UseConcMarkSweepGC-XX:SoftRefLRUPolicyMSPerMB=50-ea-Dsun.io.useCanonCaches=false-Djava.net.preferIPv4Stack=true-XX:+HeapDumpOnOutOfMemoryError-XX:-OmitStackTraceInFastThrow

配置解释：

针对硬件配置高，Java 项目等大型项目的开发人员，一下是推荐的的 vm 配置信息：

• -Xms128m，8 G 内存的机器可尝试设置为 -Xms1024m
• -Xmx750m，8 G 内存的机器可尝试设置为 -Xmx2048m
• -XX:MaxPermSize=350m，8 G 内存的机器可尝试设置为-XX:MaxPermSize=1024m
• -XX:ReservedCodeCacheSize=225m，8 G 内存的机器可尝试设置为-XX:ReservedCodeCacheSize=1024m
  这里的配置会使得 IDEA 运行项目的速度会提升，但这还要根据自己的硬件资源进行配置。
  
  

10、开启IDEA工具栏和工具按钮

​ 在View菜单栏中勾 选Toolbar和 Tool Buttons

file:///C:/Users/Lenovo/Desktop/%E7%AC%94%E8%AE%B0/%E8%80%81%E5%B8%88%E7%AC%94%E8%AE%B0/%E5%AD%A6%E6%88%90%E9%A1%B9%E7%9B%AE/images/1539224897645.png

4.2 导入基础工程4.2.1 工程结构

CMS及其它服务端工程基于maven进行构建，首先需要创建如下基础工程：

parent工程：父工程，提供依赖管理。