搭建mock服務器(微信小程序)

如何在微信小程序使用mock.js實在是個問題，為了完全模擬訪問路由和數據，選擇在搭建本地mock服務器是一個不錯的選擇。

以下示例了一個mock服務器的搭建過程以及以學生為對象進行增刪改查分頁的示例。

前提要求

安裝了node.js

創建服務器

1. 我們在自己電腦上選擇一個位置，創建一個新的文件夾mockServer,用vscode打開這個文件夾
2. 使用命令安裝以下模塊

cnpm install express body-parser cors nodemon mockjs --save

• express node.js框架
• body-parser 用於解析url
• cors 用來解決跨域問題
• nodemon 解決代碼改變需要自己手動重啟服務器的問題，nodemon檢測到代碼改變會自己啟動服務器
• mockjs mock模擬工具

1. 建立文件和目錄

（1）使用npm init -f生成一個package.json文件

​ 修改為使用 nodemon 啟動

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js"
  },

（2）創建server.js文件,mock目錄

1. 在server.js中寫入以下代碼用於測試，在控制條輸入npm start啟動服務器

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());

app.get('/posts', (req, res) => {
  res.send([
    {
      title: 'Hello World!',
      description: 'Hi there! How are you?'
    }
  ]);
});

//  指定端口
const PORT = 8081;

app.listen(PORT, () => {
  console.log(`服務器啟動，運行為http://localhost:${PORT}`);
});

控制台將會輸出服務器啟動，運行為http://localhost:8081；我們在瀏覽器中訪問http://localhost:8081/posts,出現以下內容，那么說明服務器創建成功。

[
    {
    "title": "Hello World!",
    "description": "Hi there! How are you?"
    }
]

創建mock接口

1. 在mock文件夾下新建2個文件，一個index.js用於聲明路由，一個student.js，用來編寫模擬學生對象相關操作代碼。
2. 在student.js編寫相關操作代碼

//	student.js
const Mock = require('mockjs');
let list = [];
const count = 100;

for (let i = 0; i < count; i++) {
  list.push(
    Mock.mock({
      id: '@increment',
      stuNo: 20220000 + parseInt(`${i + 1}`),
      stuName: '@cname',
      stuGender: '@integer(0,1)',
      stuPhone: /^1[0-9]{10}$/,
      stuBirthday: '@date("yyyy-MM-dd")',
      classNo: '@integer(201901,201912)'
    })
  );
}

//  增加學生
exports.add = (req, res) => {
  const { classNo, stuBirthday, stuGender, stuName, stuPhone } = req.body;
  list.push({
    id: list[list.length - 1].id + 1,
    stuNo: list[list.length - 1].stuNo + 1,
    classNo: classNo,
    stuBirthday: stuBirthday,
    stuGender: stuGender,
    stuName: stuName,
    stuPhone: stuPhone
  });
  let msg = {
    code: 20000,
    data: {
      listNum: list.length,
      message: '添加成功!'
    }
  };
  res.status(200).json(msg);
};

//  刪除學生
exports.delete = (req, res) => {
  const id = req.params.id;

  //  判斷id是否存在
  let flag = list.some(item => {
    if (item.id == id) {
      return true;
    }
  });

  if (flag) {
    // id 存在
    list = list.filter(item => item.id !== parseInt(id));
    const msg = {
      code: 20000,
      data: {
        listNum: list.length,
        message: '刪除成功!'
      }
    };
    res.status(200).json(msg);
  } else {
    //  id不存在
    const msg = {
      code: 40000,
      data: {
        msg: 'id不存在!'
      }
    };
    res.status(500).json(msg);
  }
};
//  更新學生信息
exports.update = (req, res) => {
  const { id, classNo, stuBirthday, stuGender, stuName, stuPhone } = req.body;

  //  判斷id是否存在
  let flag = list.some(item => {
    if (item.id == id) {
      return true;
    }
  });

  if (flag) {
    //  id存在
    list.some(item => {
      if (item.id === id) {
        item.classNo = classNo;
        item.stuBirthday = stuBirthday;
        item.stuGender = stuGender;
        item.stuName = stuName;
        item.stuPhone = stuPhone;
      }
    });
    let msg = {
      code: 20000,
      data: {
        message: '更新成功!'
      }
    };
    res.status(200).json(msg);
  } else {
    //  id不存在
    const msg = {
      code: 40000,
      data: {
        msg: 'id不存在!'
      }
    };
    res.status(500).json(msg);
  }
};
//  查詢學生信息
exports.find = (req, res) => {
  let { queryStr, page = 1, limit = 10 } = req.body;
  //  根據學生姓名查詢學生或者返回所有學生信息

  const mockList = queryStr && queryStr.length > 0 ? list.filter(item => item.stuName.includes(queryStr)) : list;
  //  數據分頁
  const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1));
  let msg = {
    code: 20000,
    count: mockList.length,
    data: pageList
  };
  res.status(200).json(msg);
};

