使用express+mockjs搭建服务器和模拟数据

概述

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

Express的上手非常简单，首先新建一个项目目录，假定叫做hello-world。

$ 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。

然后，就可以安装了。

$ npm install

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

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访问该文件。

你也可以在index.js之中，生成动态网页。

// index.js

var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello world!');
});
app.listen(3000);

然后，在命令行下运行下面的命令，就可以在浏览器中访问项目网站了。

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输出的内容.

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