前后端分离和生成mock数据

本文链接： https://blog.csdn.net/RyleeLouth/article/details/102746241

什么是mock数据？

mock翻译过来是模拟的意思，在前端里面指的是要通过一定的方式去生成模拟数据

为什么要生成mock数据？

因为现在很多的项目都是前后端完全分离的项目，后端负责提供数据，前端通过api接口请求数据，但是通常情况下，后端的进度要比前端的慢，所以前端要自己想办法去模拟一些数据去测试一下

前后端分离模式与不分离模式

前后端分离：后端只负责提供数据，前端负责页面，通过api接口请求数据，然后实现在客户端的渲染（BSR）
前后端不分离：前端只负责页面，然后把写好的静态页面给到后端，后端通过模板引擎把在服务端渲染数据，然后返回给用户（通过express+express-art-template实现SSR）

为什么要前后端分离

主要是现在处于移动互联网的时代，大家都是重前端，轻后端
现在多端应用特别多，例如普通的PC网页，微信小程序，公众号，苹果app，安卓app，移动站等都属于前端应用，每一个应用都应该有自己的数据，但是一般这些端的数据都是一样的，我们可以值提供一套数据，供多端使用，所以出现了前后端分离的项目，也就是后端值负责提供一套数据，让前端自己来拿，自己来处理成想要的样子

SSR和BSR的区别

ssr 服务端渲染：优点：利于seo（搜索引擎）
缺点：服务器端压力大
bsr 客户端渲染优点： 1. 便于维护（提供一个数据仓库）。 2. 开发效率提高 3. 便于扩充
缺点：不利于SEO（搜索引擎），所有数据动态生成

如何生成mock数据

1，mockjs.com 网站提供一个mock.js库，专业提供各种模拟数据，
优点：mock.js+express构建接口，非常好用，
缺点：但是需要编写接口，比较麻烦

 //1安装
//npm install mockjs
// 2使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

2http://rap2.taobao.org/account/login 网站（平台），提供一个可视化的界面，然后让我们模拟数据。

3,http://jsonplaceholder.typicode.com/ 网站，提供很多的模拟数据的接口,直接提供测试数据
优点：不用编写代码就能得到测试接口
缺点：字段固定，不能定制
（1），可以直接查看列表，直接调用接口就可以实现
http://jsonplaceholder.typicode.com/posts
（2），可以根据id查详情，查看id为1的那条数据
http://jsonplaceholder.typicode.com/posts/1
（3），支持分页,查询到第一页两条数据
http://jsonplaceholder.typicode.com/posts/?_page=1&_limit=2
（4），查询关键字，查询到数据中带有aut的数据
http://jsonplaceholder.typicode.com/posts/?q=aut
（5），排序,通过id降序排列
http://jsonplaceholder.typicode.com/posts/?_order=desc&_sort=id

4，json-server兼具以上方法的优势
npm下载链接地址https://www.npmjs.com/package/json-server
json-server 是一个 npm 管理的包，可以提供前端提供mock的功能。
（1）安装

//yarn 全局安装需要使用 global
yarn  global add json-server

// 如果是 npm 全局安装，使用 -g（global的简写）
npm install -g json-server

(2)使用 json-server 命令，使用之前，需要提供一个 .json 结尾的数据模板。
这里一定要注意，最后一条不能有逗号，而且整个json文件不能有注释，否则报错
news.json，这里可以随意写你需要的数据

{
"news": [
    {
      "id": 1,
      "title": "奚梦瑶诞下赌王长孙！何猷君透露儿子承赌王之名取名何广燊",
      "infos": "奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长",
      "imgUrl": "https://dummyimage.com/100x100/f29579"

    },
    {
      "id": 2,
      "title": "奚梦燊",
      "infos": "奚梦瑶诞梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长奚梦瑶诞下赌王长",
      "imgUrl": "https://dummyimage.com/100x100/f29579"

    }]
    }

（3）使用 json-server 命令启动一个端口服务

json-server --watch news.json

（4）接口的使用，完全等同 jsonplaceholder 的方式

列表
详情
分页
排序
全局查询
-----. 增加下面的这几种使用的方式，则必须使用第三方的接口调试工具（postman）–
https://www.getpostman.com/
1 提供增加（post）、
2删除(delete)、
3更新(put)