当前位置:首页 > 技术分析 > 正文内容

Node.js入门:从零开始搭建个人博客

ruisui883个月前 (03-24)技术分析15

随着互联网的快速发展,个人博客作为一种重要的网络信息载体,依然是许多开发者展示技术成果和分享经验的重要平台。使用Node.js和Express框架可以快速实现一个简洁高效的博客系统,同时也能帮助我们理解后端服务的基本原理。

本文将从零开始,手把手教你使用Node.js和Express搭建一个简单的个人博客系统。


一、项目初始化

在开始之前,我们需要确保已经安装了Node.js和npm。如果尚未安装,可以访问Node.js官网下载并安装最新版本的Node.js。

接下来,我们创建一个新的文件夹,并初始化一个Node.js项目:

mkdir my-blog && cd my-blog
npm init -y

这会生成一个package.json文件,用于管理项目的依赖和脚本。接下来,我们需要安装Express框架和其他必要的依赖:

npm install express ejs

o express: Node.js的高效轻量级Web框架。

o ejs: 一个简洁的模板引擎。


二、创建博客的基本结构

我们将在项目目录下创建以下文件和文件夹:

my-blog/
├── package.json
├── public/ # 静态资源目录(可选)
├── routes/ # 路由处理逻辑
├── views/ # 模板文件
└── app.js # 主应用文件


三、配置Express应用

在app.js中,我们需要完成以下步骤:

1. 引入Express模块:

const express = require('express');
const app = express();
const port = 3000;

2. 配置模板引擎:

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

3. 设置静态资源目录(可选):

app.use(express.static(__dirname + '/public'));

4. 定义路由:

// 首页路由
app.get('/', (req, res) => {
res.render('index', {
title: '我的博客',
posts: [
{ id: 1, title: 'Hello World', content: '这是我的第一篇博客文章...' },
{ id: 2, title: '学习Node.js', content: 'Node.js是一门值得学习的语言...' }
]
});
});

// 文章详情页路由
app.get('/post/:id', (req, res) => {
const postId = req.params.id;
// 假设我们从数据库中获取文章数据,这里使用静态数据示例:
const posts = [
{ id: 1, title: 'Hello World', content: '这是我的第一篇博客文章...' },
{ id: 2, title: '学习Node.js', content: 'Node.js是一门值得学习的语言...' }
];

const post = posts.find(post => post.id === parseInt(postId));
if (!post) {
res.status(404).send('文章不存在');
} else {
res.render('post', {
title: post.title,
content: post.content
});
}
});

5. 启动服务器:

app.listen(port, () => {
console.log(`博客已启动,访问地址为 http://localhost:${port}`);
});


四、创建模板文件

在views/目录下创建以下EJS模板文件:

index.ejs(首页)

<!DOCTYPE html>


</span><span style='color: #FF0000; --tt-darkmode-color: #FF0C00;'><</span></strong>%= title %><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'>


<%= title %>




    <% posts.forEach(post => { %>

  • <a href="/post/<%= post.id %>"><%= post.title %>

    <%= post.content %>



  • <% }); %>


<a href="/post/1">查看更多文章



post.ejs(文章详情页)

<!DOCTYPE html>


</span><span style='color: #FF0000; --tt-darkmode-color: #FF0C00;'><</span></strong>%= title %><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'>


<%= title %>




<%= content %>



五、运行博客

启动服务器:

node app.js

打开浏览器,访问http://localhost:3000即可看到你的个人博客。


六、扩展功能

目前的博客系统非常基础,你可以根据需求添加更多功能:

1. 用户认证:使用 Passport 或其他身份验证库实现用户登录和注册。

2. 数据库集成:将文章数据存储到 MongoDB 或 MySQL 数据库中。

3. 评论功能:为每篇文章添加评论模块。

4. 富文本编辑:使用 CKEditor 等工具帮助用户更方便地撰写文章。

5. 静态资源优化:将 CSS 和 JavaScript 文件托管到 CDN,或使用Webpack进行打包。


七、部署博客

当你的博客功能完善后,可以将其部署到云服务器上(如阿里云、AWS、DigitalOcean等)。常见的部署方式包括:

1. 使用 pm2 管理进程:

npm install -g pm2
pm2 start app.js
pm2 save

2. 部署到容器化平台(如 Docker)。


总结

通过以上步骤,我们已经完成了一个简单的个人博客系统的搭建。虽然功能有限,但这个过程涵盖了Node.js和Express框架的基础知识,包括路由处理、模板引擎的使用以及基本的后端逻辑实现。

随着对技术的深入学习,你可以逐步为博客添加更多高级功能,使其更加完善和强大。无论是技术分享还是个人展示,这样一个基于 Node.js 的博客系统都能很好地满足你的需求!

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2967.html

标签: res.render
分享给朋友:

“Node.js入门:从零开始搭建个人博客” 的相关文章

祸害阿里云宕机3小时的IO HANG究竟是什么?

本文来自微信公号“CSDN”(ID:CSDNnews),作者 | 王知无, 责编| 郭 芮。2019年3月3日凌晨,微博炸锅,有网友反映说阿里云疑似出现宕机,华北很多互联网公司受到暴击伤害,APP、网站全部瘫痪,我自己的朋友圈和微信群里也有好友反馈,刚刚从被窝被叫起来去修Bug,结果发现服务器登不上...

7 招教你轻松搭建以图搜图系统

作者 | 小龙责编 | 胡巍巍当您听到“以图搜图”时,是否首先想到了百度、Google 等搜索引擎的以图搜图功能呢?事实上,您完全可以搭建一个属于自己的以图搜图系统:自己建立图片库;自己选择一张图片到库中进行搜索,并得到与其相似的若干图片。Milvus 作为一款针对海量特征向量的相似性检索引擎,旨在...

el-table内容\n换行解决办法

问题请求到的数据带有换行符 '\n'但页面展示时不换行statusRemark: "\"1、按期完成计划且准确率100%,得100分;\n2、各项目每延误1天,扣1分;每失误1次或者员工投诉1次,扣3分,失误层面达到公司级影响较大的,该项绩效分数为0\"\n&...

《暗黑破坏神 2:重制版》PC 版 2.3 版本发布,支持英伟达 DLSS

IT之家 12 月 3 日消息,暴雪为《暗黑破坏神 2:重制版》PC 版发布了更新 2.3 版本,添加了“离线难度缩放”滑块(玩家可以在单人游戏时增加挑战和奖励的级别)、多项辅助功能和用户界面改进,以及英伟达 DLSS 支持。玩法改进:玩家现在可以在离线游戏的选项菜单中使用“游戏难度等级”,它提供与...

Python中的11 种数组算法

1. 创建数组 创建数组意味着留出一个连续的内存块来存储相同类型的元素。在大多数语言中,您可以在创建数组时指定数组的大小。假设您正在书架上整理一组书籍,并且您需要为正好 10 本书预留空间。功能架上的每个空间都对应于数组中的一个索引。# Example in Python arr = [1, 2,...

关于Vue页面跳转传参,参数不同, 但页面只获取参数一次的问题

#头条创作挑战赛#1.问题描述问题描述: element 展示表格(页面A),点击表格的每一行的查看详情按钮,可以携带此行的信息参数跳转到另一个页面(页面B),但是从A页面到B页面,只有第一次跳转的时候B页面可以获取到A页面的参数,返回再次A->B ,B页面无法获取到参数。2.解决办法:方法一...