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

其他 2019-05-31 19:24:47 阅读次数: 0

搭建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目录

mockServer目录

  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);
};
  1. 定义路由
//  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);
};
  1. 在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. 获取学生信息

获取学生信息

  1. 删除学生信息

删除学生信息

3.新增学生信息

新增学生信息

  1. 更新学生信息

更新学生信息

PS:因为前面id被删除了，所以这个时候更新会报错

  1. 根据id查询单个学生

根据id查询单个学生

2019/05/31 18:56

猜你喜欢

转载自www.cnblogs.com/yejingping/p/10956983.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022