Vue.js 学習 3: サーバーとのデータ対話

Vue.js チュートリアル コラムでは、今日の Vue.js 学習の 3 番目の部分であるサーバーとのデータ対話を紹介します。

明らかに、以前の 02_toDoList には致命的な欠陥があります。つまり、そのデータはブラウザ側にのみ存在し、ユーザーがページを閉じるかリロードすると、以前にプログラムに追加したデータはすべて失われ、すべてがプログラムの初期状態に戻ります。この問題を解決するには、Web アプリケーションのフロントエンドがバックエンド サーバーで取得した入力データを適切なタイミングで保存し、必要に応じてサーバーからデータを取得する必要があります。メモのこの部分では、Vue.js フレームワークを使用して Web アプリケーションのフロントエンドとバックエンド間の対話を完了する方法を記録します。今回は、学習プロセス全体を実行する「ゲストブック」アプリケーションも構築します。

まず、code ディレクトリで npm install Express body-parser knex と npm install sqlite3@<specified version>## を実行する必要があります。 #Command で、Web サービスの作成に必要なバックエンド コンポーネントをインストールします (ここでインストールされる sqlite3 は、knex のインストール後のプロンプトに従って、対応するバージョンを選択する必要があることに注意してください) ）。次に、code ディレクトリに 03_Message という名前のディレクトリを作成し、このディレクトリで npm init -y コマンドを実行して、Node.js プロジェクトに初期化します。 。ここで、サーバーに必要なコンポーネントをプロジェクトディレクトリの上位ディレクトリにインストールしているのは、フロントエンドコンポーネントもプロジェクトディレクトリにインストールし、ブラウザで開いてアクセスする必要があるためです。端末に必要なコンポーネントは個別に保管するのが最適です。

今度は、Express フレームワークに基づいて Web サービスを作成します。具体的な方法は、

code/03_Message ディレクトリに index.js という名前のサーバー側スクリプト ファイルを作成し、その中に次のコードを入力します。 Vue による .js フレームワークの特性 フロントエンドは、指定された HTML および JavaScript ファイルの取得に加えて、バックエンドによって提供されるサービスを必要とします。したがって、上記のサービスでは、public

、

node_modules に加えて、ディレクトリ全体がブラウザ アクセスに開かれていることに加えて、主に GET リクエストに基づくデータ クエリ サービスを提供します。 、および POST リクエストに基づく 2 つのデータ追加および削除操作。 次に、フロントエンド部分の構築を開始できます。まず、code/03_Message

ディレクトリで

npm install vue axios コマンドを実行して、次に使用するフロントエンド コンポーネントをインストールする必要があります (このコマンドにより、node_modules ディレクトリ。前述したように、ディレクトリはサーバー側スクリプトによって全体としてブラウザに開かれます)。次に、同じディレクトリ内に public ディレクトリを作成し、その中に次のコードを含む index.htm という名前のファイルを作成します。

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

This page主に 2 つの部分に分かれており、最初の部分では v-for コマンドを使用して、

notes のデータに基づいてデータベースに追加されたコメントを繰り返し表示します。指定したメッセージを削除するには、「 Delete the 」ボタンを指定します (クリック イベント ハンドラー関数をバインドするには、v-on ディレクティブを使用します)。 2 番目の部分は、メッセージを追加するための入力インターフェイスです。ここでは、v-model コマンドを使用して、必要な userName と を取得します。ユーザーが入力したメッセージデータ。次に、対応する Vue オブジェクト インスタンスを作成する必要があります。これを行うには、先ほど作成した public ディレクトリの下に別の js ディレクトリを作成し、その中に # という名前のディレクトリを作成します。 ##main.js のカスタム フロントエンド スクリプト ファイルには次のコードがあります: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;!DOCTYPE html&gt; &lt;html lang=&quot;zh-cn&quot;&gt; &lt;head&gt;     &lt;meta charset=&quot;UTF-8&quot;&gt;     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;     &lt;script defer=&quot;defer&quot; src=&quot;/node_modules/vue/dist/vue.js&quot;&gt;&lt;/script&gt;     &lt;script defer=&quot;defer&quot; src=&quot;/node_modules/axios/dist/axios.js&quot;&gt;&lt;/script&gt;     &lt;script defer=&quot;defer&quot; src=&quot;/js/main.js&quot;&gt;&lt;/script&gt;     &lt;title&gt;留言本&lt;/title&gt; &lt;/head&gt; &lt;body&gt;     &lt;p id=&quot;app&quot;&gt;         &lt;h1&gt;留言本&lt;/h1&gt;         &lt;p id=&quot;showNote&quot; v-for=&quot;note in notes&quot;&gt;             &lt;span&gt;{{ note.userName }} 说：{{ note.noteMessage }} &lt;/span&gt;             &lt;input type=&quot;button&quot; value=&quot;删除&quot; @click=&quot;remove(note.uid)&quot;&gt;         &lt;/p&gt;         &lt;p id=&quot;addMessage&quot;&gt;             &lt;h2&gt;请留言：&lt;/h2&gt;             &lt;label :for=&quot;userName&quot;&gt;用户名：&lt;/label&gt;             &lt;input type=&quot;text&quot; v-model=&quot;userName&quot;&gt;             &lt;br&gt;             &lt;label :for=&quot;Message&quot;&gt;写留言：&lt;/label&gt;             &lt;input type=&quot;text&quot; v-model=&quot;Message&quot;&gt;&lt;/input&gt;             &lt;input type=&quot;button&quot; value=&quot;添加留言&quot; @click=&quot;addNew&quot;&gt;         &lt;/p&gt;     &lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>この Vue インスタンスは前に作成したものと似ており、主に次の 4 つのメンバーで構成されています:

el

Member: CSS セレクターを使用して Vue インスタンスに対応する要素コンテナーを指定するために使用します。ここでは

• 要素。

  data
メンバー: ページにバインドされたデータを設定するために使用されます。次の 3 つのデータ変数がここで設定されます:

• notes

  : これは、追加されたメッセージ レコードを格納するために使用される配列変数です。
  • userName: これは、「ユーザー名」データを取得するために使用される文字列変数です。
  • Message: これは、「メッセージ」データを取得するために使用される文字列変数です。
  created
Member: プログラムのロード時の初期化に使用されます。ここでは、追加されたメッセージをサーバーから読み取り、記録して、
• notes

  変数。

  メソッド
メンバー: ページにバインドされたイベント処理関数を定義するために使用されます。次の 2 つのイベント処理関数がここで定義されます:
• • addNew：用于添加新的留言记录，并同步更新notes中的数据。
  • remove：用于删除指定的留言记录，并同步更新notes中的数据。

通常情况下，我们在 Vue.js 框架中会选择使用 axios 这样的第三方组件来处理发送请求和接收响应数据的工作，引入该组件的方式与引入 Vue.js 框架的方式是一样的，可以像上面一样先下载到本地，然后使用<script>标签引入，也可以使用 CDN 的方式直接使用<code><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 学習 3: サーバーとのデータ対話の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。