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

搭建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);
};
  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查询单个学生

2019/05/31 18:56

原文地址:https://www.cnblogs.com/yejingping/p/10956983.html

时间: 2024-11-02 15:44:28

搭建mock服务器(微信小程序)的相关文章

一个小时快速搭建微信小程序

「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字--爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

如何入门微信小程序开发

最近微信开发小程序挺火的,自己选择了腾讯云官方推出的相册. 先下载: 破解版IDE下载地址,以及使用说明: http://download.csdn.net/detail/richard_jason/9660819 http://download.csdn.net/detail/richard_jason/9660821 这里由于csdn有上传大小限制,所以只能做两次上传了.要放在一起看哦. 安装步骤 一个步骤都不能错哦 1.安装0.7 - 扫码登陆 - 关闭0.7 2.安装0.9 --不要启动

从session原理出发解决微信小程序的登陆问题

原理知识准备  对于已经熟悉了session原理的同学来说,我们都清楚:在浏览器端我们会存储一个sessionId,用它来作为凭证,在服务器端得到有关本次浏览器与服务器会话的所有信息,这些信息是储存在服务器端的存储空间中的,它完全可以用来判断一个浏览器端的登录状态,因为它是由服务器端来掌控的,是安全的. 那么浏览器端是用什么来存储这个sessionId? 并且浏览器又是如何将sessionId传回给服务器的呢? 大体上是有两种方法的: 1.使用浏览器端实现的cookie功能,每次浏览器都会将服务

微信小程序如何发送短信验证码,无需搭建服务器

自从微信小程序提供云开发支持,开发者无需搭建后台服务器,使用微信提供的核心API就可以实现应用功能,此时就需要小程序能够自己发送短信,比如短信验证码,榛子云短信(http://smsow.zhenzikj.com)为此开发了一套专门用于小城的SDK,详情参考: http://smsow.zhenzikj.com/doc/sdk.html 下面小编就详细讲解一下如何使用: 1.安装 下载后的SDK只包含一个zhenzisms.js文件,可直接放在utils文件夹中,然后通过require引入,如下

微信小程序开发入门(一),Nodejs搭建本地服务器

1.  如何模拟真实环境中,读取服务端数据,首先需要使用Nodejs搭建一个本地服务器的环境. 在搭建web服务器之前,需要先安装node.js(安装版本最好为6.9.x) 安装后node.js,接下来就需要安装http的镜像文件 npm install http-server -g(windows下)sudo npm install http-server -g(linux和mac下)接下来在桌面创建一个文件夹 cd 文件夹名字http-server这时候,就会显示在8080端口下运行的一个本

如何一键式搭建微信小程序

有了微信小程序,对你到底意味着什么? 对于用户来说,再也不用担心手机的内存不够用了!一个小程序只有1M,随便卸载一个App,就能安装很多小程序! 对于老板来说,你不再需要花费数十万来去请外包公司帮你去开发一个App来,而且还不能做多机型的适配! 对于开发者来说,你有了一个新的做私活的机会!微信小程序的模式让你轻轻松松一个人完成所有任务! 接入微信小程序,我们究竟有哪些问题? 微信小程序,是一个新生事物,和我们的传统的Web业务并不相同,而其基于JS的语法,也让很多前端开发工程师涌入其中.那么微信

为苹果ATS和微信小程序搭建 Nginx + HTTPS 服务

昨天测试开发微信小程序,才发现微信也要求用HTTPS加密数据,想来是由于之前苹果的ATS审核政策的缘故吧,微信想在苹果上开放小程序必然也只能要求开发者必须使用HTTPS了,于是在服务器上测试安装Nginx+HTTPS服务. 安装 HTTPS 最麻烦的问题应该就是获取证书了,证书感觉种类也挺复杂的,有好几种,单域.泛域.多域...还有个种标准乱七八糟的感觉,而且收费很高,还是每年买的. 现在各个云服务商也都有提供各种基础功能的免费证书,但似乎很多只对单域免费,这里的单域是指每个二级域名都算是一个域

微信小程序详细图文教程-10分钟完成微信小程序开发部署发布(3元获取腾讯云服务器带小程序支持系统)

很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现的是基础功能.但是,可以给学习者很便捷的体验和很好的启发. 不过,随着微信平台和云服务的发展,真担心,程序猿会失业! 目录 一.微信小程序申请 二.服务器设置(申请.部署.域名) 1.申请服务器 2.部署服务器 3.域名申请和配置 三.小程序发布 1.下载DEMO 2.下载开发工具并安装 3.配置参