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

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

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

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

まず、codeディレクトリでnpm install Express body-parser knexとnpm install sqlite3@## を実行する必要があります。 #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のカスタムフロントエンドスクリプトファイルには次のコードがあります:

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

ログイン後にコピー

この Vue インスタンスは前に作成したものと似ており、主に次の 4 つのメンバーで構成されています:

要素。
data
notes
: これは、追加されたメッセージレコードを格納するために使用される配列変数です。
- userName: これは、「ユーザー名」データを取得するために使用される文字列変数です。
- Message: これは、「メッセージ」データを取得するために使用される文字列変数です。
created
notes
変数。
メソッド
- addNew：用于添加新的留言记录，并同步更新notes中的数据。
- remove：用于删除指定的留言记录，并同步更新notes中的数据。