前后模拟后端接口返回数据
请求本地 json 文件，返回数据
json文件中写入数据：
// message.json
{
"code":"000",
"message":"message",
"lists":[
{
"name":"小张",
"sex":"男",
"age": "21"
},
{
"name":"小丽",
"sex":"女",
"age":"18"
}
,
{
"name":"小白",
"sex":"女",
"age":"18"
}
]
}
前端进行数据请求：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>请求本地json文件数据</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
// 请求路径是当前文件的相对路径
$.ajax({
url:'list.json',
contentType: 'application/json',
type: 'get',
dataType:'JSON',
success: function (res) {
console.log("成功");
if(res.code == '000'){
console.log(res);
$('body').html(JSON.stringify(res));
}else{
alert(res.message);
}
},
Error: function (xhr, type, errorThrown) {
console.log(errorThrown);
}
});
})
</script>
</body>
</html>
使用mockjs,拦截ajax请求返回数据
引入mockjs,可以是在线地址，或者是下载到本地引入
根据数据模板生成模拟数据。（一般场景配置两个参数够用了Mock.mock( rurl, template )）
Mock.mock( rurl?, rtype?, template|function( options ) )
- rurl（可选）：表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //train.json/，’/train.json’。
- rtype（可选）：表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
- template （可选）：表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、’@EMAIL’。
- function(options)（可选）：表示用于生成响应数据的函数。
- options 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
（可选）配置拦截ajax请求时的行为；
- Mock.setup( settings )；
- settings必选，支持的配置项有：timeout；
- 指定被拦截的 Ajax 请求的响应时间，单位是毫秒。
例如： 配置Mock.setup({timeout: 5000})之后网页打开5000毫秒之后才会返回数据;
Mock.Random 是一个工具类，用于生成各种随机数据
- Mock.Random 提供的完整方法（占位符）如下：
- 基本：boolean, natural, integer, float, character, string, range,
- 时间：date, time, datetime, now；
- 图片：image, dataImage；
- 颜色：color，hex，rgb，rgba，hsl；
- 文本：paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle；
- 名字：first, last, name, cfirst, clast, cname；
- web：url, domain, email, ip, tld；
- 地址：region，province，city，county，zip；
- Helper：capitalize, upper, lower, pick, shuffle；
- Miscellaneous：guid, id, increment;
使用方法：在模板数据中定义参数,值为@加上对应的占位符用引号引起来，比如’nowTime’:’@now’,请求返回的数据就是当前发送请求时的时间 “2020-03-30 10:08:38”；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>mockjs拦截ajax请求返回数据</title>
</head>
<body>
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
$(function () {
// mock拦截ajax请求并返回数据
Mock.mock(/\.json/, {
'code':'000',
'message':'message信息',
'list|1-10': [{
'id|+1': 1,
'email': '@EMAIL', //邮箱
'name': '@name', //名字
'time':'@now' //当前时间
}]
})
Mock.setup({
timeout: 4000
})
$.ajax({
url:'train.json',
contentType: 'application/json',
type: 'POST',
timeout: 5000,
dataType:'JSON',
data: JSON.stringify({schoolId: 123}),
success: function (res) {
if(res.code == 000){
console.log(res);
$('<pre>').text(JSON.stringify(res, null, 4)).appendTo('body');
}else{
alert(res.message);
}
},
Error: function (xhr, type, errorThrown) {
console.log(errorThrown);
}
});
})
</script>
</body>
</html>
使用node搭建简单服务器接收请求返回数据
- 安装node.js
- 全局安装 npm ,最好同时安装cnpm 淘宝npm镜像，如果npm 安装依赖包的时候报错，有时候是网络不好，可以使用淘宝镜像cnpm来安装；
npm install -g npm，npm install -g cnpm - 安装express应用程序生成器，
npm install -g express-generator - 有安装Git Bash Here等第三方命令行工具，打开文件管理，进入到想要生成项目的位置后，右键打开Git Bash Here 就可以在当前位置启动命令行工具了；
- 如果没有安装git等第三方cmd命令行工具，打开文件管理，进入到想要生成项目的位置后，直接在地址栏输入cmd，会在当前目录打开cdm命令行工具；
打开命令行工具之后，就可以开始以下步骤：
创建一个名为myapp的express应用程序
扫描二维码关注公众号，回复：
10526927 查看本文章
express --view=pug myapp
成功后会自动在目标位置创建一个名为myapp的项目并生成很多文件，命令行显示效果如下：
$ express --view=pug myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/views
create : myapp/views/index.pug
create : myapp/views/layout.pug
create : myapp/views/error.pug
create : myapp/bin
create : myapp/bin/www
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
install dependencies:
> cd myapp && npm install
run the app:
> SET DEBUG=myapp:* & npm start
在命令行最下面有提示，install dependencies: cd myapp && npm install 然后 run the app: npm start,按照提示来；
进入myapp项目；
cd myapp
安装package.json文件中的依赖；
npm install
网络不好可以用cnpm安装
cnpm install
运行项目
$ npm start
在浏览器输入localhost:3000，会打开一个页面显示Welcome to Express，说明已经成功启动服务了。
配置
打开myapp项目，可以看到目录是下面这样的；
.
├── app.js
├── bin
│ └── www
├── node_modules //安装的依赖
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
这个时候，浏览器打开localhost:3000/users,可以看到页面显示respond with a resource
打开routes 文件夹下的users看到以下代码：
// routes/users.js文件
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
可以看到页面显示的内容就是users.js文件中返回的内容，定义自己想要返回的内容。
// routes/users.js文件
var express = require('express');
var router = express.Router();
var data = {
'code':'000',
'message':'message消息',
'lists':[
{
'naem':'小明',
'age': '12',
'sex':'男'
},{
'naem':'小红',
'age': '12',
'sex':'女'
}
]
}
改了之后再请求没有改变，查看命令行信息，304发现的请求缓存了；
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send(data);
});
module.exports = router;
改了之后再请求没有改变，查看命令行信息，304发现请求缓存了；
GET /users 304 2.543 ms - -
重新启动一下试试，刷新页面返回：
{
"code": "000",
"message": "message",
"lists": [
{
"naem": "小明",
"age": "12",
"sex": "男"
},
{
"naem": "小红",
"age": "12",
"sex": "女"
}
]
}
这样虽然可以请求，但是有缓存问题，而且接口多的话每次都得配置一个路径，太复杂，所以要封装一下，重复使用，每次请求重新请求不加载缓存。
在项目下新建一个config文件夹并新建一个api.js,配置一下：
// config/api.js
var fs = require('fs');
/**
* 检查请求的路径是否存在
* @param apiName 请求路径
* @param method 请求方式
* @param params 请求参数
* @param res 返回请求
*/
function getDataFromPath (apiName,method,params,res){
if(apiName){
fs.access(
// 提取请求路径中的js文件
apiName.substring(1)+'.js',
// 回调函数，检查请求的路径是否有效失败返回一个错误参数
function(err){
if(!err){
// 每次请求都清除模块缓存重新请求
delete require.cache[require.resolve('..'+apiName)];
try{
addApiResult(res,require('..'+apiName).getData(method,params));
}catch(e){
console.error(e.stack);
res.status(500).send(apiName+' has an error,please check the code.');
}
}else{
addApiResult(res);
}
}
);
}else{
addApiResult(res);
}
};
/**
* 响应头
* @param res
*/
function addApiHead(res){
res.setHeader('Content-Type', 'application/json;charset=utf-8');
// 跨域
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
// 控制http缓存
res.header("Cache-Control", "no-cache, no-store, must-revalidate");
res.header("Pragma", "no-cache");
res.header("Expires", 0);
}
/**
* 返回参数，如无返回参数返回404
* @param res
* @param result
*/
function addApiResult(res,result){
if(result){
res.send(result);
}else{
res.status(404).send();
}
}
/*请求方式*/
// get
exports.get = function(req, res){
addApiHead(res);
getDataFromPath(req.path,'GET',req.query,res);
};
// post
exports.post = function(req, res){
addApiHead(res);
getDataFromPath(req.path,'POST',req.body,res);
};
打开根目录下app.js，在上面引入刚刚新建的文件api.js;
//引入API
var api = require('./config/api');
替换请求配置
/*配置请求*/
app.get('/', function(req, res){
res.send('hello world');
});
app.get('/api/*', api.get);
app.post('/api/*', api.post);
app.js最终代码：
// app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
/*引入api*/
var api = require('./config/api');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//配置请求
app.get('/', function(req, res){
res.send('hello world');
});
app.get('/api/*', api.get);
app.post('/api/*', api.post);
app.options('/api/*', function(req, res, next){
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
res.sendStatus(200);/*让options请求快速返回*/
});
module.exports = app;
根目录新建api文件夹，新建demo.js;
// api/demo.js
var dataDemo={
'code':'000',
'message':'message消息',
'lists':[
{
'naem':'小明',
'age': '12',
'sex':'男'
},{
'naem':'小红',
'age': '12',
'sex':'女'
}
]
}
exports.getData = function(method,data){
var backData={
"code":'000',
"msg":"",
"data":dataDemo
}
if(method=='DELETE'){
backData={
"code":'999',
"msg":"不支持DELETE方法"
}
}
return JSON.stringify(backData);
}kData);
}
重新运行npm start，浏览器打开localhost:3000，此时应该显示的是hello world；
打开localhost:3000/api/demo,页面显示
{
"code": "000",
"msg": "",
"data": {
"code": "000",
"message": "message消息",
"lists": [
{
"naem": "小明",
"age": "12",
"sex": "男"
},
{
"naem": "小红",
"age": "12",
"sex": "女"
}
]
}
}
以上都成功了，那就说明配置成功了，复制一个js文件命名为demo2.js,改动一下数据，浏览器访问localhost:3000/api/demo2应该也是可以的；
使用
假如线上接口是 https://www.baidu.com/mydata/java/school/list,我们在api文件夹按照路径新建文件夹和文件即可:
├── api
│ └── mydata
│ └── java
│ └── school
│ └── list.js
开发的时候指向本地服务器器接口，联调测试上线的时候只需要把指向本地服务器地址替换成线上地址一下就可以了。
<script type="text/javascript">
$(function () {
// var baseUrl = 'https://www.baidu.com'; //线上地址
var baseUrl = 'http://localhost:3000/api'; //本地服务器地址
$.ajax({
url: baseUrl+'/mydata/java/school/list',
contentType: 'application/json',
type: 'POST',
timeout: 5000,
dataType:'JSON',
data: JSON.stringify({schoolId: 123}),
success: function (res) {
if(res.code == '000'){
console.log(res);
$('body').html(JSON.stringify(res));
}else{
alert(res.message);
}
},
Error: function (xhr, type, errorThrown) {
console.log(JSON.stringify(xhr));
console.log(type);
console.log(errorThrown);
}
});
})
</script>
微信小程序模拟数据
微信小程序进行数据模拟采用WxMock，基于的是mock.js。mock.js 从 https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js 下载。
var Mock=require("../../WxMock.js");
复制WxMock.js的文件复制到指定的文件下。
在app.js中添加模拟接口并返回结构。
api.js：配置模拟数据和后台接口数据，通过 DEBUG = true;//切换数据入口
let API_HOST = "http://xxx.com/xxx";
let DEBUG = true;//切换数据入口
var Mock = require('mock.js')
function ajax(data = '', fn, method = "get", header = {}) {
if (!DEBUG) {
wx.request({
url: config.API_HOST + data,
method: method ? method : 'get',
data: {},
header: header ? header : { "Content-Type": "application/json" },
success: function (res) {
fn(res);
}
});
} else {
// 模拟数据
var res = Mock.mock({
'error_code': '',
'error_msg': '',
'data|10': [{
'id|+1': 1,
'img': "@image('200x100', '#4A7BF7','#fff','pic')",
'title': '@ctitle(3,8)',
'city': "@county(true)",
'stock_num': '@integer(0,100)',//库存数量
'marketing_start': '@datetime()',
'marketing_stop': '@now()',
'price': '@integer(100,2000)',//现价，单位：分
'original_price': '@integer(100,3000)'
}]
})
// 输出结果
// console.log(JSON.stringify(res, null, 2))
fn(res);
}
}
module.exports = {
ajax: ajax
}
index.js中代码：
//index.js
//获取应用实例
var app = getApp()
var API = require('../../utils/api.js')
Page({
data: {
},
onLoad: function () {
console.log('onLoad')
var that = this
// 使用 Mock
API.ajax('', function (res) {
//这里既可以获取模拟的res
console.log(res)
that.setData({
list:res.data
})
});
console.log(this.data.list)
}
})
