ホームページ >ウェブフロントエンド >フロントエンドQ&A >Node.js と SQL をページ階層化と組み合わせて動的な Web サイト開発を実現する方法
Node.js と SQL をページ階層化と組み合わせて動的な Web サイト開発を実現する方法
- PHPzオリジナル
- 2023-04-05 10:31:26733ブラウズ
Node.js はサーバー側で動作する JavaScript です。
SQL は、リレーショナル データベースの管理に使用される構造化クエリ言語です。これら 2 つのテクノロジーを組み合わせることで、動的な Web サイトの開発が可能になります。
動的 Web サイトを開発する場合、データベースとの接続を確立し、SQL ステートメントを実行してデータを読み書きする必要があります。 Node.js では、データベースへの接続に役立つ多くのモジュールを使用できます。最も人気のあるモジュールは mysql モジュールです。
ページの階層化とは、フロントエンドの HTML、CSS、JavaScript コードを複数のレベルに分割し、各レベルで異なるコード責任を持つことを指します。これの利点は、コードがより適切に整理され、コードの保守性が向上することです。
Node.js と SQL をページ階層化と組み合わせて動的な Web サイトを開発する方法を紹介します。
1. プロジェクトの構造
コードをより適切に整理するには、コードを複数のレベルに分割する必要があります。プロジェクトのディレクトリ構造は次のとおりです。
myapp/ ├── app.js ├── package.json ├── node_modules/ ├── public/ │ ├── css/ │ │ └── style.css │ ├── js/ │ │ ├── main.js │ │ └── jquery.min.js │ └── img/ │ └── logo.png └── views/ ├── index.html ├── header.html ├── footer.html └── error.html
-
app.js: プロジェクトのエントリ ファイル。 -
package.json: プロジェクト構成ファイル。 -
node_modules/: プロジェクトに必要なモジュールを保存します。 -
public/: CSS、JavaScript、画像などの静的ファイルを保存します。 -
views/: HTML テンプレート ファイルを保存します。
2. データベース接続
app.js では、データベースに接続する必要があります。 mysql モジュールを使用して MySQL データベースに接続するコードは次のとおりです:
const mysql = require('mysql');
// 创建连接
const connection = mysql.createConnection({
host: 'localhost', // 数据库主机地址
user: 'root', // 数据库用户名
password: '123456', // 数据库密码
database: 'myapp' // 数据库名称
});
// 连接数据库
connection.connect((err) => {
if (err) {
console.error('连接数据库失败：', err);
return;
}
console.log('连接数据库成功');
});
// 关闭连接
connection.end((err) => {
if (err) {
console.error('关闭连接失败：', err);
return;
}
console.log('关闭连接成功');
});
3. データベース操作
データベースに接続した後、SQL を実行できます。データの読み取りと書き込みを行うステートメント。以下は、データベースにデータを挿入する簡単な例です。
const sql = 'INSERT INTO users SET ?';
const data = { username: 'test', password: '123456' };
connection.query(sql, data, (err, results, fields) => {
if (err) {
console.error('插入数据失败：', err);
return;
}
console.log('插入数据成功');
});
ここでは query メソッドを使用して SQL ステートメントを実行します。最初のパラメータは SQL ステートメントで、2 番目のパラメータは挿入されるデータであり、オブジェクトの形式で表されます。
4. ページの階層化
views ディレクトリには、Web サイトの HTML テンプレート ファイルが保存されます。これらのテンプレート ファイルは、テンプレート エンジンによって最終的な HTML ページにレンダリングされます。
HTML テンプレートのレンダリングには ejs テンプレート エンジンを使用します。簡単な例を次に示します。
<!-- index.html --> <!DOCTYPE html> <html> <head> <title>Node.js 实现 SQL 和页面分层</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <% include header.html %> <div class="container"> <h1>欢迎来到我的网站！</h1> <p><%= message %></p> </div> <% include footer.html %> <script src="/js/jquery.min.js"></script> <script src="/js/main.js"></script> </body> </html>
ご覧のとおり、HTML で <% %> と <%= %> を使用して JavaScript を挿入します。コード。 include ディレクティブは、他の HTML テンプレート ファイルを導入するために使用されます。
Node.js では、ejs モジュールを使用して HTML テンプレートをレンダリングします。以下は例です:
const ejs = require('ejs');
const fs = require('fs');
const template = fs.readFileSync('views/index.html', 'utf8');
const data = { message: '欢迎访问我的网站！' };
const html = ejs.render(template, data);
console.log(html);
このコードは、views/index.html テンプレート ファイルを読み取り、オブジェクト { を使用します。 メッセージ: 「私の Web サイトへようこそ!」 ' } を使用してテンプレートをレンダリングし、最終的に最終的な HTML ページを生成します。
5. 概要
上記の紹介を通じて、Node.js と SQL をページ階層化と組み合わせて使用し、動的な Web サイトを開発する方法を学びました。実際のプロジェクトでは、ORM フレームワーク、Webpack、Gulp など、開発効率とコード品質を大幅に向上できるテクノロジーやツールがさらに増えています。
以上がNode.js と SQL をページ階層化と組み合わせて動的な Web サイト開発を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。