Node.js と SQL をページ階層化と組み合わせて動的な Web サイト開発を実現する方法-フロントエンドQ&A-php.cn

Node.js と SQL をページ階層化と組み合わせて動的な Web サイト開発を実現する方法

PHPz

リリース： 2023-04-05 13:35:18

オリジナル

703 人が閲覧しました

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 ページを生成します。