vue从入门到女装？？：从零开始搭建后台管理系统（六）mock数据及文档输出本文已参与「新人创作礼」活动，一起开启掘金创

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

挡板数据处理

生成随机数据,拦截Ajax 请求开始前后端分离让前端攻城师独立于后端进行开发。增加单元测试的真实性通过随机数据,模拟各种场景.

先推荐一个格式化json数据的chrome插件：

vue全家桶自带的模拟数据
- 在项目根目录下创建需要的数据data.json文件
- dev-server.js写模拟接口

    var appData = require('../data.json')
    var books = appData.books
    var apiRoutes = express.Router()
    apiRoutes.get('/url', function(req, res){
      res.json({
          data: data
      })
    })
    app.use('/api', apiRoutes)

mockjs

  # 安装
  $ npm install mockjs

//示例
// 模拟mock接口
Mock.mock("/getList", "post",function(options) {
  return Mock.mock({
     'list|10-20' : [{
        loginName: "@name",
        msgName:"@name",
        title:"@name",
        "id|1-100": 100,
        "status|1-13": 1,
        "poicyType|1-3":1,
        color: "@color",
        date: "@date('yyyy-MM-dd')",
        email: "@email",
        datetime: "@time",
        // 'sex':Random.sex(),
        range: "@range",
        character: "@character",
        float: "@float",
        int: "@int",
        boolean: "@boolean",
        img: "@image('40x40', '#00405d', '#FFF', 'coocaa')",
        iconPath: "@dataImage('50x40','coocaa')",
        url: "@url",
        "string|1-10": "★",
        "weekday|1": ["周一", "周二", "周三", "周四", "周五", "周六", "周天"]
  }]});
});
//调用
axios.post('/getClassInfomation',{ userName: 21 }).then(res => { // url即在mock.js中定义的
            console.log('res: ', res.data)
  })

postman 生成模拟数据
yapi、swagger等接口定义工具

写文档

vue-docute

不需要服务器端，完全静态网站
不需要编译， markdown 文件是访问的时候自动解析
部署方便，比如 github pages 或者作为一个 index.html 部署到任何地方
方便定制，可以用于很大的文档也可以只有一个 README.md
默认主题非常优雅

安装
- npm 安装
- script标签

    $ npm i -g docute-cli
    $ docute init ./docs
    $ docute ./docs
    # 然后打开 http://localhost:8080 查看运行结果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>My Awesome Doc</title>
    <!-- the docute client styles -->
    <link rel="stylesheet" href="https://unpkg.com/docute/dist/docute.css">
    </head>
    <body>
    <div id="app"></div>
    <!-- load the docute client library -->
    <script src="https://unpkg.com/docute/dist/docute.js"></script>
    <!-- bootstrap your docute app! -->
    <script>
        docute.init()
    </script>
    </body>
    </html>