Vue.js Learning 3 : Interaction des données avec le serveur-Voir.js-php.cn

La colonne

Tutoriel Vue.js présente aujourd'hui la troisième partie de l'apprentissage de Vue.js, l'interaction des données avec le serveur.

Vue.js Learning 3 : Interaction des données avec le serveur

Évidemment, le précédent 02_toDoList présentait un défaut fatal. Autrement dit, ses données n'existent que du côté du navigateur. Une fois que l'utilisateur ferme ou recharge la page, toutes les données qu'il a précédemment ajoutées au programme seront perdues et tout reviendra à l'état initial du programme. Pour résoudre ce problème, le front-end de l'application Web doit stocker les données d'entrée obtenues sur le serveur back-end au moment approprié, puis récupérer les données du serveur si nécessaire. Cette partie des notes expliquera comment utiliser le framework Vue.js pour compléter l'interaction entre le front-end et le back-end d'une application Web. Cette fois, je vais également créer une application « livre d'or » pour parcourir l'ensemble du processus d'apprentissage.

Tout d'abord, vous devez exécuter les commandes code et npm install express body-parser knex dans le répertoire npm install sqlite3@<指定的版本> afin d'installer les composants back-end nécessaires à la création du service Web (à noter que le sqlite3 installé ici doit sélectionner la version correspondante selon les invites après knex installation). Ensuite, créez un répertoire nommé code sous le répertoire 03_Message et exécutez la commande npm init -y dans ce répertoire pour l'initialiser dans un projet Node.js. Ici, la raison pour laquelle les composants requis par le serveur sont installés dans le répertoire de niveau supérieur du répertoire du projet est que je dois également installer les composants frontaux dans le répertoire du projet et les ouvrir au navigateur pour y accéder, donc avant et après Il est préférable de stocker séparément les composants requis pour le terminal.

Maintenant, je vais créer un service web basé sur le framework Express. La méthode spécifique consiste à créer un fichier de script côté serveur nommé code/03_Message dans le répertoire index.js et à y saisir le code suivant :

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

Copier après la connexion

En raison des caractéristiques du framework Vue.js, le le front-end doit être fourni par le back-end. En plus d'obtenir les fichiers HTML et JavaScript spécifiés, le service effectue principalement des opérations d'ajout, de suppression, de modification et de requête sur la base de données. Par conséquent, dans le service ci-dessus, en plus de l'ouverture. les répertoires public et node_modules dans leur ensemble au navigateur. Il fournit principalement un service de requête de données basé sur une requête GET, et deux opérations d'ajout et de suppression de données basées sur une requête POST.

Ensuite, je peux commencer à construire la partie front-end. Tout d'abord, vous devez exécuter la commande code/03_Message dans le répertoire npm install vue axios pour installer les composants frontaux à utiliser ensuite (cette commande générera automatiquement un répertoire node_modules. Comme mentionné ci-dessus, ce répertoire sera ouvert pour le script du serveur dans son ensemble). Ensuite, continuez à créer le répertoire public dans le même répertoire, et créez-y un fichier nommé index.htm Le code est le suivant :

<!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>

Copier après la connexion

Cette page est principalement divisée en deux parties. part utilisera la directive notes pour afficher de manière itérative les messages qui ont été ajoutés à la base de données en fonction des données de v-for, et fournira un bouton 删除 pour supprimer le message spécifié (utilisez la directive v-on pour lier le gestionnaire d'événements de clic). La deuxième partie est une interface de saisie pour 添加留言, où la commande v-model est utilisée pour obtenir les données userName et Message qui doivent être saisies par l'utilisateur. Maintenant, je dois créer l'instance d'objet Vue correspondante. Pour ce faire, je vais créer un autre répertoire public sous le répertoire js que je viens de créer et y créer un fichier de script frontal personnalisé nommé main.js. , le code est le suivant :

// 程序名称： 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);
                });
            }
        }
    }
});

Copier après la connexion

Cette instance Vue est similaire à celle que nous avons créée précédemment, composée principalement des quatre membres suivants :

elMembre : utilisé pour utiliser les sélecteurs CSS pour spécifier le conteneur d'éléments correspondant à l'instance Vue. Ici, je précise l'élément <p id="app">.
data membre : utilisé pour définir les données liées dans la page. Les trois variables de données suivantes sont définies ici :
- notes : Ceci. Est une variable de tableau utilisée pour stocker les enregistrements de messages qui ont été ajoutés.
- userName : Il s'agit d'une variable de chaîne utilisée pour obtenir les données "nom d'utilisateur".
- Message : Il s'agit d'une variable de chaîne utilisée pour obtenir des données "message".
created membre : utilisé pour l'initialisation lorsque le programme est chargé. Ici, je lis l'enregistrement du message ajouté depuis le serveur et l'ajoute. Il est chargé dans le notes. variable.
methods membres : utilisés pour définir les fonctions de gestion d'événements liées dans la page. Les deux fonctions de gestion d'événements suivantes sont définies ici :
- 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>

Copier après la connexion

需要注意的是，该引用标签在 HTML 页面中的位置必须要在自定义 JavaScript 脚本文件（即main.js）的引用标签之前。当然，我在上述代码中只展示了axios.get和axios.post这两个最常用方法的基本用法，由于该组件支持返回 Promise 对象，所以我们可以采用then方法调用链来处理响应数据和异常状况。关于 axios 组件更多的使用方法，可以参考相关文档（http://www.axios-js.com/zh-cn/docs/）。