1.目录结构
2.learnVue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learnVue</title>
</head>
<body>
<div id="app">
<div>输入的值：{{ name }}</div>
<div><input v-model="name"></div>
<div><button v-on:click="submitInfo">提交</button></div>
<div>返回的值：{{ result }}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>
<script src="js/learnVue.js"></script>
</body>
</html>3.learnVue.js
var app = new Vue({
el: '#app',
data: {
name:'xu',
result:'',
apiUrl: 'http://127.0.0.1:8889/POST/submitInfo'
},
methods: {
submitInfo: function () {
var vm = this;
var data = {};
var name = vm.name;
data.name = name;
data = JSON.stringify(data);
vm.$http.post(vm.apiUrl, data)
.then((response) => {
vm.result = response.body;
});
}
}
})4.learnVue.js(nodejs)
exports.learnVue = (function () {
var learnVue = {
submitInfo: function (app) {
app.post('/POST/submitInfo', function (req, res) {
console.log('name:' + req.body.name);
res.send(req.body.name);
});
}
};
return learnVue;
}());5.运行结果
