【Node小白入门】基于Node.js搭建自己的博客网站

最新推荐文章于 2024-07-25 03:30:51 发布

ccong...

最新推荐文章于 2024-07-25 03:30:51 发布

阅读量1.1k

点赞数

分类专栏： Node小白入门文章标签： nodejs node.js

本文链接：https://blog.csdn.net/huyang_1995/article/details/111411080

版权

Node小白入门专栏收录该内容

7 篇文章 1 订阅

订阅专栏

写在前面，大家好！我是【跨考菌】，一枚跨界的程序猿，专注于后台技术的输出，目标成为全栈攻城狮！这博客是对我跨界过程的总结和思考。如果你也对Java、后端技术感兴趣，抑或是正在纠结于跨界，都可以关注我的动态，让我们一起学习，一起进步~
我的博客地址为：【跨考菌】的博客

前面我们已经学习了一些Node.js的前置知识：
【Node小白入门】Node模块化开发概述
 【Node小白入门】Node服务端编程入门
 【Node小白入门】Node数据库操作入门
 【Node小白入门】Node模板引擎入门
 【Node小白入门】Express框架简介和初体验

本文开始基于前面的前置知识开始搭建自己的博客网站。
学习的视频为：https://www.bilibili.com/video/BV1wE411u7ak
学习的源码为：链接：https://pan.baidu.com/s/1e37yaESBSMaxdPvSCc_o9w 提取码：8c6t
下面是博客搭建过程中注意点的总结。

在这里插入图片描述

1 环境问题

启动项目发现会报各种错误，是因为没有安装好bcrypt插件的原因。

bcrypt依赖的其他环境

python 2.x
node-gyp
npm install -g node-gyp
windows-build-tools
npm install --global --production windows-build-tools

1）安装python
2）安装node-gyp
3）windows系统需要安装windows-build-tools插件(打开管理员命令行敲该命令)
4）安装bcrypt：
npm install bcrypt

2 模板文件中外链资源绝对路径问题

1）模板中的相对路径，是针对地址栏中的请求路径的。

在这里插入图片描述

说明：
请求地址：http://localhost:3000/admin/login
这里的请求路径指的是最后一个/admin，login是地址。

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css">

<link rel="stylesheet" href="/admin/lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/admin/css/base.css">

我们配置的静态资源地址为：public

// 开放静态资源文件
app.use(express.static(path.join(__dirname, 'public')))

又因为相对于地址栏的请求路径为/admin。所以在public目录下找到admin目录，即可找到对应的css文件。

这里我们把/admin替换为/abc.

2）验证

app.use('/abc', admin);

在这里插入图片描述
可以发现样式不见了，是因为在模板中找不到我们的css静态文件导致的。

分析：
请求路径为/abc。所以要在public目录下找到abc目录，没找到导致的。

3）如何解决这个问题呢？
"/"代表的是绝对路径(public文件)。
在这里插入图片描述

4）区别？
在这里插入图片描述

图一是由模板引擎解析的，所以是相对于当前文件，不需要写绝对路径。
图二是浏览器解析，所以是相对于浏览器的请求地址，需要写相对路径。

3 cookie和session

cookie：浏览器在电脑硬盘中开辟的一块空间，主要供服务器端存储数据。

cookie中的数据是以域名的形式进行区分的。
cookie中的数据是有过期时间的，超过时间数据会被浏览器自动删除。
cookie中的数据会随着请求被自动发送到服务器端。

在这里插入图片描述
session：实际上就是一个对象，存储在服务器端的内存中，在session对象中也可以存储多条数据，每一条数据都有一个sessionid做为唯一标识。

在这里插入图片描述
在node.js中需要借助express-session实现session功能。

const session = require('express-session');
app.use(session({ secret: 'secret key' }));

4 Joi插件

JavaScript对象的规则描述语言和验证器。

const Joi = require('joi');
const schema = {
    username: Joi.string().alphanum().min(3).max(30).required().error(new Error(‘错误信息’)),
    password: Joi.string().regex(/^[a-zA-Z0-9]{3,30}$/),
    access_token: [Joi.string(), Joi.number()],
    birthyear: Joi.number().integer().min(1900).max(2013),
    email: Joi.string().email()
};
Joi.validate({ username: 'abc', birthyear: 1994 }, schema);

5 定义错误处理中间件

放在最后：

app.use((err, req, res, next) => {
	// 将字符串对象转换为对象类型
	// JSON.parse() 
	const result = JSON.parse(err);
	res.redirect(`${result.path}?message=${result.message}`);
})

调用方式？

