使用get请求获取信息
getList(){ this.$http.get('http://localhost:8080/getlist').then((res) => { if(!res.body){ this.message = '信息获取失败' }else{ this.list = res.body.list; } }); }这个方法目前没有被调用，我们希望在页面加载时渲染到页面，根据Vue的生命周期，我们可以使用钩子函数created来调用：
created(){ this.getList(); },完整的文件最后会给出。
显示效果
添加信息信息的添加功能为add函数，同样的，我们需要发送post请求（其他方式也可），将新的数据更新到list.json文件中。
页面提交post请求
add(){ if(this.id.trim() == '' || this.name.trim() == ''){ this.message = "输入不能为空"; return; } //1、读取表单信息,将信息存制list for(var i = 0;i < this.list.length;i++){ if(this.list[i].id === this.id){ this.message = "id不能重复"; return; } } this.list.push({"id": this.id, "name":this.name, "date": new Date().toLocaleDateString()}); //2、将新的list更新到json文件中 this.setList(); } setList(){ var listObj = { list: this.list }; this.$http.post('http://localhost:8080/setlist', {list: listObj}).then(function(result){ if(result && +result.status === 200){ this.message = "更新成功"; }else{ this.message = "更新失败"; this.getList(); } }); }
服务器接收post请求
app.post('/setlist', function(req, res){ var dataStr = JSON.stringify(req.body.list); fs.writeFile('./list.json', dataStr, 'utf8', function(err){ if(err){ res.json({status: 200, message: 'ok'}); }else{ res.json({status: 500, message: 'failed'}); } }); }); 删除信息删除和添加时一样的逻辑。
页面发送请求
deleteItem(id){ for(var i = 0;i < this.list.length;i++){ if(id === this.list[i].id){ this.list.splice(i, 1); i = this.list.length; } } this.setList(); } 一些全局配置 Vue.http.options.root = '/root';//域名 Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk'; Vue.http.options.emulateJSON = true;//服务器无法编码时使用 //如果您的Web服务器无法处理PUT，PATCH和DELETE等REST / HTTP请求，则可以启用emulateHTTP选项。 这将使用实际的HTTP方法设置X-HTTP-Method-Override标头并使用普通的POST请求。 Vue.http.options.emulateHTTP = true; 完整文件
app.js
//加载需要的模块 var express = require('express'); var app = express(); var fs = require('fs'); var path = require('path'); var bodyParser = require('body-parser'); //启动服务器 app.listen(8080, function(){ console.log('server running at 8080'); }); //相关配置 app.use('/views', express.static(path.join(__dirname, './views')));//配置静态资源 app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); //相关请求 app.get('http://www.likecs.com/', (req, res) => { res.redirect(302, '/views/index.html'); }); app.get('/getlist', (req, res) => { fs.readFile('./list.json', 'utf8', (err, data) => { if(err){ res.json(err); }else{ res.json(JSON.parse(data.toString())); } }); }); app.post('/setlist', function(req, res){ var dataStr = JSON.stringify(req.body.list); fs.writeFile('./list.json', dataStr, 'utf8', function(err){ if(err){ res.json({status: 200, message: 'ok'}); }else{ res.json({status: 500, message: 'failed'}); } }); });
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>添加信息</title> <link href="http://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <script src="http://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="http://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <script src="http://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> </head> <body> <div> <div> <div> <h3>{{title}}</h3> </div> </div> <div> <label> Id: <input type="text" v-model="id" required="true" @keyup.enter="add"> </label> <label> Name: <input type="text" v-model="name" required="true" @keyup.enter="add"> </label> <input type="button" @click="add" value="添加"> <label @click="clearMessage"> {{message}} </label> </div> <table> <thead> <tr> <td>Id</td> <td>Name</td> <td>Date</td> <td>Control</td> </tr> </thead> <tbody> <tr v-for="item in list" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td><span title="删除" @click="deleteItem(item.id)"></span></td> </tr> </tbody> </table> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { list : [], id:'', name:'', title: '添加信息', message: '' }, created(){ this.getList(); }, methods: { add(){ if(this.id.trim() == '' || this.name.trim() == ''){ this.message = "输入不能为空"; return; } //1、读取表单信息,将信息存制list for(var i = 0;i < this.list.length;i++){ if(this.list[i].id === this.id){ this.message = "id不能重复"; return; } } this.list.push({"id": this.id, "name":this.name, "date": new Date().toLocaleDateString()}); //2、将新的list更新到json文件中 this.setList(); }, setList(){ var listObj = { list: this.list }; this.$http.post('http://localhost:8080/setlist', {list: listObj}).then(function(result){ if(result && +result.status === 200){ this.message = "更新成功"; }else{ this.message = "更新失败"; this.getList(); } }); }, clearMessage(){ this.message = ''; }, deleteItem(id){ for(var i = 0;i < this.list.length;i++){ if(id === this.list[i].id){ this.list.splice(i, 1); i = this.list.length; } } this.setList(); }, getList(){ this.$http.get('http://localhost:8080/getlist').then((res) => { if(!res.body){ this.message = '信息获取失败' }else{ this.list = res.body.list; } }); } } }); </script> </body> </html> 3、axios的使用axios的使用同vue-resource基本一致。我们使用axios重写上面获取信息列表的方法就一目了然了：
导入库文件
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
重写getList
getList(){ axios.get('http://localhost:8080/getlist').then((res) => { if(!res.data){ this.message = '信息获取失败' }else{ this.list = res.data.list; } }); }可以发现，this.$http.get() 变成了 axios.get()，而response返回的数据存在data中而不是body中。
更多细节请参考：axios
二、过滤和动画 1、css3过渡和动画简介 过渡