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

PHPz
リリース: 2023-04-05 13:35:18
オリジナル
723 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート