Rumah >hujung hadapan web >tutorial js >Cara membina pembaca blog mudah menggunakan Node.js
Cara membina pembaca blog mudah menggunakan Node.js
- WBOYasal
- 2023-11-08 20:36:321214semak imbas
Cara menggunakan Node.js untuk membina pembaca blog yang mudah
Pengenalan:
Dengan perkembangan pesat Internet, blog telah menjadi salah satu cara penting untuk orang ramai merakam kehidupan mereka dan berkongsi pengetahuan. Untuk membina pembaca blog yang mudah, kami boleh menggunakan Node.js dan beberapa teknologi sumber terbuka untuk mencapai matlamat ini. Artikel ini akan memperkenalkan cara menggunakan Node.js untuk membina pembaca blog mudah dan memberikan contoh kod khusus.
Langkah 1: Pasang Node.js dan alatan berkaitan
Mula-mula, kita perlu memasang Node.js dan npm (alat pengurusan pakej Node.js) pada komputer. Muat turun pakej pemasangan yang sesuai untuk sistem pengendalian anda dari tapak web rasmi Node.js (https://nodejs.org/) dan pasangkannya mengikut arahan. Selepas pemasangan selesai, kita boleh memasukkan node -v dan npm -v pada baris arahan untuk mengesahkan sama ada Node.js dan npm telah berjaya dipasang. node -v和npm -v来确认Node.js和npm是否已经成功安装。
步骤二：创建项目文件夹
在命令行中，切换到你希望创建项目的目录，并输入以下命令创建一个新的项目文件夹：
mkdir blog-reader
然后，进入项目文件夹：
cd blog-reader
步骤三：初始化项目
在项目文件夹中，输入以下命令初始化一个新的Node.js项目：
npm init -y
这个命令将会创建一个package.json文件，用来管理项目的依赖和配置。
步骤四：安装Express.js
Express.js是一个流行的Node.js web应用框架，我们将使用它来构建博客阅读器的后端。在命令行中，输入以下命令安装Express.js：
npm install express
步骤五：创建服务器
在项目文件夹中创建一个名为index.js的文件，并输入以下代码：
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Server is listening on port ${port}`);
});这段代码创建了一个Express应用，并在3000端口上监听请求。当访问根路径时，服务器将返回一个字符串"Hello World!"。
步骤六：运行服务器
在命令行中，输入以下命令运行服务器：
node index.js
如果一切正常，你将会看到如下输出：
Server is listening on port 3000
现在，你可以在浏览器中访问http://localhost:3000，将会看到"Hello World!"。
步骤七：安装EJS模板引擎
EJS（Embedded JavaScript）是一个简单的模板引擎，我们将使用它来渲染博客文章的视图。在命令行中，输入以下命令安装EJS：
npm install ejs
步骤八：创建视图模板
在项目文件夹中创建一个名为views的文件夹，并在该文件夹中创建一个名为index.ejs的文件。输入以下代码作为视图模板：
<!DOCTYPE html>
<html>
<head>
<title>博客阅读器</title>
</head>
<body>
<h1>博客阅读器</h1>
<ul>
<% for(let i=0; i<articles.length; i++) { %>
<li><a href="/articles/<%= articles[i].id %>"><%= articles[i].title %></a></li>
<% } %>
</ul>
</body>
</html>这段代码使用EJS的语法来渲染文章列表。我们将在后面的步骤中添加数据并渲染视图。
步骤九：添加路由和控制器
在index.js文件中添加以下代码：
const articles = [
{
id: 1,
title: 'Node.js入门指南',
content: '...'
},
{
id: 2,
title: 'Express.js实践指南',
content: '...'
}
];
app.get('/articles', (req, res) => {
res.render('index', { articles });
});
app.get('/articles/:id', (req, res) => {
const id = req.params.id;
const article = articles.find(article => article.id === parseInt(id));
if (article) {
res.render('article', { article });
} else {
res.send('文章不存在');
}
});这段代码定义了两个路由。当访问/articles路径时，服务器将渲染index.ejs视图，并将文章列表作为参数传递给视图。当访问/articles/:id路径时，服务器将查找具有指定ID的文章，并渲染article.ejs视图。
步骤十：创建文章视图模板
在views文件夹中创建一个名为article.ejs的文件，并输入以下代码作为文章视图模板：
<!DOCTYPE html> <html> <head> <title><%= article.title %></title> </head> <body> <h1><%= article.title %></h1> <article><%= article.content %></article> </body> </html>
这段代码使用EJS的语法来渲染单篇文章的标题和内容。
步骤十一：运行服务器
在命令行中，输入以下命令重新运行服务器：
node index.js
现在，你可以在浏览器中访问http://localhost:3000/articles
Dalam baris arahan, tukar ke direktori yang anda ingin buat projek dan masukkan arahan berikut untuk mencipta folder projek baharu:
rrreee
index.js dalam folder projek dan masukkan kod berikut: 🎜 rrreee🎜Kod ini mencipta aplikasi Express dan mendengar permintaan pada port 3000. Apabila mengakses laluan akar, pelayan akan mengembalikan rentetan "Hello World!". 🎜🎜Langkah 6: Jalankan pelayan🎜Dalam baris arahan, masukkan arahan berikut untuk menjalankan pelayan:🎜rrreee🎜Jika semuanya berjalan lancar, anda akan melihat output berikut:🎜rrreee🎜Kini, anda boleh mengakses views dalam folder projek dan buat fail A bernama index .ejs. Masukkan kod berikut sebagai templat paparan: 🎜rrreee🎜Kod ini menggunakan sintaks EJS untuk memaparkan senarai artikel. Kami akan menambah data dan memaparkan paparan dalam langkah seterusnya. 🎜🎜Langkah 9: Tambah laluan dan pengawal 🎜Tambah kod berikut dalam fail index.js: 🎜rrreee🎜Kod ini mentakrifkan dua laluan. Apabila mengakses laluan /articles, pelayan akan memaparkan paparan index.ejs dan menghantar senarai artikel sebagai parameter kepada paparan. Apabila mengakses laluan /articles/:id, pelayan akan mencari artikel dengan ID yang ditentukan dan memaparkan paparan article.ejs. 🎜🎜Langkah 10: Buat templat paparan artikel 🎜Buat fail bernama article.ejs dalam folder views dan masukkan kod berikut sebagai templat paparan artikel: 🎜rrreee 🎜Ini kod menggunakan sintaks EJS untuk memaparkan tajuk dan kandungan satu artikel. 🎜🎜Langkah 11: Jalankan pelayan 🎜Dalam baris arahan, masukkan arahan berikut untuk menjalankan semula pelayan: 🎜rrreee🎜Sekarang, anda boleh melawati http://localhost:3000/articles dalam pelayar, Anda akan melihat senarai dua tajuk artikel. Mengklik pada tajuk akan melompat ke halaman artikel yang sepadan dan memaparkan tajuk dan kandungan artikel. 🎜🎜Ringkasan: 🎜Artikel ini memperkenalkan cara membina pembaca blog ringkas dengan menggunakan Node.js dan beberapa teknologi sumber terbuka. Kami menggunakan Express.js sebagai rangka kerja bahagian belakang dan EJS sebagai enjin templat untuk melaksanakan pemaparan halaman dan penghantaran data melalui penghalaan dan pengawal. Ini hanyalah contoh mudah yang boleh anda panjangkan dan optimumkan mengikut keperluan anda. Saya harap artikel ini dapat membantu anda mendapatkan pemahaman awal tentang cara menggunakan Node.js untuk membina pembaca blog yang mudah. 🎜Atas ialah kandungan terperinci Cara membina pembaca blog mudah menggunakan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!