前后端分离开发模式介绍

1.1 什么是前后端分离

前后端分离是目前一种非常流行的开发模式，它使项目的分工更加明确：

• 后端：负责处理、存储数据


• 前端：负责显示数据

前端和后端开发人员通过 接口 进行数据的交换。

1.2 为什么要进行前后端分离

• 前后端可以身心愉快地专注于各自擅长的领域


• 避免后端写前端代码（基本上1天时间，20%写后端代码，80%写页面…）


• 前端配置后端代码运行环境（简直是要疯… 装一堆环境，而且有些开发环境是windows，前端是macos，装环境就要装好几天）


• 避免前后端打架，推诿，甩锅…


• 提高开发效率


• 分离有助于前端大放异彩，后端专注于三高(高并发、高性能、高可用)


• 太多了…

1.3 前后端分离存在的问题

1. 当接口改变的时候，非常麻烦–


2. 需要前后端人员联调–联调开发的时间（开发+测试+联调）占项目的 15%–60%

1.4 如何分离

1.4.1 职责分离

• 前后端仅仅通过异步接口(AJAX/JSONP)来编程


• 前后端都各自有自己的开发流程，构建工具，测试集合


• 关注点分离，前后端变得相对独立并解耦合

1.4.2 开发流程

• 后端编写和维护接口文档，在 API 变化时更新接口文档


• 后端根据接口文档进行接口开发


• 前端根据接口文档进行开发 + Mock平台


• 开发完成后联调和提交测试

推荐几个接口规范工具：postman、eolinker

1.4.3 规范原则

• 接口返回数据即显示：前端仅做渲染逻辑处理；


• 渲染逻辑禁止跨多个接口调用；


• 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现；


• 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现；

1.5 数据格式

1.5.1 请求格式–统一的数据请求格式

1.5.2 响应格式–统一的返回结果

• 基本格式

{
"code": 20000,
"msg": "success"
}


code : 请求处理状态（可以根据业务自行添加）

• 20000 成功


• 20001 失败
  msg：请求处理消息（可以根据业务自行添加）
  响应实体格式

{
"code": 20000,
"msg": "success",
"data": [
"entity": {
"id": 1,
"name": "XXX",
"phone": "XXX"
}
]
}


响应列表格式

{
"code": 20000,
"msg": "success",
"data": {
"list":[
{
"id": 1,
"name": "XXX",
"code": "XXX"
},
{
"id": 2,
"name": "XXX",
"code": "XXX"
},
{
"id": 3,
"name": "XXX",
"code": "XXX"
}
]
}
}


响应分页格式

{
"code": 200,
"msg":"success",
"data": {
"totalCount": 2,
"totalPage": 1
"pageNo": 1,
"pageSize": 10,
"list": [
{
"id": 1,
"name": "XXX",
"code": "H001"
},
{
"id": 1,
"name": "XXX",
"code": "H001"
},
{
"id": 1,
"name": "XXX",
"code": "H001"
}
],
}
}


• data.totalCount: 总记录数


• data.pageNo: 当前页码


• data.pageSize: 每页大小


• data.totalPage: 总页数

1.5.3 JAVA定义统一返回结果

Result

@Data
//@ApiModel(value = "全局统一返回结果")
public class Result {
//@ApiModelProperty(value = "是否成功")
private boolean success;
//@ApiModelProperty(value = "返回码")
private Integer code;
//@ApiModelProperty(value = "返回消息")
private String message;
//@ApiModelProperty(value = "返回数据")
private Map data = new HashMap();
private Result(){}
public static Result ok(){
Result r = new Result();
r.setSuccess(true);
r.setCode(ResultCode.OK);
r.setMessage("成功");
return r;
}
public static Result error(){
Result r = new Result();
r.setSuccess(false);
r.setCode(ResultCode.ERROR);
r.setMessage("失败");
return r;
}
public Result message(String message){
this.setMessage(message);
return this;
}
public Result code(Integer code){
this.setCode(code);
return this;
}
public Result data(String key, Object value){
this.data.put(key, value);
return this;
}
public Result data(Map map){
this.setData(map);
return this;
}
}

2 商品管理系统

2.1 案例需求

完成商品的查询、新增、修改、删除等操作

后端（服务器端）：spring boot+spring mvc+mybatis

2.2 数据库设计与表结构

CREATE TABLE `t_goods` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`image` varchar(255) DEFAULT NULL,
`price` double(20,0) DEFAULT NULL,
PRIMARY KEY (`id`)
)


导入数据：