//  根據id返回學生信息
exports.findById = (req, res) => {
  const id = req.query.id;
  const pageList = list.filter(item => item.id == id);
  const msg = {
    code: 20000,
    data: pageList
  };
  res.status(200).json(msg);
};

3. 定義路由

//	index.js
module.exports = function(app) {
  const student = require('./student');

  //  新增學生
  app.post('/student/add', student.add);

  //  刪除學生
  app.delete('/student/delete/:id', student.delete);

  //  更新學生信息
  app.put('/student/update', student.update);

  //  查詢學生信息
  app.post('/student/list', student.find);

  //  查詢單個學生接口
  app.get('/student', student.findById);
};

4. 在server.js中引入index.js文件,刪除定義的posts接口

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());

//  引入路由文件
require('./mock/index')(app);

//  指定端口
const PORT = 8081;

app.listen(PORT, () => {
  console.log(`服務器啟動，運行為http://localhost:${PORT}`);
});

測試接口

以下為在小程序中編寫的測試代碼

<!--index.wxml-->
<view class="container">
  <button catchtap='getStudent'>獲取學生信息</button>
  <button catchtap='deleteStudent'>刪除學生信息</button>
  <button catchtap='addStudent'>新增學生信息</button>
  <button catchtap='updateStudent'>更新學生信息</button>
  <button catchtap='findStudent'>查詢單個學生</button>
</view>
//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {},
  getStudent:function(){
    wx.request({
      url: 'http://localhost:8081/student/list',
      data:{
        queryStr:'',
        page:1,
        limit:10
      },
      method: 'POST',
      success: function (res) {
        console.log('訪問成功:', res);
      },
      fail: function (e) {
        console.log('訪問失敗:', e);
      },
      complete: function () {
        console.log('訪問完成');
      }
    })
  },
  deleteStudent:function(){
    wx.request({
      url: 'http://localhost:8081/student/delete/1',
      method: 'DELETE',
      success: function (res) {
        console.log('訪問成功:', res);
      },
      fail: function (e) {
        console.log('訪問失敗:', e);
      },
      complete: function () {
        console.log('訪問完成');
      }
    })
  },
  addStudent:function(){
    wx.request({
      url: 'http://localhost:8081/student/add',
      data:{
        classNo:'201901',
        stuBirthday:'2019-05-31',
        stuGender:0,
        stuName:'李小珍',
        stuPhone:'12345678910'
      },
      method: 'POST',
      success: function (res) {
        console.log('訪問成功:', res);
      },
      fail: function (e) {
        console.log('訪問失敗:', e);
      },
      complete: function () {
        console.log('訪問完成');
      }
    })
  },
  updateStudent:function(){
    wx.request({
      url: 'http://localhost:8081/student/update',
      data: {
        id:1,
        classNo: '201901',
        stuBirthday: '2019-05-31',
        stuGender: 0,
        stuName: '李小珍',
        stuPhone: '12345678910'
      },
      method: 'PUT',
      success: function (res) {
        console.log('訪問成功:', res);
      },
      fail: function (e) {
        console.log('訪問失敗:', e);
      },
      complete: function () {
        console.log('訪問完成');
      }
    })
  },
  findStudent:function(){
    wx.request({
      url: 'http://localhost:8081/student?id=2',
      data: {},
      method: 'GET',
      success: function (res) {
        console.log('訪問成功:', res);
      },
      fail: function (e) {
        console.log('訪問失敗:', e);
      },
      complete: function () {
        console.log('訪問完成');
      }
    })
  }
})

返回的結果如下:

1. 獲取學生信息

2. 刪除學生信息

3.新增學生信息

4. 更新學生信息

PS:因為前面id被刪除了，所以這個時候更新會報錯

5. 根據id查詢單個學生

2019/05/31 18:56