本文已参与「新人创作礼」活动，一起开启掘金创作之路
前言
前端工程师经常会有一个烦恼，就是一个项目啥都写完了奈何没有后端给自己写数据，这时候用前端人的后端语言–node.js写给接口自己用啥烦恼都没有。
简单示例
先用npm init初始化一个项目，然后在该项目里创建app.js文件：
var express = require('express');
const bodyParser = require("body-parser");
var app = express();
// 解析以 application/json 和 application/x-www-form-urlencoded 提交的数据
var jsonParser = bodyParser.json();
var urlencodedParser = bodyParser.urlencoded({
extended: false
});
app.all('*', function(req, res, next) { //设置跨域访问
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
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();
});
var infor = [ //传前端的数据
{
name: 'jay',
age: 20,
sex: '男',
hobby: 'basketball'
},
]
var objA = {
'name': 'a',
'age': '18',
'sex': '男'
}
// get请求
app.get('/api', function(req, res) {
console.log(req.query) // 请求参数
res.status(200),
res.json({
data: infor,
code: 200,
message: "success"
})
})
// post请求
app.post('/api', urlencodedParser, function(req, res) {
if (req.body.name == 'a') {
res.json(objA)
} else {
res.json(infor)
}
});
//配置服务端口
var server = app.listen(3000, function() {
var host = server.address().address;
var port = server.address().port;
console.log('listen at http://%s:%s', host, port)
})
上面用到了express框架和body-parser，所以要install一下，直接在命令行里安装并写入依赖里:
npm install express --save
npm install body-parser --save
运行
把项目运行起来
node app.js
请求
在html文件中发送请求:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<button onclick="sendGet()">发送Get请求</button>
<button onclick="sendPost()">发送Post请求</button>
</body>
<script src="jquery.min.js"></script>
<script>
function sendGet() {
$.ajax({
type: 'get',
url: 'http://localhost:3000/api?id=11',
success: function(data) {
console.log(data)
},
error: function(err) {
console.log(err)
}
})
}
function sendPost() {
$.ajax({
type: 'post',
data:{name:"a"},
url: 'http://localhost:3000/api',
success: function(data) {
console.log(data)
},
error: function(err) {
console.log(err)
}
})
}
</script>
</html>
打开控制台如图：
