版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_15253407/article/details/78111318
1.安装express服务端框架(前提当前电脑已经安装nodejs)
// 参考地址 http://www.expressjs.com.cn
1.1 通过npm 创建package.json文件
1.2 安装 npm install express --save
1.3 创建app.js 进行配置文件创建
const express = require('express');
const getIPAdress = require('./Utils/getIPAdress.js')(); // 自定义模块用来回去本机的ip地址
const app = express();
app.all('/api/*', function(req, res, next) { // 允许客户端进行跨域访问
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
const test = require('./detail/comment.js'); // 获取mock 数据源
app.get('/api/:star', function(req, res) {
res.send(test.data.filter(item => {
return item.star === parseInt(req.params['star']); // ES6 写法进行 客户端传入id进行匹配
}));
});
app.get('*', function(req, res) { // 不满足url进行重定向
res.redirect('/api');
});
const server = app.listen(3000, function() { // 监听服务端口 输出配置信息
const host = server.address().address;
const port = server.address().port;
console.log('Mork Server address http:'+getIPAdress+':'+ port+'/api');
});
1.4 JSON数据源配置
module.exports = {
img: 'http://images2015.cnblogs.com/blog/138012/201610/138012-20161016201645858-1342445625.png',
title: '天下第一锅',
star: 4,
price: '88',
subTitle: '重庆 & 四川 麻辣火锅',
desc: '营业时间 11:00 - 21:00 <br> 电话订购 11:00 - 19:00 <br> 网络订购 11:00 - 19:00'
}
1.5 package.json 文件
{
"name": "mock",
"version": "1.0.0",
"description": "mock data for Server",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"Server":"supervisor app.js"
},
"author": "zyn",
"license": "ISC",
"dependencies": {
"express": "^4.15.5"
}
}
1.6 安装 supervisor
npm install -g supervisor // 全局安装当修改文件之后可以自动加载不需要抽动重启
1.7运行方式
npm run Server
2.客户端访问方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
url: 'http://192.168.199.182:3000/api/4',
type: "GET",
async: false,
success: function(data) {
console.log(data);
}
});
})
</script>
</body>
</html>