// 因为next只能接收一个参数，需要转为json，在中间件中解析。
return next(JSON.stringify({path: '/admin/user-edit', message: e.message}))

6 form表单的enctype属性

enctype 指定表单数据的编码类型
默认是：application/x-www-form-urlencoded
例子：name=zhangsan&age=20
multipart/form-data 将表单数据编码成二进制类型

<form class="form-container" action="/admin/article-add" method="post" enctype="multipart/form-data">

7 formidable

作用：解析表单，支持get请求参数，post请求参数、文件上传。

 // 引入formidable模块
 const formidable = require('formidable');
 // 创建表单解析对象
 const form = new formidable.IncomingForm();
 // 设置文件上传路径
 form.uploadDir = "/my/dir";
 // 是否保留表单上传文件的扩展名
 form.keepExtensions = false;
 // 对表单进行解析
 form.parse(req, (err, fields, files) => {
     // fields 存储普通请求参数
         // files 存储上传的文件信息
 });

案例：

// 引入formidable第三方模块
const formidable = require('formidable');
const path = require('path');
const { Article } = require('../../model/article')

module.exports = (req, res) => {
	// 1.创建表单解析对象
	const form = new formidable.IncomingForm();
	// 2.配置上传文件的存放位置
	form.uploadDir = path.join(__dirname, '../', '../', 'public', 'uploads');
	// 3.保留上传文件的后缀
	form.keepExtensions = true;
	// 4.解析表单
	form.parse(req, async (err, fields, files) => {
		// 1.err错误对象 如果表单解析失败 err里面存储错误信息 如果表单解析成功 err将会是null
		// 2.fields 对象类型 保存普通表单数据
		// 3.files 对象类型 保存了和上传文件相关的数据
		// res.send(files.cover.path.split('public')[1])
		await Article.create({
			title: fields.title,
			author: fields.author,
			publishDate: fields.publishDate,
			cover: files.cover.path.split('public')[1],
			content: fields.content,
		});
		// 将页面重定向到文章列表页面
		res.redirect('/admin/article');
	})
	// res.send('ok');
}

8 mongodb数据库auth配置

centos上配置mongodb的鉴权

9 开发环境和生成环境

开发环境和生产环境：
环境，就是指项目运行的地方，当项目处于开发阶段，项目运行在开发人员的电脑上，项目所处的环境就是开发环境。当项目开发完成以后，要将项目放到真实的网站服务器电脑中运行，项目所处的环境就是生产环境。

为什么要区分开发环境和生产环境：
因为在不同的环境中，项目的配置是不一样的，需要在项目代码中判断当前项目运行的环境，根据不同的环境应用不同的项目配置。

在这里插入图片描述

如何区分开发环境与生产环境

 if (process.env.NODE_ENV == 'development') {
     // 开发环境
 } else {
     // 生产环境
 }

10 第三方config配置模块

作用：允许开发人员将不同运行环境下的应用配置信息抽离到单独的文件中，模块内部自动判断当前应用的运行环境，并读取对应的配置信息，极大提供应用配置信息的维护成本，避免了当运行环境重复的多次切换时，手动到项目代码中修改配置信息

使用步骤：

使用npm install config命令下载模块
在项目的根目录下新建config文件夹
在config文件夹下面新建default.json、development.json、production.json文件
在项目中通过require方法，将模块进行导入
使用模块内部提供的get方法获取配置信息

将敏感配置信息存储在环境变量中

在这里插入图片描述

11 如何将博客系统安装到centos

11.1 开发环境安装

需要先安装python开发环境和node开发工具。
如何在Linux系统上安装Node和npm
如何在Linux系统上安装Python3环境

bcrypt插件需要下面插件：

npm install -g node-gyp
npm install --production --unsafe-perm=true --allow-root

mongo安装：

Centos安装MongoDB并设置为服务

11.2 拉取代码到目标linux机器上

源码地址：https://github.com/HYYEVOLCLJ/node_blog

进入到blog目录：

cd blog

11.3 修改相关配置

修改mongo数据库配置：

在这里插入图片描述
换成你自己的数据库ip、port、用户名和pwd。

11.4 下载依赖并启动

npm install nodemon -g # 通过nodemon命令实时监听系统的状态
npm install
nodemon app.js

11.5 开放3000端口

firewall-cmd --permanent --add-port=3000/tcp
#开放27017端口
firewall-cmd --reload
#修改配置后需要重启防火墙
firewall-cmd --query-port=3000/tcp
#查询3000端口是否开放

通过http://ip:3000/admin/login访问即可。

1.6 pm2管理node应用

Node服务部署工具之pm2

ccong...

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录