安装 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