超简单实用！Mockjs + Express 生成本地接口

依葫芦画瓢，先把瓢多画几次，就知道是怎么回事了
所谓书读百遍，动起手来。

• 安装 express、mockjs，初始化项目

  node -v // 需要先安装node  就不说了
  npm -v
  
  npm -i -g express-generetor   // 安装 express 生成器
  
  // 用生成器，快速搭建 express 应用骨架
  // api-demo 是新建的项目文件夹名，如果已经创建了文件夹，用点 . 表示当前文件夹
  npx express-generator api-demo
  
  // 安装依赖：cd 到项目目录  npm i
  
  npm i -S mockjs   // 模拟数据的工具
  npm i -D nodemon   // 不用每次都重启服务的工具
  
  // 修改 package.json 文件的启动命令
  "start": "nodemon ./bin/www"   // node 改为 nodemon
  
  npm run start  // 启动项目
  
  // 此时可以访问 http://localhost:3000，表示项目创建成功
  // 但我们要做的是http://localhost:3000/blog/banner这个接口
  
  

• 直接奔着目的去：如何创建 http://localhost:3000/blog/banner 这个接口

  【接口地址】：http://localhost:3000/blog/banner
  

  image-20210416161140241.png

 > mock 规则参考：
 > http://mockjs.com/examples.html
 > https://blog.csdn.net/weixin_47560495/article/details/106794421

• 写接口

  • 创建 mock 数据（本质就是一个 js 文件）

    项目根目录文件夹下新建：mock（文件夹）/ blog.js（文件名）

  // mock/blog.js
    
  // 引入mock
  const Mock = require('mockjs')
    
  // 编造数据
  // 一个对象对应一个接口，可有多个，因此后面的 router/blog.js 文件会循环这个数组拼接
  module.exports = [{ 
     url: '/banner', // url最后和路由拼接，组成：http://localhost:3000/blog/banner
     type: 'get',
     data: { // 最终接口拿到的数据
        "code": 200,
        "msg": "获取数据成功",
        "data": {
            ...Mock.mock({
            'blogBannerLists|5': [
               {
                 'id|+1': 0, // 从0 开始自增 id
                 // 'id': '@increment(0)',  // 为什么0不生效，-1可以？
                 'title': '@ctitle', // 随机生成中文 title
                 'link|+1': '~/assets/img/blog/course-@id().jpg' // 字符串和 id 拼接
               }
             ]
           })
         }
      }
  }]
  
  
  

• 创建路由

router 文件夹下新建： blog.js（文件名）

// router/blog.js
        
// 引入依赖
const express = require("express")
const router = express.Router()

// 引入 【mock/blog.js】 创建的数据
const MockArr = require("../mock/blog")

MockArr.forEach(item => {
  // 循环把数据里的 url 和路由 进行配置，并发送对应的数据给对应的完整路由，也就是接口
  router[item.type](item.url, (req, res, next) => {
  res.send(item.data)
  })
})

module.exports = router

image-20210416153456093.png

• 完成，可以访问接口 http://localhost:3000/blog/banner