后台管理系统 - 前后端分离
课程目标
- 什么是前后端分离开发
- Mock.js数据生成器
- 安装Mock.js
- Mock.js的特点
- 语法规范
一、 什么是前后端分离开发
传统系统架构
- 前端工程师负责编写HTML页面，完成前端页面设计
- 后端工程师使用模版技术将HTML开发好才能替换成JSP,同时嵌套后端代码（如Java）;
前后端强依赖，后端必需要等前端的HTML开发好才能替换成JSP,如果需求变更，前端HTML要改，后端JSP也要跟着变，这是件紧紧牵绊的事，使我们的开发效率降低 - 产品交付时，要将前后端代码全部进行打包，部署到同一服务器上，或者进行简单的动静态分离部署
前后端开发
- 前后端约定好API接口&数据&参数
- 前端工程师只需要编写HTML页面，通过HTTP请求调用后被后端提供的服务器即可，后端只需开发接口即可
- 开发效率的提高，无强依赖
二、Mock.js数据生成器
什么是Mock.js
- 可参考官网：官网
- 文档：文档
- Mock.js是用于生成随机数据，拦截Ajax请求
通过拦截Ajax请求，根据数据模版生成并返回模拟数据，让前端工程师独立于后端进行开发，帮助编写单元测试 - Mock.js的作用
- 前后段分离（让前端工程师独立于后端进行开发）
- 增加单元测试的真实性（通过随机数据，模拟各种场景）
三、安装Mock.js
- 新建文件夹，打开命令框
- 初始化项目 npm init -y
- 首先下载安装 npm install mocks.js
- 新建 demo.js,进行配置
进行配置：
//引入mock.js模块，交给变量mock进行保存
const Mock = require（’mock.js‘）
//data 保存的是模拟的数据
var data = Mock.mock(
{
"memberList":[
{
"id":1,
"name":"张三"
}
]
}
)第一个参数要转化的数据,第二个参数null，第三个参数，数据格式化后的空格。
将对象转化为字符串
console.log(JSON.stringify(data,null,2))
四、Mock.js的特点
- 前后端分离
- 增加单元测试的真实性
- 开发无侵入
- 用法简单
- 数据类型丰富
- 方便扩展
五、语法规范
Mock.js 的语法规范包括两部分：
- 数据模板定义规范（Data Template Definition，DTD）
- 数据占位符定义规范（Data Placeholder Definition，DPD）
(1).数据模版定义规范DTD
数据模版中的每个属性由3部分构成：属性名，生成规则，属性值,
比如：
// 属性名 name
// 生成规则 rule
// 属性值 value
‘name|rule’: value
注意：
- 属性名 和 生成规则 之间用竖线 | 分隔。
- 生成规则 是可选的。
生成规则 有 7 种格式：
- ‘name|min-max’: value
- ‘name|count’: value
- ‘name|min-max.dmin-dmax’: value
- ‘name|min-max.dcount’: value
- ‘name|count.dmin-dmax’: value
- ‘name|count.dcount’: value
- ‘name|+step’: value
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。
实例
- 属性值是字符串 String
‘name|min-max’: string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
‘name|count’: string
通过重复 string 生成一个字符串，重复次数等于 count。
更多实例请看网址
(2)数据占位符定义规范 DPD
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符 的格式为：
@占位符
@占位符(参数 [, 参数])
注意：
- 用 @ 来标识其后的字符串是 占位符。
- 占位符 引用的是 Mock.Random 中的方法。
- 通过 Mock.Random.extend() 来扩展自定义占位符。
- 占位符 也可以引用 数据模板 中的属性。
- 占位符 会优先引用 数据模板 中的属性。
- 占位符 支持 相对路径 和 绝对路径。
更多实例请看网址
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
