這篇文章給大家分享的是有關(guān)如何利用Vue.js框架來(lái)完成Web應(yīng)用程序前端與后端之間的交互的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、網(wǎng)絡(luò)空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、瀘水網(wǎng)站維護(hù)、網(wǎng)站推廣。

如何利用 Vue.js 框架來(lái)完成 Web 應(yīng)用程序的前端與后端之間的交互。這一次，我同樣會(huì)通過(guò)構(gòu)建一個(gè)"留言本"應(yīng)用來(lái)貫穿整個(gè)學(xué)習(xí)過(guò)程。

首先需要在code目錄下依次執(zhí)行npm install express body-parser knex和npm install sqlite3@<指定的版本>命令，安裝接下來(lái)創(chuàng)建 Web 服務(wù)所需要的后端組件（需要注意的是，這里安裝的sqlite3要根據(jù)knex安裝后的提示選擇對(duì)應(yīng)的版本）。接下來(lái)，在code目錄下創(chuàng)建一個(gè)名為03_Message的目錄，并在該目錄下執(zhí)行npm init -y命令，將其初始化成一個(gè) Node.js 項(xiàng)目。在這里，之所以將服務(wù)端所需要的組件安裝在項(xiàng)目目錄的上一級(jí)目錄中，是因?yàn)槲医酉聛?lái)還需要在項(xiàng)目目錄中安裝前端組件，并將其開(kāi)放給瀏覽器端訪問(wèn)，所以前后端所需要的組件好分開(kāi)存放。

現(xiàn)在，我要基于 Express 框架來(lái)創(chuàng)建一個(gè) Web 服務(wù)了。具體做法就是在code/03_Message目錄下創(chuàng)建一個(gè)名為index.js的服務(wù)器端腳本文件，并在其中輸入如下代碼：

const path = require('path');
const express = require('express')
const bodyParser = require('body-parser');
const knex = require('knex');
const port = 8080;

// 創(chuàng)建服務(wù)器實(shí)例
const app = express();

// 配置 public 目錄，將其開(kāi)放給瀏覽器端
app.use('/', express.static(path.join(__dirname, 'public')));
// 配置 node_modules 目錄，將其開(kāi)放給瀏覽器端
app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));

//配置 body-parser 中間件，以便獲取 POST 請(qǐng)求數(shù)據(jù)。
app.use(bodyParser.urlencoded({ extended : false}));
app.use(bodyParser.json());

// 創(chuàng)建數(shù)據(jù)庫(kù)連接對(duì)象：
const appDB = knex({
    client: 'sqlite3', // 設(shè)置要連接的數(shù)據(jù)類(lèi)型
    connection: {      // 設(shè)置數(shù)據(jù)庫(kù)的鏈接參數(shù)
        filename: path.join(__dirname, 'data/database.sqlite')
    },
    debug: true,       // 設(shè)置是否開(kāi)啟 debug 模式，true 表示開(kāi)啟
    pool: {            // 設(shè)置數(shù)據(jù)庫(kù)連接池的大小，默認(rèn)為{min: 2, max: 10}
        min: 2,
        max: 7
    },
    useNullAsDefault: true
});

appDB.schema.hasTable('notes')  // 查看數(shù)據(jù)庫(kù)中是否已經(jīng)存在 notes 表
.then(function(exists) {
    if(exists == false) { // 如果 notes 表不存在就創(chuàng)建它
        appDB.schema.createTable('notes', function(table) {
            // 創(chuàng)建 notes 表：
            table.increments('uid').primary();// 將 uid 設(shè)置為自動(dòng)增長(zhǎng)的字段，并將其設(shè)為主鍵。
            table.string('userName');         // 將 userName 設(shè)置為字符串類(lèi)型的字段。
            table.string('noteMessage');      // 將 notes 設(shè)置為字符串類(lèi)型的字段。
    });
  }
})
.then(function() {
    // 請(qǐng)求路由
    // 設(shè)置網(wǎng)站首頁(yè)
    app.get('/', function(req, res) {
        res.redirect('/index.htm');
    });

    // 響應(yīng)前端獲取數(shù)據(jù)的 GET 請(qǐng)求
    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('找不到相關(guān)數(shù)據(jù)');
        });
    });

    // 響應(yīng)前端刪除數(shù)據(jù)的 POST 請(qǐng)求
    app.post('/data/delete', function(req, res) {
        appDB('notes').delete()
        .where('uid', '=', req.body['uid'])
        .catch(function() {
            res.status(404).send('刪除數(shù)據(jù)失敗');
        });
        res.send(200);
    });

    // 響應(yīng)前端添加數(shù)據(jù)的 POST 請(qǐng)求
    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('添加數(shù)據(jù)失敗');
        });
        res.send(200);
    });

    // 監(jiān)聽(tīng) 8080 端口
    app.listen(port, function(){
        console.log(`訪問(wèn) http://localhost:${port}/，按 Ctrl+C 終止服務(wù)！`);
    });
})
.catch(function() {
    // 斷開(kāi)數(shù)據(jù)庫(kù)連接，并銷(xiāo)毀 appDB 對(duì)象
    appDB.destroy();
});

