​如何利用Vue.js框架来完成Web应用程序前端与后端之间的交互

这篇文章给大家分享的是有关如何利用Vue.js框架来完成Web应用程序前端与后端之间的交互的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

成都创新互联公司是专业的中江网站建设公司,中江接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行中江网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

如何利用 Vue.js 框架来完成 Web 应用程序的前端与后端之间的交互。这一次,我同样会通过构建一个"留言本"应用来贯穿整个学习过程。

首先需要在code目录下依次执行npm install express body-parser knexnpm 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 文件之外,主要就是对数据库的增删改查操作了,所以在上面这个服务中,除了将publicnode_modules目录整体开放给浏览器端访问之外,主要提供了一个基于 GET 请求的数据查询服务,和两个基于 POST 请求的数据添加与删除操作。

接下来,我可以开始前端部分的构建了。首先需要在code/03_Message目录下执行npm install vue axios命令,安装接下来所要用到的前端组件(该命令会自动生成一个node_modules目录,正如上面所说,该目录会被服务端脚本整体开放给浏览器端)。然后,继续在同一目录下创建public目录,并在其中创建一个名为index.htm的文件,其代码如下:




    
    
    
    
    
    
    留言本


    
        

留言本

                     {{ note.userName }} 说:{{ note.noteMessage }}                       

                     

请留言:

            用户名:                          
            写留言:                                   

    

这个页面主要被分为了两个部分,第一部分会根据notes中的数据使用v-for指令迭代显示已被添加到数据库中的留言,并提供了一个删除按钮以便删除指定的留言(使用v-on指令绑定单击事件处理函数)。第二部分则是一个用于添加留言的输入界面,这里使用了v-model指令来获取需要用户输入的userNameMessage数据。现在,我需要来创建相应的 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 实例所对应的元素容器,在这里,我指定的是

    元素。

  • data成员:用于设置页面中绑定的数据,这里设置了以下三个数据变量:

    • notes:这是一个数组变量,用于存放已被添加的留言记录。

    • userName:这是一个字符串变量,用于获取"用户名"数据。

    • Message:这是一个字符串变量,用于获取"留言"数据。

  • created成员:用于在程序载入时做初始化操作,在这里,我从服务端读取了已被添加的留言记录,并将其加载到notes变量中。

  • methods成员:用于定义页面中绑定的事件处理函数,这里定义了以下两个事件处理函数:

    • addNew:用于添加新的留言记录,并同步更新notes中的数据。

    • remove:用于删除指定的留言记录,并同步更新notes中的数据。

通常情况下,我们在 Vue.js 框架中会选择使用 axios 这样的第三方组件来处理发送请求和接收响应数据的工作,引入该组件的方式与引入 Vue.js 框架的方式是一样的,可以像上面一样先下载到本地,然后使用

需要注意的是,该引用标签在 HTML 页面中的位置必须要在自定义 JavaScript 脚本文件(即main.js)的引用标签之前。当然,我在上述代码中只展示了axios.getaxios.post这两个最常用方法的基本用法,由于该组件支持返回 Promise 对象,所以我们可以采用then方法调用链来处理响应数据和异常状况。

感谢各位的阅读!关于“如何利用Vue.js框架来完成Web应用程序前端与后端之间的交互”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


标题名称:​如何利用Vue.js框架来完成Web应用程序前端与后端之间的交互
分享地址:http://myzitong.com/article/gsjcsg.html