node.js全栈项目
一、项目介绍
本项目适合作为一个课程设计或者毕业设计,最终实现了一个完整的博客系统,包括用户的登录、注册,图片上传,文章的发布、富文本编辑器、删除、编辑、修改、列表展示,评论的发布、删除、列表展示,以及实现了用户的文章和评论的后台管理和博客的前台展示和评论功能。
二、涉及技术
-
HTML CSS JavaScript(涉及ES6以后新增内容)
-
node.js
-
Express框架
-
mongoDB
三、涉及软件
-
VScode(编写代码)
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
-
APIpost(接口调试)
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
-
node.js(后端工作)
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
-
robo3t(操作数据库)
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
四、项目展示
1.注册页面
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
选择文件即为选择头像
2.登录页面
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
输入用户名和密码会在数据库中进行匹配,错误则无法登录
3.博客主页面
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
该项目会记录浏览量以及评论量,以及发布时间和作者
5.文章主页面
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
系统会按照时间展示评论,以及评论人的昵称和评论时间
6.用户发布文章主界面
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
在这里用户任意编辑文章发布,包括插入图片,同时可以查看自己之前博客,也可以对其编辑或者删除
7.删除评论功能
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
在用户编辑文章页面,可以修改文章,同时也可以删除别人评论
五、代码展示
后端框架(利用Express生成的脚手架)
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
前端页面设计
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
服务器的启动以及调用各种中间件
-
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"
-
);
-
// 可以带cookies
-
res.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 development
-
res.locals.message = err.message;
-
res.locals.error = req.app.get("env") === "development" ? err : {};
-
-
// render the error page
-
res.status(err.status || 500);
-
res.render("error");
-
});
-
-
module.exports = app;
(代码过多不一个一个地展示了)
六、源码及配套软件
![学新通 学新通](/static/whole/images/alert/data-load/load-15.gif)
需要源码和配套软件的朋友可以私信我
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfjjecb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22