INSERT INTO `t_goods` VALUES (&＃039;1&＃039;, &＃039;华为 G9 青春版 白色 移动联通电信4G手机 双卡双待&＃039;, &＃039;https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg&＃039;, &＃039;84900&＃039;);
INSERT INTO `t_goods` VALUES (&＃039;2&＃039;, &＃039;华为 G9 青春版 金色 移动联通电信4G手机 双卡双待&＃039;, &＃039;https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg&＃039;, &＃039;84900&＃039;);
INSERT INTO `t_goods` VALUES (&＃039;3&＃039;, &＃039;三星 Galaxy C5（SM-C5000）4GB+32GB 枫叶金 移动联通电信4G手机 双卡双待&＃039;, &＃039;https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg&＃039;, &＃039;119900&＃039;);
INSERT INTO `t_goods` VALUES (&＃039;4&＃039;, &＃039;三星 Galaxy C5（SM-C5000）4GB+32GB 蔷薇粉 移动联通电信4G手机 双卡双待&＃039;, &＃039;https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg&＃039;, &＃039;119900&＃039;);
INSERT INTO `t_goods` VALUES (&＃039;5&＃039;, &＃039;三星 Galaxy C5（SM-C5000）4GB+32GB 烟雨灰 移动联通电信4G手机 双卡双待&＃039;, &＃039;https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg&＃039;, &＃039;119900&＃039;);
INSERT INTO `t_goods` VALUES (&＃039;6&＃039;, &＃039;三星 Galaxy C5（SM-C5000）4GB+32GB 皎洁银 移动联通电信4G手机 双卡双待&＃039;, &＃039;https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg&＃039;, &＃039;119900&＃039;);
INSERT INTO `t_goods` VALUES (&＃039;7&＃039;, &＃039;华为 G9 Plus 32GB 月光银 移动联通4G手机 双卡双待&＃039;, &＃039;https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg&＃039;, &＃039;119900&＃039;);
INSERT INTO `t_goods` VALUES (&＃039;8&＃039;, &＃039;华为 麦芒5 全网通 4GB+64GB版 香槟金 移动联通电信4G手机 双卡双待&＃039;, &＃039;https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg&＃039;, &＃039;139900&＃039;);
INSERT INTO `t_goods` VALUES (&＃039;9&＃039;, &＃039;努比亚（nubia）Z11 百合金 4GB+64GB 全网通 移动联通电信4G手机双卡双待&＃039;, &＃039;https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg&＃039;, &＃039;159900&＃039;);
INSERT INTO `t_goods` VALUES (&＃039;10&＃039;, &＃039;华为 HUAWEI nova 4GB+64GB版 香槟金（白）移动联通电信4G手机 双卡双待&＃039;, &＃039;https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg&＃039;, &＃039;139900&＃039;);


2.3 服务器端

2.3.1 创建SpringBoot项目

2.3.2 导入jar包

pom.xml

UTF-8


UTF-8
1.8
1.3.2
2.0.2
5.1.32


1.2.5
1.1.10




org.springframework.boot
spring-boot-starter-web




org.springframework.boot
spring-boot-starter-jdbc



org.mybatis.spring.boot
mybatis-spring-boot-starter
${mybatis.starter.version}



tk.mybatis
mapper-spring-boot-starter
${mapper.starter.version}



com.github.pagehelper
pagehelper-spring-boot-starter
${pageHelper.starter.version}



mysql
mysql-connector-java
${mysql.version}



com.alibaba
druid-spring-boot-starter
${durid.starter.version}


org.projectlombok
lombok
1.18.10




2.3.3 配置文件（application.properties）

application.properties文件

#Tomcat
server.port=8090
#DB configuration
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/vue01?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
#druid
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.druid.initial-size=1
spring.datasource.druid.min-idle=1
spring.datasource.druid.max-active=20
spring.datasource.druid.test-on-borrow=true
spring.datasource.druid.stat-view-servlet.allow=true


2.3.4 **创建springboot引导类

@SpringBootApplication
public class UserManagementApplication {
public static void main(String[] args) {
SpringApplication.run(UserManagementApplication.class, args);
}
}


2.3.5 创建实体

创建包com.czxy.pojo，创建类User.java

@Table(name="t_goods")
@Data
public class Goods {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
public Integer id;
private String name;
private String image;
private Double price;
}


2.3.6 创建Dao

创建包com.czxy.dao，创建接口GoodsMapper.java

@org.apache.ibatis.annotations.Mapper
public interface GoodsMapper extends Mapper {
}


2.3.7 创建Service

创建包com.czxy.service，创建接口GoodsService.java

@Service
@Transactional
public class GoodsService {
@Autowired
private GoodsMapper goodsMapper;
}


2.3.8 创建Controller

创建包com.czxy.controller，创建类GoodsController.java

@RestController
@RequestMapping("/goods")
public class GoodsController {
@Autowired
private GoodsService goodsService;
}