Vue.js 學習之三：與伺服器的資料交互-Vue.js-PHP中文網

Vue.js教學欄位今天介紹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 學習之三：與伺服器的資料交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！