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

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

ruisui881个月前 (03-24)技术分析4

随着互联网的快速发展,个人博客作为一种重要的网络信息载体,依然是许多开发者展示技术成果和分享经验的重要平台。使用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入门:从零开始搭建个人博客” 的相关文章

面试官:聊聊你知道的Vue与React的区别

最近面到很多大公司的时候,小编都会碰到一个很尴尬的问题,很多大公司的技术栈都是React,但是小编学的是Vue,其实从本质上来说两者都是比较优秀的前端框架,所以有些面试官会问到Vue和React的区别。小编认真整理了一些自己所知道的Vue和React的区别,给大家分享分享。1. 模板语法 vs JS...

理解virt、res、shr之间的关系(linux系统篇)

前言想必在linux上写过程序的同学都有分析进程占用多少内存的经历,或者被问到这样的问题——你的程序在运行时占用了多少内存(物理内存)?通常我们可以通过top命令查看进程占用了多少内存。这里我们可以看到VIRT、RES和SHR三个重要的指标,他们分别代表什么意思呢?这是本文需要跟大家一起探讨的问题。...

jvm疯狂吃内存,到底是谁的锅?

jvm应该是每一个java程序员都需要掌握的内容,但是在没有遇到问题之前,很多都是基于理论的,唯有实战才能增加个人的知识储备。本文是从一个角度来分析是谁在狂吃内存,希望对你有所帮助。本文是易观技术人员注意到一台开发机上各个微服务进程占用内存很高,随即便展开了调查......ps:本文来源于:http...

vue-router是如何解析query参数呢? #前端

vue-router 中的 query 解析。1. 大家好,我是龙仔。今天来分享 vue-router 是如何解析快乐参数的,因为使用 vue 路由会传 query 参数和快乐参数,所以从 vue 的角度来看如何解析传递的快乐参数。2. 基础知识大家应知道,快乐参数结构如:a、b、c、a、b、c、a...

慕课 SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序

本课程以业务驱动技术栈,打造业务相对完整的掌上医疗小程序,解决大家没有好的毕设项目或者求职项目的困境。本课程案例采用前后端分离架构,业务功能完善(既有WEB管理端,也有移动用户端),界面美观,无需艰涩的技术也能做出亮眼的作品。SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序 |...

Alpine.js 如何火起来的!比 React/Vue 如何?

大家好,很高兴又见面了,我是"高级前端?进阶?",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!前言前端 JavaScript 框架的创新是这个时代最伟大的技术文化现象之一。Alpine 发音为 /??lpa?n/,中文为阿尔卑斯山、...