一、项目介绍

本项目适合作为一个课程设计或者毕业设计，最终实现了一个完整的博客系统，包括用户的登录、注册，图片上传，文章的发布、富文本编辑器、删除、编辑、修改、列表展示，评论的发布、删除、列表展示，以及实现了用户的文章和评论的后台管理和博客的前台展示和评论功能。

二、涉及技术

1. • HTML+CSS+JavaScript(涉及ES6以后新增内容)

2. • node.js

3. • Express框架

4. • mongoDB

三、涉及软件

1. VScode（编写代码）

2. APIpost(接口调试)

3. node.js(后端工作)

4. robo3t(操作数据库)

四、项目展示

1.注册页面

选择文件即为选择头像

2.登录页面

输入用户名和密码会在数据库中进行匹配，错误则无法登录

3.博客主页面

该项目会记录浏览量以及评论量，以及发布时间和作者

5.文章主页面

系统会按照时间展示评论，以及评论人的昵称和评论时间

6.用户发布文章主界面

在这里用户任意编辑文章发布，包括插入图片，同时可以查看自己之前博客，也可以对其编辑或者删除

7.删除评论功能

在用户编辑文章页面，可以修改文章，同时也可以删除别人评论

五、代码展示

后端框架（利用Express生成的脚手架）

前端页面设计

服务器的启动以及调用各种中间件

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");
let { expressjwt } = require("express-jwt");var articlesRouter = require("./routes/articles");
var usersRouter = require("./routes/users");
var uploadRouter = require("./routes/upload");
var commentsRouter = require("./routes/comments");var articlesFrontRouter = require("./routes/front/articles");
var commentsFrontRouter = require("./routes/front/comments");var app = express();//设置跨域访问
app.all("*", function (req, res, next) {//设置允许跨域的域名，*代表允许任意域名跨域res.header("Access-Control-Allow-Origin", req.headers.origin || "*");//允许的header类型res.header("Access-Control-Allow-Headers","Content-Type, Authorization, X-Requested-With");// //跨域允许的请求方式res.header("Access-Control-Allow-Methods","PATCH,PUT,POST,GET,DELETE,OPTIONS");// 可以带cookiesres.header("Access-Control-Allow-Credentials", true);if (req.method == "OPTIONS") {res.sendStatus(200).end();} else {next();}
});// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));//解析jwt
app.use(expressjwt({secret: "test12345",algorithms: ["HS256"],}).unless({// 要排除的 路由path: ["/api/users","/api/upload",/^\/api\/articles\/users\/\w+/,{url: /^\/api\/articles\/\w+/,methods: ["GET"],},// 前台两个文章接口不需要权限"/api/front/articles",{url: /^\/api\/front\/articles\/\w+/,methods: ["GET"],},{url: /^\/api\/front\/comments\/articles\/\w+/,methods: ["GET"],},],})
);app.use("/api/users", usersRouter);
app.use("/api/upload", uploadRouter);
app.use("/api/articles", articlesRouter);
app.use("/api/comments", commentsRouter);
app.use("/api/front/articles", articlesFrontRouter);
app.use("/api/front/comments", commentsFrontRouter);app.use(function (err, req, res, next) {if (err.name === "UnauthorizedError") {res.status(401).json({ code: 0, msg: "无效的token或者没有没有传递token-请重新登录" });} else {next(err);}
});
// catch 404 and forward to error handler
app.use(function (req, res, next) {next(createError(404));
});// error handler
app.use(function (err, req, res, next) {// set locals, only providing error in developmentres.locals.message = err.message;res.locals.error = req.app.get("env") === "development" ? err : {};// render the error pageres.status(err.status || 500);res.render("error");
});module.exports = app;

（代码过多不一一展示了）

六、源码及配套软件

需要源码和配套软件的朋友可以私信我