• 技术文章 >web前端 >Vue.js

    Vue.js 学习之三:与服务器的数据交互

    coldplay.xixicoldplay.xixi2020-10-14 17:21:58转载61
    Vue.js教程栏目今天介绍Vue.js学习之三的与服务器的数据交互。

    显而易见的,之前的02_toDoList存在着一个很致命的缺陷。那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态。要想解决这个问题,就需要 Web 应用的前端在适当的时间将获得的输入数据存储到后端服务器上,然后在需要时再从服务器上获取这些数据。这部分笔记将记录如何利用 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的文件,其代码如下:

    <!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指令来获取需要用户输入的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 实例与我们之前创建的大同小异,主要由以下四个成员组成:

    通常情况下,我们在 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.getaxios.post这两个最常用方法的基本用法,由于该组件支持返回 Promise 对象,所以我们可以采用then方法调用链来处理响应数据和异常状况。关于 axios 组件更多的使用方法,可以参考相关文档(http://www.axios-js.com/zh-cn/docs/)。

    更多相关免费学习:javascript(视频)

    以上就是Vue.js 学习之三:与服务器的数据交互的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:cnblogs,如有侵犯,请联系a@php.cn删除
    专题推荐:Vue.js
    上一篇:Vue中怎么对事件进行防抖和节流操作? 下一篇:深入了解vue.js中的diff算法
    第13期线上培训班

    相关文章推荐

    • 15个Vue.js高级面试问题• 详解Vue.js中的作用域插槽• Vue.js中使用事件发射器修改组件数据的方法• Vue.js 学习记录之一:学习规划和了解 Vue.js• Vue.js 学习之二:数据驱动开发

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网