express+mockjs搭建資料服務

前端開發的朋友們，不免會有要模拟假資料的時候，當然你的項目中有模拟資料的配置（如mock）則更好；

但是當僅僅就是想起個服務端，模拟點假資料便于開發調用，那麼今天就給大家介紹一種快捷有效的方法：

express+mockjs搭建資料服務

現隻模拟一下四個接口供參考：

http://127.0.0.1:30001/api/users  get請求  清單資料

http://127.0.0.1:30001/api/users/123456  get請求 單條資料

http://127.0.0.1:30001/api/users  post請求  新增資料

http://127.0.0.1:30001/api/users/123456  put請求 修改單條資料

http://127.0.0.1:30001/api/users/123456  delete請求 删除單條資料

話不多說，上貨

1建立目錄demo mkdir demo 進入 cd demo

2建立package.json檔案，寫入：

{
  "name": "express-mock",
  "version": "1.0.0",
  "description": "express+mockjs搭建資料服務",
  "main": "index.js",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "mockjs": "^1.0.1-beta3"
  },
  "devDependencies": {},
  "scripts": {
    "start": "node index"
  },
  "author": "Heavy",
  "license": "ISC"
}
           

3建立index.js檔案，寫入：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

require('./mock/user')(app); //user資料

var server = app.listen(30001, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('App listening at http://%s:%s', host, port);
});
           

4建立目錄mock mkdir mock 進入 cd mock

(1)mock目錄下建立user.js檔案，寫入：

let Mock = require('mockjs'); 

let db=Mock.mock({
	'data|50-100':[{
		id:'@id',
		name:'@cname',
		'age|18-100':1,
		create_time:'@datetime',
		avatar:function() {
			return Mock.Random.image('100x100',Mock.Random.color(),Mock.Random.string('upper', 3))
		},
		address:'@county(true)',
		email:'@email',
		love_color:'@color',
		'description':'@csentence(20, 40)'
	}]
});


module.exports = function (app) {

	//擷取清單資料
	app.get('/api/users', function (req, res) {
		
		let pagesize=req.headers&&req.headers.pagesize;
		let current=req.headers&&req.headers.current;
	
		res.header('total', db.data.length);
		res.status(200).json(db.data.slice((current-1)*pagesize,current*pagesize));
		
	});

	//擷取單個詳情
	app.get('/api/users/:id', function (req, res) {
		
		let id=req.params.id;
        let info={
            data:{}
        };
        db.data.map(item=>{
            if(item.id==id){
                info.data=item
            }
        })
        
        res.status(200).json(info);
		
	});

	//新增一條資料post
	app.post('/api/users', function (req, res) {
		
		let user=req.body;
        user.id=Mock.mock('@id');
        db.data.push(user);
        
        res.status(200).json(user);
		
	});

	//修改一條資料put
	app.put('/api/users/:id', function (req, res) {
		
		let id=req.params.id;
		let user=req.body;
        user.id=id;
        db.data.map((item,index)=>{
            if(item.id==id){
                db.data[index]=user;
            }
        })
        
        res.status(200).json(user);
		
	});

	//删除一條資料delete
	app.delete('/api/users/:id', function (req, res) {
		
		let id=req.params.id;
        db.data.map((item,index)=>{
            if(item.id==id){
                db.data.splice(index,1);
            }
        })
        
        res.status(200).json({id:id});
		
	});
}
           

(2)傳回主目錄demo cd ../

5 yarn install 或npm(cnpm) install 安裝包

6 yarn start 啟動服務，列印‘App listening at http://:::30001’，即OK了。

此時通路：http://127.0.0.1:30001/api/users 看，資料出來了，postman試一下：

同理，對應增删改查均OK！！！

若要支援跨域通路，可修改index.js如下：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

//跨域通路，允許接受跨域請求
app.all('*', function(req, res, next) {
	res.header("Access-Control-Allow-Origin", "*");
	res.header("Access-Control-Allow-Headers", "*");
	res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
	res.header("X-Powered-By",' 3.2.1')
	res.header("Content-Type", "application/json;charset=utf-8");
	next();
})

require('./mock/user')(app); //user資料
require('./mock/contract')(app); //contract資料
require('./mock/meeting')(app); //meeting資料
require('./mock/invoice')(app); //invoice資料
require('./mock/enterprise')(app); //enterprise資料
require('./mock/fileresource')(app); //fileresource資料
require('./mock/acs_api')(app); //fileresource資料
require('./mock/smartplugs')(app); //smartplugs資料
require('./mock/cipicture')(app); //cipicture資料，裝置外觀
require('./mock/ticketTopo')(app); //ticketTopo資料，事件綁定拓撲
require('./mock/notes')(app); //notes資料，白闆筆記
require('./mock/interfaces')(app); //interfaces資料，主機端口新版
require('./mock/hostProblems')(app); //hostProblems資料，主機監控資訊

var server = app.listen(30001, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});
           

推薦參考：

http://mockjs.com/examples.html

http://www.expressjs.com.cn/