vue.js教程栏目今天介绍vue.js学习之三的与服务器的数据交互。
显而易见的，之前的02_todolist存在着一个很致命的缺陷。那就是它的数据只存在于浏览器端，一但用户关闭或重新载入页面，他之前加入到程序中的数据就会全部丢失，一切又恢复到程序的初始状态。要想解决这个问题，就需要 web 应用的前端在适当的时间将获得的输入数据存储到后端服务器上，然后在需要时再从服务器上获取这些数据。这部分笔记将记录如何利用 vue.js 框架来完成 web 应用程序的前端与后端之间的交互。这一次，我同样会通过构建一个留言本应用来贯穿整个学习过程。
首先需要在code目录下依次执行npm install express body-parser knex和npm install sqlite3@<指定的版本>命令，安装接下来创建 web 服务所需要的后端组件（需要注意的是，这里安装的sqlite3要根据knex安装后的提示选择对应的版本）。接下来，在code目录下创建一个名为03_message的目录，并在该目录下执行npm init -y命令，将其初始化成一个 node.js 项目。在这里，之所以将服务端所需要的组件安装在项目目录的上一级目录中，是因为我接下来还需要在项目目录中安装前端组件，并将其开放给浏览器端访问，所以前后端所需要的组件最好分开存放。
现在，我要基于 express 框架来创建一个 web 服务了。具体做法就是在code/03_message目录下创建一个名为index.js的服务器端脚本文件，并在其中输入如下代码：
const path = require('path');const express = require('express')const bodyparser = require('body-parser');const knex = require('knex');const port = 8080;// 创建服务器实例const app = express();// 配置 public 目录，将其开放给浏览器端app.use('/', express.static(path.join(__dirname, 'public')));// 配置 node_modules 目录，将其开放给浏览器端app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));//配置 body-parser 中间件，以便获取 post 请求数据。app.use(bodyparser.urlencoded({ extended : false}));app.use(bodyparser.json());// 创建数据库连接对象：const appdb = knex({ client: 'sqlite3', // 设置要连接的数据类型 connection: { // 设置数据库的链接参数 filename: path.join(__dirname, 'data/database.sqlite') }, debug: true, // 设置是否开启 debug 模式，true 表示开启 pool: { // 设置数据库连接池的大小，默认为{min: 2, max: 10} min: 2, max: 7 }, usenullasdefault: true});appdb.schema.hastable('notes') // 查看数据库中是否已经存在 notes 表.then(function(exists) { if(exists == false) { // 如果 notes 表不存在就创建它 appdb.schema.createtable('notes', function(table) { // 创建 notes 表： table.increments('uid').primary();// 将 uid 设置为自动增长的字段，并将其设为主键。 table.string('username'); // 将 username 设置为字符串类型的字段。 table.string('notemessage'); // 将 notes 设置为字符串类型的字段。 }); }}).then(function() { // 请求路由 // 设置网站首页 app.get('/', function(req, res) { res.redirect('/index.htm'); }); // 响应前端获取数据的 get 请求 app.get('/data/get', function(req, res) { appdb('notes').select('*') .then(function(data) { console.log(data); res.status(200).send(data); }).catch(function() { res.status(404).send('找不到相关数据'); }); }); // 响应前端删除数据的 post 请求 app.post('/data/delete', function(req, res) { appdb('notes').delete() .where('uid', '=', req.body['uid']) .catch(function() { res.status(404).send('删除数据失败'); }); res.send(200); }); // 响应前端添加数据的 post 请求 app.post('/data/add', function(req, res) { console.log('post data'); appdb('notes').insert( { username : req.body['username'], notemessage : req.body['notemessage'] } ).catch(function() { res.status(404).send('添加数据失败'); }); res.send(200); }); // 监听 8080 端口 app.listen(port, function(){ console.log(`访问 http://localhost:${port}/，按 ctrl+c 终止服务！`); });}).catch(function() { // 断开数据库连接，并销毁 appdb 对象 appdb.destroy();});
由于 vue.js 框架的特点，前端需要后端提供的服务除了获取指定的 html 和 javascript 文件之外，主要就是对数据库的增删改查操作了，所以在上面这个服务中，除了将public、node_modules目录整体开放给浏览器端访问之外，主要提供了一个基于 get 请求的数据查询服务，和两个基于 post 请求的数据添加与删除操作。
接下来，我可以开始前端部分的构建了。首先需要在code/03_message目录下执行npm install vue axios命令，安装接下来所要用到的前端组件（该命令会自动生成一个node_modules目录，正如上面所说，该目录会被服务端脚本整体开放给浏览器端）。然后，继续在同一目录下创建public目录，并在其中创建一个名为index.htm的文件，其代码如下：
<!doctype html><html lang="zh-cn"><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"> <script defer="defer" src="/node_modules/vue/dist/vue.js"></script> <script defer="defer" src="/node_modules/axios/dist/axios.js"></script> <script defer="defer" src="/js/main.js"></script> <title>留言本</title></head><body> <p id="app"> <h1>留言本</h1> <p id="shownote" v-for="note in notes"> <span>{{ note.username }} 说：{{ note.notemessage }} </span> <input type="button" value="删除" @click="remove(note.uid)"> </p> <p id="addmessage"> <h2>请留言：</h2> <label :for="username">用户名：</label> <input type="text" v-model="username"> <br> <label :for="message">写留言：</label> <input type="text" v-model="message"></input> <input type="button" value="添加留言" @click="addnew"> </p> </p></body></html>
这个页面主要被分为了两个部分，第一部分会根据notes中的数据使用v-for指令迭代显示已被添加到数据库中的留言，并提供了一个删除按钮以便删除指定的留言（使用v-on指令绑定单击事件处理函数）。第二部分则是一个用于添加留言的输入界面，这里使用了v-model指令来获取需要用户输入的username和message数据。现在，我需要来创建相应的 vue 对象实例了，为此，我会在刚才创建的public目录下再创建一个js目录，并在其中创建名为main.js的自定义前端脚本文件，其代码如下：
// 程序名称： message// 实现目标：// 1. 学习 axios 库的使用// 2. 掌握如何与服务器进行数据交互const app = new vue({ el: '#app', data:{ username: '', message: '', notes: [] }, created: function() { that = this; axios.get('/data/get') .then(function(res) { that.notes = res.data; }) .catch(function(err) { console.error(err); }); }, methods:{ addnew: function() { if(this.username !== '' && this.message !== '') { that = this; axios.post('/data/add', { username: that.username, notemessage: that.message }).catch(function(err) { console.error(err); }); this.message = ''; this.username = ''; axios.get('/data/get') .then(function(res) { that.notes = res.data; }) .catch(function(err) { console.error(err); }); } }, remove: function(id) { if(uid > 0) { that = this; axios.post('/data/delete', { uid : id }).catch(function(err) { console.error(err); }); axios.get('/data/get') .then(function(res) { that.notes = res.data; }) .catch(function(err) { console.error(err); }); } } }});
这个 vue 实例与我们之前创建的大同小异，主要由以下四个成员组成：
el成员：用于以 css 选择器的方式指定 vue 实例所对应的元素容器，在这里，我指定的是<p id="app">元素。
data成员：用于设置页面中绑定的数据，这里设置了以下三个数据变量：
notes：这是一个数组变量，用于存放已被添加的留言记录。username：这是一个字符串变量，用于获取用户名数据。message：这是一个字符串变量，用于获取留言数据。created成员：用于在程序载入时做初始化操作，在这里，我从服务端读取了已被添加的留言记录，并将其加载到notes变量中。
methods成员：用于定义页面中绑定的事件处理函数，这里定义了以下两个事件处理函数：
addnew：用于添加新的留言记录，并同步更新notes中的数据。remove：用于删除指定的留言记录，并同步更新notes中的数据。通常情况下，我们在 vue.js 框架中会选择使用 axios 这样的第三方组件来处理发送请求和接收响应数据的工作，引入该组件的方式与引入 vue.js 框架的方式是一样的，可以像上面一样先下载到本地，然后使用<script>标签引入，也可以使用 cdn 的方式直接使用<script>标签引入，像这样：
<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://unpkg.com/axios/dist/axios.js"></script><!-- 或者 --><!-- 生产环境版本，优化了文件大小和载入速度 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
需要注意的是，该引用标签在 html 页面中的位置必须要在自定义 javascript 脚本文件（即main.js）的引用标签之前。当然，我在上述代码中只展示了axios.get和axios.post这两个最常用方法的基本用法，由于该组件支持返回 promise 对象，所以我们可以采用then方法调用链来处理响应数据和异常状况。关于 axios 组件更多的使用方法，可以参考相关文档（http://www.axios-js.com/zh-cn/docs/）。
更多相关免费学习：javascript（视频）
以上就是vue.js 学习之三：与服务器的数据交互的详细内容。