EasyMock可视化技术

Easy Mock

Easy Mock是一个可视化，并且能快速生成模拟数据的服务。以项目管理的方式组织Mock List，能帮助我们更好的管理Mock数据，不怕丢失。

8.1 解决的问题

开发时，后端还没完成数据输出，前端只好写静态模拟数据。

8.2 常见的Mock方式

• 将Mock数据直接写在代码里

• 利用JS拦截请求

• 利用Charles、Fiddler等代理工具拦截请求

• Mock平台。如Easy Mock、RAP等

8.3 使用Easy Mock的优势

• 前后端分离：让前端工程师独立于后端进行开发。

• 增加单元测试的真实性：通过随机数据，模拟各种场景。

• 开发无侵入：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

• 用法简单：符合直觉的接口。

• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

• 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。

• 在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。

8.4 Easy Mock入门

8.4.1 注册Easy Mock账号

https://www.easy-mock.com/

8.4.2 创建项目

8.4.3 创建列表接口

8.4.4 编辑json数据

将接口 data.json 返回的json数据复制过来

8.4.5 预览

8.4.6 测试接口

将easy mock接口地址替换到axios.html文件中

axios.get('https://www.easy-mock.com/mock/5c72aae79f7c4d72ba29a8f5/mock-test/admin/edu/teacher')

8.4.7 浏览器中运行

8.5 Mock.js占位符语法(了解)

模拟的json数据人工编辑很繁琐，我们可以使用Mock.js语法动态生成json数据

文档：

https://www.easy-mock.com/docs

https://github.com/nuysoft/Mock/wiki

示例：

http://mockjs.com/examples.html

{

"success": true,

"code": 20000,

"message": "成功",

"data": {

"items|5-10": [{

"id": "@id",

"name": "@cname",

"intro": "@csentence",

"career": "@cparagraph",

"level|1": [1, 2],

"avatar": "@image(200x200)",

"sort|1-100": 1,

"deleted|1": true,

"gmtCreate": "@datetime",

"gmtModified": "@datetime"

}]

}

}

9、 在线教育前端工程环境搭建

9.1 vue-element-admin 介绍

vue-element-admin  是一个后台前端解决方案，它基于 vue  和 element-ui 实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

功能：

https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

项目在线预览：https://panjiachen.gitee.io/vue-element-admin

9.2 安装

# 解压压缩包

# 进入目录

cd vue-element-admin-master

​# 安装依赖

npm install

​# 启动。执行后，浏览器自动弹出并访问http://localhost:9527/

npm run dev

9.3 vue-admin-template介绍

Vue-Admin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

9.4 安装

 # 解压压缩包

# 进入目录

cd vue-admin-template-master

​# 安装依赖

npm install

​# 启动。执行后，浏览器自动弹出并访问http://localhost:9528/

npm run dev

启动出现的问题：

解决：

1. 切换到淘宝镜像，如果本身就是淘宝进行不用切换

2. 重写下载

cnpm install node-sass 

10、 js编码规范参考

无分号风格：https://standardjs.com/readme-zhcn.html

无分号风格（airbnb）：

https://www.kancloud.cn/kancloud/javascript-style-guide/43119

无分号的代码风格注意事项

 当一行代码是以：

(

 [

 `

开头的时候，要在行首补上一个分号用避免一些语法解析错误。

结论：

无论你的代码是否有分号，都建议如果一行代码是以 (、[、` 开头的，则最好都在其前面补上一个分号