前端利用 node.js + mock 简单模拟数据接口服务器

前端简单构建一个模拟数据服务器，一个json文件对应一个数据请求，需要增加接口就只需要增加新的json文件，在json文件中可以按照mock的语法写（注：json文件不允许单引号）。

目录结构

1. 新建MockServer文件夹

2. 在文件夹下 npm init

一路回车就是了

3. 安装依赖

 // express web框架
 npm i express 
 // mock模拟数据
 npm i mockjs 
 // 全局安装自动重启工具，监听文件变化
 cnpm i nodemon -g 

4. 根目录中创建MockServer.js入口文件

let express = require('express');   //引入express

let app = express();        //实例化express
const router = require('./api/api.js')  //  引入路由
// 跨域访问
app.use('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

//  使用路由 /index 是路由指向名称
app.use(`/api`,router)

app.listen('8090', () => {
    console.log('监听端口 8090...')
})

5. 根目录中创建api目录

5.1 创建api.js文件

const express = require(`express`)
const fs = require('fs')
let Mock = require('mockjs');       //引入mock
const router = express.Router()

// router.use((req, res, next) => {
//   console.log(`路由执行成功啦~~~`, Date.now());
//   next()
// })

/*readdir读取目录下所有文件*/
fs.readdir('./api', function(err, files) {
  if(err) {
      console.log(err);
  } else {
      /*遍历读取文件夹中的内容*/
      files.forEach((item ,index) => {
          /*遍历读取文件夹中的内容*/
          /*一个json文件就是一个请求*/
          router.all(`/${item.replace(/.json/, '')}`, function(req, res){
              // 以utf8格式读取json文件内容
              fs.readFile(`./api/${item}`, 'utf-8', function(err, data) {
                  if (err) console.log(err)
                  else {
                      // 以json对象返回数据
                    res.json(Mock.mock(JSON.parse(data)));
                  }
               })  
          })
      })
  }
})

module.exports = router

5.2 创建Dataone.json文件

{
  "status": 200,
  "dataSource|1-9":[{
      "key|+1": 1,
      "mockTitle|1":["肆无忌惮"],
      "mockContent|1": ["角色精湛主题略荒诞", "理由太短 是让人不安", "疑信参半 却无比期盼", "你的惯犯 圆满", "别让纠缠 显得 孤单"],
      "mockAction|1": ["下载", "试听", "喜欢"]
  }]
}

测试

开启服务器

nodemon MockServer.js

浏览器地址栏中输入接口

控制台中查看结果

参考文章

正确开启Mockjs的三种姿势：入门参考（一）