由于 Vue.js 框架的特點(diǎn)，前端需要后端提供的服務(wù)除了獲取指定的 HTML 和 JavaScript 文件之外，主要就是對(duì)數(shù)據(jù)庫(kù)的增刪改查操作了，所以在上面這個(gè)服務(wù)中，除了將public、node_modules目錄整體開(kāi)放給瀏覽器端訪問(wèn)之外，主要提供了一個(gè)基于 GET 請(qǐng)求的數(shù)據(jù)查詢(xún)服務(wù)，和兩個(gè)基于 POST 請(qǐng)求的數(shù)據(jù)添加與刪除操作。

接下來(lái)，我可以開(kāi)始前端部分的構(gòu)建了。首先需要在code/03_Message目錄下執(zhí)行npm install vue axios命令，安裝接下來(lái)所要用到的前端組件（該命令會(huì)自動(dòng)生成一個(gè)node_modules目錄，正如上面所說(shuō)，該目錄會(huì)被服務(wù)端腳本整體開(kāi)放給瀏覽器端）。然后，繼續(xù)在同一目錄下創(chuàng)建public目錄，并在其中創(chuàng)建一個(gè)名為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">
        <h2>留言本</h2>
        <p id="showNote" v-for="note in notes">
            <span>{{ note.userName }} 說(shuō)：{{ note.noteMessage }} </span>
            <input type="button" value="刪除" @click="remove(note.uid)">
        </p>
        <p id="addMessage">
            <h3>請(qǐng)留言：</h3>
            <label :for="userName">用戶名：</label>
            <input type="text" v-model="userName">
            <br>
            <label :for="Message">寫(xiě)留言：</label>
            <input type="text" v-model="Message"></input>
            <input type="button" value="添加留言" @click="addNew">
        </p>
    </p>
</body>
</html>

這個(gè)頁(yè)面主要被分為了兩個(gè)部分，第一部分會(huì)根據(jù)notes中的數(shù)據(jù)使用v-for指令迭代顯示已被添加到數(shù)據(jù)庫(kù)中的留言，并提供了一個(gè)刪除按鈕以便刪除指定的留言（使用v-on指令綁定單擊事件處理函數(shù)）。第二部分則是一個(gè)用于添加留言的輸入界面，這里使用了v-model指令來(lái)獲取需要用戶輸入的userName和Message數(shù)據(jù)。現(xiàn)在，我需要來(lái)創(chuàng)建相應(yīng)的 Vue 對(duì)象實(shí)例了，為此，我會(huì)在剛才創(chuàng)建的public目錄下再創(chuàng)建一個(gè)js目錄，并在其中創(chuàng)建名為main.js的自定義前端腳本文件，其代碼如下：

// 程序名稱(chēng)： Message
// 實(shí)現(xiàn)目標(biāo)：
//   1. 學(xué)習(xí) axios 庫(kù)的使用
//   2. 掌握如何與服務(wù)器進(jìn)行數(shù)據(jù)交互

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);
                });
            }
        }
    }
});

這個(gè) Vue 實(shí)例與我們之前創(chuàng)建的大同小異，主要由以下四個(gè)成員組成：

• el成員：用于以 CSS 選擇器的方式指定 Vue 實(shí)例所對(duì)應(yīng)的元素容器，在這里，我指定的是<p id="app">元素。

• data成員：用于設(shè)置頁(yè)面中綁定的數(shù)據(jù)，這里設(shè)置了以下三個(gè)數(shù)據(jù)變量：

• notes：這是一個(gè)數(shù)組變量，用于存放已被添加的留言記錄。

• userName：這是一個(gè)字符串變量，用于獲取"用戶名"數(shù)據(jù)。

• Message：這是一個(gè)字符串變量，用于獲取"留言"數(shù)據(jù)。

• created成員：用于在程序載入時(shí)做初始化操作，在這里，我從服務(wù)端讀取了已被添加的留言記錄，并將其加載到notes變量中。

• methods成員：用于定義頁(yè)面中綁定的事件處理函數(shù)，這里定義了以下兩個(gè)事件處理函數(shù)：

• addNew：用于添加新的留言記錄，并同步更新notes中的數(shù)據(jù)。

• remove：用于刪除指定的留言記錄，并同步更新notes中的數(shù)據(jù)。

通常情況下，我們?cè)?Vue.js 框架中會(huì)選擇使用 axios 這樣的第三方組件來(lái)處理發(fā)送請(qǐng)求和接收響應(yīng)數(shù)據(jù)的工作，引入該組件的方式與引入 Vue.js 框架的方式是一樣的，可以像上面一樣先下載到本地，然后使用<script>標(biāo)簽引入，也可以使用 CDN 的方式直接使用<script>標(biāo)簽引入，像這樣：

<!-- 開(kāi)發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<!-- 或者 -->
<!-- 生產(chǎn)環(huán)境版本，優(yōu)化了文件大小和載入速度 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

需要注意的是，該引用標(biāo)簽在 HTML 頁(yè)面中的位置必須要在自定義 JavaScript 腳本文件（即main.js）的引用標(biāo)簽之前。當(dāng)然，我在上述代碼中只展示了axios.get和axios.post這兩個(gè)最常用方法的基本用法，由于該組件支持返回 Promise 對(duì)象，所以我們可以采用then方法調(diào)用鏈來(lái)處理響應(yīng)數(shù)據(jù)和異常狀況。

感謝各位的閱讀！關(guān)于“如何利用Vue.js框架來(lái)完成Web應(yīng)用程序前端與后端之間的交互”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)名稱(chēng)：?如何利用Vue.js框架來(lái)完成Web應(yīng)用程序前端與后端之間的交互-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://vcdvsql.cn/article22/csedjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、域名注冊(cè)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)