1.项目概述 CMS接口开发

最新推荐文章于 2024-05-21 14:03:57 发布

HHRunning

最新推荐文章于 2024-05-21 14:03:57 发布

阅读量1.5k

点赞数

分类专栏：学成在线

本文链接：https://blog.csdn.net/qq_34721292/article/details/103736415

版权

文章目录

1 项目的功能构架
2 项目的技术架构
3 CMS需求分析
4 CMS服务端工程搭建
5 页面查询接口定义
6 页面查询服务端开发
7 页面查询接口测试

1 项目的功能构架

1.1 项目背景

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

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

1.2 功能模块

当前市场的在线教育模式多种多样，包括：B2C、C2C、B2B2C等业务模式，学成在线采用B2B2C业务模式，即向
企业或个人提供在线教育平台提供教学服务，老师和学生通过平台完成整个教学和学习的过程，市场上类似的平台
有：网易云课堂、腾讯课堂等，学成在线的特点是IT职业课程在线教学。
学成在线包括门户、学习中心、教学管理中、社交系统、系统管理等功能模块。
在这里插入图片描述

1.3 项目原型

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

2 项目的技术架构

2.1 技术架构

学成在线采用当前流行的前后端分离架构开发，由用户层、UI层、微服务层、数据层等部分组成，为PC、App、
H5等客户端用户提供服务。下图是系统的技术架构图：
在这里插入图片描述
业务流程举例：
1、用户可以通过pc、手机等客户端访问系统进行在线学习。
2、系统应用CDN技术，对一些图片、CSS、视频等资源从CDN调度访问。
3、所有的请求全部经过负载均衡器。
4、对于PC、H5等客户端请求，首先请求UI层，渲染用户界面。
5、客户端UI请求服务层获取进行具体的业务操作。
6、服务层将数据持久化到数据库。
各模块说明如下：
在这里插入图片描述

2.2 技术栈

下图是项目技术架构的简图，通过简图了解项目所使用的技术栈。
在这里插入图片描述
重点了解微服务技术栈：
学成在线服务端基于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
等。
控制层：Spring MVC、FastJSON、RestTemplate、Spring Security Oauth2+JWT等
微服务治理：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是对页面进行管理，对页面如何进行管理呢？我们首先搭建学成网的静态门户工程，根据门户的页面结
构来分析页面的管理方案。
门户，是一个网站的入口，一般网站都有一个对外的门户，学成在线门户效果图如下：
在这里插入图片描述

3.2.1 导入门户工程

1、安装WebStorm
参考“WebStorm安装手册.md”安装WebStorm-2018.2.3.exe
2、安装Nginx
下载nginx：http://nginx.org/en/download.html
本教程下载nginx-1.14.0.zip(http://nginx.org/download/nginx-1.14.0.zip)
解压nginx-1.14.0.zip到自己的计算机，双击nginx.exe即可运行。
访问：http://localhost
在这里插入图片描述
3、导入门户工程
将课程资料中的门户工程拷贝到代码目录。
使用WebStorm打开门户工程目录，目录的结构如下，后期会根据开发的推进进行扩充。

3.2.2 配置虚拟主机

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;
	}
}

F:/teach/xcEdu/xcEduUI/xc-ui-pc-static-portal/ 本目录即为门户的主目录。
5、配置hosts文件
本教程的开发环境使用Windows 7，修改C:\Windows\System32\drivers\etc\hosts文件

127.0.0.1 www.xuecheng.com

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

3.3 SSI服务端包含技术

本节分析首页的管理方案。
1、页面内容多如何管理？
将页面拆分成一个一个的小页面，通过cms去管理这些小页面，当要更改部分页面内容时只需要更改具体某个小页
面即可。
2、页面拆出来怎么样通过web服务浏览呢？
使用web服务(例如nginx)的SSI技术，将多个子页面合并渲染输出。
3、SSI是什么？
在这里插入图片描述
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：页尾

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查看页面效果。

3.3 CMS页面管理需求

1、这些页面的管理流程是什么？
1）创建站点：
一个网站有很多子站点，比如：学成在线有主门户、学习中心、问答系统等子站点。具体的哪个页面是归属于具体
的站点，所以要管理页面，先要管理页面所属的站点。
2）创建模板：
页面如何创建呢？比如电商网站的商品详情页面，每个页面的内容布局、板式是相同的，不同的只是内容，这个页
面的布局、板式就是页面模板，模板+数据就组成一个完整的页面，最终要创建一个页面文件需要先定义此页面的
模板，最终拿到页面的数据再结合模板就拼装成一个完整的页面。
3）创建页面：
创建页面是指填写页面的基本信息，如：页面的名称、页面的url地址等。
4）页面预览：
页面预览是页面发布前的一项工作，页面预览使用静态化技术根据页面模板和数据生成页面内容，并通过浏览器预
览页面。页面发布前进行页面预览的目是为了保证页面发布后的正确性。
5）页面发布：
使用计算机技术将页面发送到页面所在站点的服务器，页面发布成功就可以通过浏览器来访问了。
2、本项目要实现什么样的功能？
1）页面管理
管理员在后台添加、修改、删除页面信息
2）页面预览
管理员通过页面预览功能预览页面发布后的效果。
3）页面发布
管理员通过页面发布功能将页面发布到远程门户服务器。
页面发布成功，用户即可在浏览器浏览到最新发布的页面，整个页面添加、发布的过程由于软件自动执行，无需人
工登录服务器操作。

