mock运行服务器代码,使用express+mockjs搭建服务器和模拟数据

概述

Express是目前最流行的基于Node.js的Web开发框架，提供各类模块，能够快速地搭建一个具备完整功能的网站。css

Express的上手很是简单，首先新建一个项目目录，假定叫作hello-world。html

$mkdir hello-world

进入该目录，新建一个package.json文件，内容以下。前端

{

"name": "hello-world",

"description": "hello world test app",

"version": "0.0.1",

"private": true,

"dependencies": { "express": "4.x"}}

上面代码定义了项目的名称、描述、版本等，而且指定须要4.0版本以上的Express。node

而后，就能够安装了。web

$npm install

安装了Express及其依赖的模块之后，在项目根目录下，新建一个启动文件，假定叫作index.js。ajax

var express = require('express');

var app = express();

app.use(express.static(__dirname + '/public'));

app.listen(8080);

上面代码运行以后，访问http://localhost:8080，就会在浏览器中打开当前目录的public子目录。若是public目录之中有一个图片文件my_image.png，那么能够用http://localhost:8080/my_image.png访问该文件。express

你也能够在index.js之中，生成动态网页。npm

// index.js

var express = require('express');

var app = express();

app.get('/', function (req, res) {

res.send('Hello world!');

});

app.listen(3000);

而后，在命令行下运行下面的命令，就能够在浏览器中访问项目网站了。json

node index

默认状况下，网站运行在本机的3000端口，网页显示Hello World。后端

index.js中的app.get用于指定不一样的访问路径所对应的回调函数，这叫作“路由”(routing)。上面代码只指定了根目录的回调函数，所以只有一个路由记录，实际应用中，可能有多个路由记录。这时，最好就把路由放到一个单独的文件中，好比新建一个routes子目录。

// routes/index.js

module.exports = function (app) {

app.get('/', function (req, res) {

res.send('Hello world');

});

};

而后，原来的index.js就变成下面这样。

// index.js

var express = require('express');

var app = express();

var routes = require('./routes')(app);

app.listen(3000);

小实例

该实例时为了开发项目时实现先后端分离, 所以使用express搭建一个简易的服务器, 而且配合mockjs模拟假数据, 这样项目运行时就不须要依赖后台.

1. 下载依赖模块

npm install express mockjs supervisor --save-dev

其中express就是上文讲到的框架,用于搭建服务器.mockjs是用来模拟假数据的, supervisor用来监视文件修改的, 使用supervisor启动服务时, 只要文件有修改过, 程序就会自动从新编译文件, 至关于从新开启服务器.

2. 项目根目录下建立server.js

let path = require('path'); // nodejs自带模块

let express = require('express'); // 引入express

let app = express(); // 建立express实例

app.use('/lottery', require('./lottery'));

app.use(express.static('src')); // 指定静态资源所在的目录

// 设置路由配置

app.get('/', function(req, res) {

res.sendFile(path.join(__dirname, '../index.html'));

});

// 监听端口, 建立服务器

let server = app.listen(9006, function() {

console.log('app listening at http://localhost:9006');

})

代码中第5行经过require()请求根目录下的lottery.js文件, 该文件实际上是使用mockjs来模拟数据的, 这里使用use方法来使用这个中间件来对数据进行处理后返回给客户端

代码中第7行use是指定静态资源的位置, 好比我这里的一些css, js等资源放置在src目录下, 因此这里express.static里面的参数就是src. 若是没有这一行代码, 在index.html中无论经过何种路径去指定资源文件, 都会报404错误没法找到资源

代码中第10行get方法是用于指定不一样的访问路径所对应的回调函数，这叫作“路由”(routing)。这里指定了/, 就是指定访问首页时候的路由, 第11行res.sendFile将本地建立的index.html返回给客户端, 显示在浏览器上. 这里须要使用到node自带的node模块, 由于这里须要定位到根目录下面, 因此须要使用path.join定位到根目录下的index.html

第15行app.listen用来监听端口, 而后后面咱们在命令行中输入node server.js就能够启动服务器, 而且输入localhost:9006就能够访问服务器上的页面

3. 建立数据文件lottery.js

let express = require('express'); // 引入express文件

let router = express.Router(); // 建立router实例

let Mock = require('mockjs'); // 引入mockjs模块建立假数据

// 将接口名称命名为lottery.do, 所以在HTML文件中若是须要使用该接口, 那么发送请求的时候就要声明是lottery.do

router.all('/lottery.do', function(req, res) {

let data = {

data: {

dayLotteryTimesLimit: 10,

description: "抽奖活动",

endDate: 1518848777000,

id: 5,

name: "3月抽奖",

prizeList: [

{id: 4, lotteryId: 5, type: 4, name: "50元红包", value: 200},

{id: 5, lotteryId: 5, type: 3, name: "爱奇艺会员1个月", value: 500},

{id: 6, lotteryId: 5, type: 3, name: "夏凉坐垫", value: 10},

{id: 8, lotteryId: 5, type: 1, name: "幸福西饼代金券", value: 200},

{id: 0, name: "谢谢参与"},

{id: 9, lotteryId: 5, type: 3, name: "美的遥控落地扇", value: 100}

],

startDate: 1492241168000

},

errorCode: 0,

msg: ""

}

res.json(data);

});

module.exports = router;

须要注意的是倒数第三行的res.json是用于将数据转换为json格式的, 若是没有这一行的话, 后面使用ajax请求数据也是会报错的

最后一行用于将当前建立的router对象给输出, 给别的地方引用, 对应的步骤2中的require(‘lottery’)

4. 建立index.html

那么当咱们在某个JS文件中或者HTML文件中须要使用到刚刚建立的lottery.js里面的接口的数据了, 能够这样编写代码:

$.ajax({

// 注意这里的lottery指的是前面server.js中第4行代码经过app.use指定的名字, 而lottery.do则是数据文件lottery.js中指定的数据接口的名称

url: '/lottery/lottery.do',

type: 'GET'

})

.done(function(result) {

var data = result.data;

document.write(data.dayLotteryTimesLimit);

document.write(data.description);

})

.fail(function(xhr, textStatus) {

console.log(xhr.status);

console.log(textStatus);

})

.always(function() {

console.log("complete");

});

那么最后, 当咱们经过命令行定位到项目根目录了, 而后输入命令node server.js就能够建立服务了, 而后咱们在浏览器地址栏中输入”localhost:9006”而后回车, 服务器给咱们返回的内容就是server.js文件中的第7行代码中指定的index.html, 而且html文件加载时就发送ajax请求, 最后在页面上显示的就是两句document.write输出的内容.

经过这种模式, 前端工程师在开发项目的时候, 就不须要等待后台开发出数据接口以后才能进行页面的一些布局等等开发操做, 而是本身搭建服务器而且模拟数据, 这样就能够和后端开发工程师同步工做了.