后台模拟前端php,前台模拟后台数据mockjs

如今前后端已分离工作，后端数据还没及时提供时候，前端人员为了不让项目落后，应该适当给自己模拟接口数据。那么模拟接口数据就可以使用mockjs,可以来到https://github.com/nuysoft/Mock/wiki/Getting-Started

这是mock的jithub的教程，所以我们按照里面的教程安装并且使用就可以了。

如下是我的安装顺序，在这里我用的是yarn包管理器

1.创建项目文件夹，我这里叫user，里面有front前台文件夹，和back后台文件夹，在front文件夹子目录再建一个mock文件夹。

2.进入mock文件夹，yarn init -y 初始化文件夹,接着就yarn add mockjs,

3.在mock文件夹新建一个app.js文件，可在里面模拟一些数据(暂时)，

此时mock文件夹下

mock文件夹.png

// 使用 Mock

var Mock = require('mockjs');

// [{id;username;birthday;isGender;infos;avatar}]

var rs=[]

for (var i = 0;i<10;i++){

var data = Mock.mock({

// 属性 list 的值是一个数组，其中含有 1 到 10 个元素

'list|1': [{

// 属性 id 是一个自增数，起始值为 1，每次增 1

'id|+1': 10,

'username|1':Mock.Random.cname(),

'birthday':Mock.Random.date('yyyy-MM-dd'),

'isGender':Mock.Random.boolean(),

'infos':Mock.Random.paragraph(1,10),

'avatar':Mock.Random.image('100x100')

}]

})

rs.push(data)

}

// 输出结果

console.log(rs);

运行结果如下：

mock结果.png

当然 ，多了一层list我们也可以去掉，直接成

for (var i = 0;i<10;i++){

var data = Mock.mock({

// 属性 list 的值是一个数组，其中含有 1 到 10 个元素

// 属性 id 是一个自增数，起始值为 1，每次增 1

'id|+1': 10,

'username|1':Mock.Random.cname(),

'birthday':Mock.Random.date('yyyy-MM-dd'),

'isGender':Mock.Random.boolean(),

'infos':Mock.Random.paragraph(1,10),

'avatar':Mock.Random.image('100x100')

})

rs.push(data)

}

现在数据是模拟出来了，我们还要模拟请求接口，用express-art-templte也能实现。在mock目录下我们要使用express快速生成器(脚手架)来初始化我们的框架。

1.在mock文件夹打开cmd，输入express --view=pug myapp，此时就生成好了一个架构.

2.然后cd myapp里面输入yarn或者npm install安装express需要的依赖，最后执行yarn start程序就执行了，默认端口是3000

：

文件树.png

在用mvc分层思想，再建一个controllers和models文件,别忘了在myapp文件下再安装一下mockjs哦(之前安装路径不一样，还需要在myapp文件中yarn add mockjs)

mvc.png

因为model层是负责与数据库打交道的，所以之前模拟数据应该放在model层，所以

// 使用 Mock,

//mockModel.js

var Mock = require('mockjs');

// [{id;username;birthday;isGender;infos;avatar}]

var rs=[]

for (var i = 0;i<10;i++){

var data = Mock.mock({

// 属性 list 的值是一个数组，其中含有 1 到 10 个元素

'list|1': [{

// 属性 id 是一个自增数，起始值为 1，每次增 1

'id|+1': 10,

'username|1':Mock.Random.cname(),

'birthday':Mock.Random.date('yyyy-MM-dd'),

'isGender':Mock.Random.boolean(),

'infos':Mock.Random.paragraph(1,10),

'avatar':Mock.Random.image('100x100')

}]

})

rs.push(data)

}

// 输出结果

module.exports={

userData:rs

}

接下来我们就要去到controller层了,利用model传过来的数据做判断

//userController.js

var mockModel = require('../models/mockModel');

function lst(req,res) {

var userData=mockModel.userData;

res.json({

error_code:0,

reason:'成功返回用户列表',

result:userData

})

}

module.exports={

lst

}

然后到路由文件层理调用controller就好了吧，记得别忘了在app.js设置外置路由哦

//路由文件

