前端代码：
<!DOCTYPE html>
<html>
<head>
<title>2333</title>
<script type="text/javascript" src='js/vue.js'></script>
<script type="text/javascript" src='js/axios.js'></script>
<script type="text/javascript">
window.onload = function(){
new Vue({
el:'#my',
data:{
name:'abc',
lists:[],
items:[],
obj:{
type:1,
name:2
}
},
methods:{
get:function(){
axios({
methods:'get',
url:'http://localhost:3333/list'
}).then(res=>{
console.log(res);
this.lists = res.data.result
}).catch(error=>{
console.log(error)
})
},
get2:function(){
axios.get('http://localhost:3333/list',{params:this.obj}
).then(res=>{
console.log(res);
this.lists = res.data.result
}).catch(error=>{
console.log(error)
})
},
sendPost:function(){
axios({
methods:'post',
url:'http://localhost:3333/list_add',
data:this.obj
}).then(res=>{
console.log(res);
this.items = res.data.result
}).catch(error=>{
console.log(error)
})
},
sendPost2:function(){
axios.post('http://localhost:3333/list_add',this.obj
).then(res=>{
console.log(res);
this.items = res.data.result
}).catch(error=>{
console.log(error)
})
},
}
})
}
</script>
<body>
<div id="my">
<button @click="get2">发送</button>
<ul>
<li v-for="list in lists">{{list.name}}</li>
</ul>
<input type="text" v-model="obj.type"/>
<input type="text" v-model="obj.name"/>
<button @click="sendPost2()">添加</button>
<ul>
<li v-for="item in items">{{item.type}}=={{item.name}}</li>
</ul>
</div>
</body>
</head>
</html>
get和get2，以及sendPost和sendPost2的区别就是axios请求的写法不同。
点击发送按钮，通过get请求获取数据，并在页面上显示。
点击添加按钮，使用post请求把obj交给后端处理。
后端node代码：
/**
Simple Server for web api test.
*/
/**Connect是一个node中间件（middleware）框架。
如果把一个http处理过程比作是污水处理，中间件就像是一层层的过滤网。
每个中间件在http处理过程中通过改写request或（和）response的数据、状态，实现了特定的功能。
中间件就是类似于一个过滤器的东西，在客户端和应用程序之间的一个处理请求和响应的的方法。*/
var connect = require('connect'); //创建连接
var bodyParser = require('body-parser'); //body解析
var arr = [];
var app = connect()
.use(bodyParser.json()) //JSON解析
.use(bodyParser.urlencoded({extended: true}))
//use()方法还有一个可选的路径字符串，对传入请求的URL的开始匹配。
//use方法来维护一个中间件队列
.use(function (req, res, next) {
//跨域处理
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*'); //允许任何源
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); //允许任何方法
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token'); //允许任何类型
res.writeHead(200, {"Content-Type": "text/plain;charset=utf-8"}); //utf-8转码
next(); //next 方法就是一个递归调用
})
.use('/list', function(req, res, next) {
var data={
"code": "200",
"msg": "success",
"result": [{name:'手机1',state:'未采购'},
{name:'手机2',state:'未采购'},
{name:'手机3',state:'已采购'},
{name:'手机4',state:'未采购'}]
}
res.end(JSON.stringify(data));
next(); //
})
.use('/list_add', function(req, res, next) {
console.log(req.method)
if(req.method=='POST') {
console.log(req.body.name);
//console.log(req.originalUrl, req.url);
arr.push({type:req.body.type,name:req.body.name});
var data = {"code":200,"msg":"success",result:arr};
res.end(JSON.stringify(data));
} else {
res.end(JSON.stringify({}));
}
next();
})
.listen(3333);
console.log('Server started on port 3333.');
后端收到了前端发来的obj，使用req对象读取，并且将数据存到arr中，再次返回给前端。
网友评论