XueChProject01

最新推荐文章于 2020-07-16 23:34:34 发布

一觉睡到小小时候

最新推荐文章于 2020-07-16 23:34:34 发布

阅读量222

点赞数

分类专栏：测试文章

本文链接：https://blog.csdn.net/weixin_43983411/article/details/103873167

版权

本文探讨了前后端分离的优势，指出其不仅适用于微服务架构，还强调了部署在不同服务器上的关键。介绍了CMS页面管理系统的功能模块、技术架构、开发步骤，以及涉及的技术栈，如Vue.js、axios和Spring Cloud。同时，详细讲解了页面查询接口的定义、服务端开发规范和测试工具Swagger、Postman的使用。

摘要由CSDN通过智能技术生成

一、前后端的相关问题

前后端的区别是：应该是以运行环境来区别，而不是以语言来区别，因为有些前端语言也可以写后端代码。
前端是：用户可以看的见，摸的着。
后端是：用户看不见的。

前后端分离的优势

前端和微服务层是独立部署的，他们之间是通过网络协议来通信，例如http。这样前后端的分离的好处是前端可以根据客户的需求提供不同的界面终端，微服务是统一的，供前端统一访问的。可扩展性（可以扩展任意前端）和可维护性（只维护后台一套代码即可）比较高，因为微服务将功能分的粒度特别的细，可以随时增加某一节点的数量，以应对相应访问量高的场景

前后端分离是只能在微服务架构应用吗？

不是的，前提是前端代码和后端代码部署在不同服务器上，**这有个问题是是否可以部署在一台服务器上？**前后端分离一是为了满足多终端使用提供统一的一套后端代码，二是前后端人员的分工明确。

二、功能模块分类

业务模式决定了功能模块
XueCh的原型是博学谷
该项目的业务模型是B2B2C ，我们公司提供该平台允许个人或者公司（商家）发布课程，然后让用户去使用课程。
C2C的典型是淘宝。
在这里插入图片描述
【门户】就是一个入口或者是一个导航，门户网站有搜狐，新浪。【学习中心】是为学生提供学习的一个模块，【教学管理中心】是为老师提供管理教学的一个模块。
那么【学习中心】和【教学管理中心】有没有联系呢？当然得有，他们之间通过【社交系统】来让老师和学生之间产生互动。【系统管理中心】是为系统管理员提供的一个模块，为了管理和维护系统的。
【社交系统】中的【评论系统】是比较重要的一块，因为学生购买课程时主要就是通过看评论来了解课程的质量。

教学管理中心是供商家使用的，有个问题是商家上传的视频，运营商怎么审核？
教学管理中心和系统管理中心都是后台系统，CMS是管理网页站点的系统

三、项目的技术架构

在这里插入图片描述
微服务的分的粒度细，好处就是提高每个服务的可重用性。另外一个好处是因为每个模块是独立部署的，可以根据每个模块的压力来扩展服务器。

四、技术栈

以下是技术栈的简图
在这里插入图片描述

上图中前端用到的技术介绍 1、npm / cnpm 是node.js 包资源管理开发工具。2、vue.js前端流行框架。3、axios.js发送异步请求（vue和axios的基本操作要掌握）4、服务网关也是springcloud 提供的，它的存在是提供了统一的入口，比如权限的校验

五、开发步骤（所有的功能开发都是这个开发步骤）

1). 分析需求

2). 定义接口(导入基础包的service-api里这里的接口，那么前后端交互的json数据是属于这个接口吗？)

3). 前后端并行开发（完成后，进行自测）

4). 接口联调

注意：不需要合并代码，前端代码是可以单独在Nginx上运行的，后端代码（微服务）是在另外一台Tomcat上单独运行的，这之间用到了跨域

CMS是内容管理系统，不同项目对CMS的内容定位是不同的。CMS的目的是使经常变动的内容灵活的管理起来，进行快速的页面开发和上线。
CMS可以管理的内容包括（后台业务数据 , 广告信息 , 页面信息 , 页面风格管理（百度首页的风格更换））。
本项目对CMS的定位是对各个网站的页面管理，CMS管理静态网站，不会从后端请求，而是直接在静态页面去管理。

【SSI服务端包含技术】

Nginx 和 apace 等流行的web服务器都支持SSI技术

SSI 是服务端包含技术, 目的是将一个大的html页面进行拆分, 拆分成若干个小页面 , 便于灵活控制, 方便管理。
具体演示如图所示：
在这里插入图片描述

SSI在Nginx中的配置如下图：

ssi on ; -------------------> 开启nginx中ssi的开关
ssi_silent_errors on ; ------> 当ssi服务端包含出错, 不要暴露错误信息
ssi_types：默认为 ssi_types text/html，如果需要支持shtml（服务器执行脚本，类似于jsp）则需
要设置为ssi_types text/shtml

六、CMS页面管理需求

1). 页面站点管理 ----------> 增删改查

2). 模板管理 --------------> 增删改查

3). 页面管理 --------------> 查询 , 添加 , 修改 , 删除 ---------> 预览 ---------> 发布

七、CMS工程搭建

开发环境

maven : 3.5
JDK : 1.8
project : 新建一个空的project
maven仓库: 课程中提供的仓库
编码 : UTF8

基础工程

spring-boot-starter-parent
|- xc-framework-parent ----------> 作用: 统一管理依赖版本
|- xc-framework-common ---------> 作用: 存放通用的组件, 公共资源（其中有一个是spring-cloud-feign是不需要版本管理的，直接在这里指定版本 1.3.2.RELEASE）
|- xc-framework-model ---------> 作用: 实体类
|- xc-framework-util -----------> 作用: 工具类
|- xc-service-api --------------> 作用: 存放的就是接口
注意：有个问题是 xc-framework-parent 的管理的版本号是否和 spring-boot-starter-parent 的管理的版本号冲突？

八、 Mongodb的安装(参考另外一篇博客《MongoDB的使用》)

九、页面查询接口定义

1.1、页面查询需求分析

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

2.1、定义接口

2.2、定义请求类型和响应类型

1、请求类型是接口的形参，具体类型是QueryPageRequest 继承RequestData。
2、响应结果类型，分页查询统一使用QueryResponseResult

2.3、在Api接口工程专门定义接口，在Api工程单独定义接口的原因如下：

1、接口集中管理
2、Api工程的接口将作为各微服务远程调用使用。

public interface CmsPageControllerApi {
   
    //网页分页查询和条件查询   page 当前页     size  每页显示的条数
    //响应结果类型在common模块里，请求参数QueryPageRequest使用这个类型的原因是方便统一维护
    public QueryResponseResult findList(int page, int size, QueryPageRequest queryPageRequest);
}

此接口编写后会在CMS服务工程编写Controller类实现此接口。

十、页面查询服务端开发

1.1、创建CMS服务工程

1.1.1、创建CMS工程结构

1、创建maven工程， CMS工程的名称为 xc-service-manage-cms，父工程为xc-framework-parent。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>xc-framework-parent</artifactId>
        <groupId>com.xuecheng</groupId>
        <version>1.0-SNAPSHOT