var express = require('express');

var router = express.Router();

var userController= require('../controllers/userController')

/* GET users listing. */

router.get('/lst', userController.lst);

module.exports = router;

请求成功.png

请求成功后就能在页面看到如上图所示内容，可以到view层用ajax请求接口地址把数据渲染出来，所以整个模拟后台数据接口就完成啦。

比如这时候我有一个list.html来显示数据

用户列表

序号用户名头像生日性别地址

我们要在tbody里面添加数据，这时候就要发送ajax了，可是我们的前台啊没有链接数据库这种操作，更别服务器了，我们可以用本地web服务器

1.如果你是webstrom编辑器的话，它自带了一个服务器内置的。

选择打开的浏览器.png

2.sunblime可以安装sunblime的插件

sunblimeServer.png

3.也可以使用express.static将view文件设置为静态文件。

4.phpstudy

5.npm下载一个http-server的包。步奏如下，

(1)先打开cmd安装全局 npm install http-server -g

http-server安装成功.png

(2)再去到你的front项目文件夹输入http-server -c-1 (⚠️只输入http-server的话，更新了代码后，页面不会同步更新)

本地服务器链接.png

得到的结果如下有两个链接，可以选一个输入在浏览器的地址栏，再拼接html文件，就可以访问了。

访问地址.png

按快捷键CTRL-C

终端显示^Chttp-server stopped.即关闭服务成功。

好了我们开始吧

先要调用mock的接口

就要发送ajax请求了,请求的接口就是之前模拟数据展示的那个

数据接口请求地址.png

这时候我们就要想啦，我们目前本地服务器的端口是8081，接口地址是3000，那我们就会造成跨域问题。

解决接口调用跨域问题，那就要回到mock文件下的myapp文件cmd ，输入yarn add cors,去到myapp的app.js文件里加上

var cors = require('cors');

app.use(cors());

//list.html

/**

* 页面DOM加载完毕后，执行

* @param {String} ) { var url [description]

* @return {[type]} [description]

*/

$(function () {

var url = 'http://localhost:3000/users/lst';

getUserListData(url);

})

//user.js

**

* 发送网络请求获取用户列表数据

* @param {[type]} url [description]

* @return {[type]} [description]

*/

function getUserListData(url) {

// 发送ajax请求获取数据

$.ajax({

url,

type: 'GET',

dataType: 'json',

success:function(json){

if(json.error_code === 0){

// 格式化数据，一般提取出一个方法

var _html = formatUserData(json.result);

$("#container").html( _html );

}else{

alert('系统繁忙！');

return;

}

}

});

}

**

* 用户格式化用户的列表数据

* @param {[type]} data [description]

* @return {[type]} [description]

*/

function formatUserData(data) {

var _html = ``;

data.forEach( (item, index) => {

var gender = item.isGender ? '男' : '女';

_html += `

${item.id}${item.username} ${item.birthday}${gender}${item.address}`;

} );

return _html;

}

这时候页面就能展示数据啦

最终结果.png

在这里需要注意的是，我用的虽然是添加html文本的形式添加的，假设我做的是购物车，我对价格要做保留两位小数的处理，这时候要用到过滤器了把，可是过滤器要在添加html时候加么？?我试过，但是会表示过滤器未定义。。。后来我的解决方案是不添加html文本了，而是用v-for将数据循环遍历出来到页面。

我在ajax请求的成功回调时候就定义了一个保留两位

function getGoodslistData(url) {

$.ajax({

url,

type:'GET',

dataType:'json',

success:function (json) {

if(json.err_code == 0){

var cartListData = json.result;

var vm = new Vue({

el: '#cart1',

data: {

cartListData

},

// 局部过滤器 filters

filters: {

toFixed2: function (input, param) {

console.log(input);

console.log(param);

return input.toFixed(param);

}

}

})

// var _html=formatGoodsData(json.result);

// console.log(json.result)

// $('#container').html(_html);

}else{

alert('系统繁忙');

return;

}

}

})

}

此时就不用添加html啦，但是要注意到，由于是请求接口，所以接口那边的服务是不能关掉的！！！！！！！！！