Node.js est un JavaScript qui s'exécute côté serveur.
SQL est un langage de requête structuré utilisé pour gérer des bases de données relationnelles. Ces deux technologies sont combinées pour permettre le développement de sites Web dynamiques.
Lors du développement d'un site Web dynamique, nous devons établir une connexion avec la base de données et exécuter des instructions SQL pour lire et écrire des données. Dans Node.js, de nombreux modules peuvent être utilisés pour nous aider à nous connecter à la base de données, le plus populaire est le module mysql. mysql 模块。
页面分层指的是将前端的 HTML、CSS 和 JavaScript 代码分成多个层次，每个层次的代码职责不同。这样做的好处是可以更好地组织代码，提高代码可维护性。
下面我们来介绍如何将 Node.js 和 SQL 与页面分层结合起来实现动态网站的开发。
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
Copier après la connexion
-
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('关闭连接成功');
});Copier après la connexion
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('插入数据成功');
});Copier après la connexion
这里使用了 query 方法来执行 SQL 语句。第一个参数是 SQL 语句，第二个参数是要插入的数据，以对象的形式表示。
4. 页面分层
在 views 目录中，我们存放网站的 HTML 模板文件。这些模板文件通过模板引擎来渲染成最终的 HTML 页面。
我们使用 ejs 模板引擎来渲染 HTML 模板。下面是一个简单的例子：
<!-- 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>
Copier après la connexion
可以看到，在 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);Copier après la connexion
这段代码将 views/index.html 模板文件读取进来，使用对象 { message: '欢迎访问我的网站！' }
La superposition de pages fait référence à la division du code HTML, CSS et JavaScript frontal en plusieurs niveaux, chaque niveau ayant des responsabilités de code différentes. L’avantage est que le code peut être mieux organisé et que la maintenabilité du code peut être améliorée.
Voyons comment combiner Node.js et SQL avec la superposition de pages pour développer des sites Web dynamiques.
1. Structure du projet🎜🎜Afin de mieux organiser le code, nous devons diviser le code en plusieurs niveaux. Voici la structure des répertoires du projet : 🎜rrreee
-
app.js : Le fichier d'entrée du projet.
-
package.json : fichier de configuration du projet.
-
node_modules/ : stocke les modules requis pour le projet.
-
public/ : stocke les fichiers statiques, tels que CSS, JavaScript et images.
-
views/ : stocke les fichiers de modèle HTML.
🎜2. Connexion à la base de données🎜🎜Dans
app.js, nous devons nous connecter à la base de données. Le code pour utiliser le module
mysql pour se connecter à la base de données MySQL est le suivant : 🎜rrreee🎜3. Opérations sur la base de données🎜🎜Après la connexion à la base de données, nous pouvons exécuter des instructions SQL pour lire et écrire des données. Voici un exemple simple d'insertion d'une donnée dans la base de données : 🎜rrreee🎜La méthode
query est utilisée ici pour exécuter des instructions SQL. Le premier paramètre est l'instruction SQL et le deuxième paramètre est la donnée à insérer, exprimée sous forme d'objet. 🎜🎜4. Superposition de pages🎜🎜Dans le répertoire
views, nous stockons les fichiers modèles HTML du site Web. Ces fichiers modèles sont rendus dans les pages HTML finales par un moteur de modèles. 🎜🎜Nous utilisons le moteur de modèles
ejs pour afficher les modèles HTML. Voici un exemple simple : 🎜rrreee🎜Comme vous pouvez le voir, utilisez
<% %> et
<%= %> en HTML pour insérer du code JavaScript. La directive
include est utilisée pour introduire d'autres fichiers modèles HTML. 🎜🎜Dans Node.js, utilisez le module
ejs pour afficher les modèles HTML. Voici un exemple : 🎜rrreee🎜Ce code lit dans le fichier modèle
views/index.html et utilise l'objet
{ message : 'Bienvenue sur mon site Web ! ' pour afficher le modèle et enfin générer la page HTML finale. 🎜🎜5. Résumé🎜🎜Grâce à l'introduction ci-dessus, nous avons appris à utiliser Node.js et SQL combinés avec la superposition de pages pour développer des sites Web dynamiques. Dans les projets réels, il existe davantage de technologies et d'outils qui peuvent être utilisés, tels que le framework ORM, Webpack, Gulp, etc., qui peuvent considérablement améliorer l'efficacité du développement et la qualité du code. 🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