4 CMS服务端工程搭建

4.1 开发工具配置

服务端工程使用IntellijIDEA开发。
1、创建工程代码目录 XcEduCode（本教程创建XcEduCode01目录），并且IDEA打开。
2、配置maven环境
拷贝老师提供的maven仓库，setting.xml文件中配置maven仓库，maven仓库的目录位置不要去使用中文。
在这里插入图片描述
3、配置编码

4、配置JDK1.8
安装JDK1.8，并设置环境变量
在IDEA配置JDK1.8

5、配置快捷键
IDEA可以集成Eclipse的快捷键

如需自定义则点击“copy”复制一份进行修改
6、自动导入包快捷方式：
idea可以自动优化导入包，但是有多个同名的类调用不同的包，必须自己手动Alt+Enter设置
设置idea导入包
在这里插入图片描述
7、代码模板
自定义自己的代码模板

8、提示忽略大小写
默认IDEA的提示是区分大小写的，这里设置为提示忽略大小写

9、配置虚拟机内存
修改idea64.exe.vmoptions（64位电脑选择此文件）
一个例子，电脑内存8G，设置如下：
-Xms1024m -Xmx4096m -XX:MaxPermSize=1024m -XX:ReservedCodeCacheSize=1024m

4.2 导入基础工程

4.2.1 工程结构

CMS及其它服务端工程基于maven进行构建，首先需要创建如下基础工程：
parent工程：父工程，提供依赖管理。
common工程：通用工程，提供各层封装
model工程：模型工程，提供统一的模型类管理
utils工程：工具类工程，提供本项目所使用的工具类
Api工程：接口工程，统一管理本项目的服务接口。

工程结果如下：
在这里插入图片描述
基础工程代码及pom.xml配置参考课程资料“基础工程”。

4.2.2导入父工程

1、将课程资料中的parent工程拷贝到代码目录
2、点击Import Model，选择parent工程目录
在这里插入图片描述
选择Maven，下一步。

3、导入成功

4.2.3导入其它工程

依次导入utils、model、common、api工程，方法同parent工和的导入。
在这里插入图片描述

4.3 MongoDB入门

4.3.1 安装MongoDB

CMS采用MongoDB数据库存储CMS页面信息，CMS选用Mongodb的原因如下：
1、Mongodb是非关系型数据库，存储Json格式数据 ,数据格式灵活。
2、相比课程管理等核心数据CMS数据不重要，且没有事务管理要求。
参考“mongodb安装.md”安装Mongodb Server及 Studio 3T客户端软件。

4.3.2 MongoDB入门

参考“mongodb安装及入门”文档进行学习。

4.4 导入CMS数据库

导入cms数据库：
使用Studio 3T软件导入cms数据库
1、创建xc_cms数据库
在这里插入图片描述
2、导入 cms数据库
右键数据库，点击导入数据库

打开窗口，选择第一个 json。
下一步，选择要导入的数据文件（json文件）

下一步操作即可完成。
导入成功：

5 页面查询接口定义

5.1 定义模型

5.1.1 需求分析

在梳理完用户需求后就要去定义前后端的接口，接口定义后前端和后端就可以依据接口去开发功能了。
本次定义页面查询接口，本接口供前端请求查询页面列表，支持分页及自定义条件查询方式。
具体需求如下：
1、分页查询CmsPage 集合下的数据
2、根据站点Id、模板Id、页面别名查询页面信息
3、接口基于Http Get请求，响应Json数据

5.1.2 模型类介绍

接口的定义离不开数据模型，根据前边对需求的分析，整个页面管理模块的数据模型如下：
在这里插入图片描述
CmsSite：站点模型
CmsTemplate：页面模板
CmsPage：页面信息
页面信息如下：

@Data
@ToString
@Document(collection = "cms_page")
public class CmsPage {
   
	/**
	* 页面名称、别名、访问地址、类型（静态/动态）、页面模版、状态
	*/
	//站点ID
	private String siteId;
	//页面ID
	@Id
	private String pageId;
	//页面名称
	private String pageName;
	//别名
	private String pageAliase;
	//访问地址
	private String pageWebPath;
	//参数
	private String pageParameter;
	//物理路径
	private String pagePhysicalPath;
	//类型（静态/动态）
	private String pageType;
	//页面模版
	private String pageTemplate;
	//页面静态化内容
	private String pageHtml;
	//状态
	private String pageStatus;
	//创建时间
	private Date pageCreateTime;
	//模版id
	private String templateId;
	//参数列表，暂不用
	private List<CmsPageParam> pageParams;
	//模版文件Id
	// private String templateFileId;
	//静态文件Id
	private String htmlFileId;
	//数据Url
	private String dataUrl;
}

最低0.47元/天解锁文章

HHRunning

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
1.项目概述 CMS接口开发

文章目录1 项目的功能构架1.1 项目背景1.2 功能模块1.3 项目原型2 项目的技术架构2.1 技术架构2.2 技术栈2.3 开发步骤3 CMS需求分析3.1 什么是CMS3.2 静态门户工程搭建3.2.1 导入门户工程3.2.2 配置虚拟主机3.3 SSI服务端包含技术3.3 CMS页面管理需求4 CMS服务端工程搭建4.1 开发工具配置4.2 导入基础工程4.2.1 工程结构4.2.2导入...
复制链接

扫一扫