使用express+mockjs搭建服务器和模拟数据
来源:互联网 发布:蜂窝移动数据当期时间 编辑:程序博客网 时间:2024/06/05 17:57
概述
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.jsvar 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.jsmodule.exports = function (app) { app.get('/', function (req, res) { res.send('Hello world'); });};
然后,原来的index.js就变成下面这样。
// index.jsvar 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'); // 引入expresslet 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.dorouter.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输出的内容.
通过这种模式, 前端工程师在开发项目的时候, 就不需要等待后台开发出数据接口之后才能进行页面的一些布局等等开发操作, 而是自己搭建服务器并且模拟数据, 这样就可以和后端开发工程师同步工作了.
- 使用express+mockjs搭建服务器和模拟数据
- mockjs模拟后台数据
- nodejs express服务器搭建和使用教程
- MockJs结合json-server模拟后台数据
- 使用Express搭建Web服务器
- mockjs使用
- 使用express, create-react-app, mongodb搭建react模拟数据开发环境
- 使用Express搭建HTTPs加密服务器
- 基于vue-cli及express模拟Ajax获取服务器数据
- express模拟mock数据
- 搭建express服务器
- 使用 Node.js 和 Express.js 搭建简易 HTTP/2 服务器
- gulp、MockJs、NodeJs、Mustache脱离后台环境,只通过模拟数据运行项目
- Mockjs
- Mockjs
- 建立node.js服务器(使用express搭建Web环境)
- 用node.js搭建服务器,模拟返回json数据供客户端get,post请求使用
- node+express web服务器搭建
- React Native 字符串加密 base64
- 图像处理--颜色变换
- 在Eclipse中如何关联源代码
- 很多friend,j2ee的web项目搞了这么多年,为什么从来没用到过多线程?自己从来没有动手自己写过多线程?
- 陌陌面试
- 使用express+mockjs搭建服务器和模拟数据
- ubuntu下cpu数,核心数,线程数的关系
- Socket通信
- 链表的合并与反转
- 最常用的几个Pycharm快捷键
- Spring Cloud 的 Hystrix 在 Feign上使用 Hystrix功能
- 我的互联网价值观、方法论和个人实践(3)-衣食住行
- Thrift基础使用
- HDOJ HDU 1061 Rightmost Digit