node.js全栈项目

一、项目介绍

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

二、涉及技术

    • HTML+CSS+JavaScript(涉及ES6以后新增内容)
    • node.js
    • Express框架
    • mongoDB

三、涉及软件

  1. VScode(编写代码)

node.js全栈项目_第1张图片

  1. APIpost(接口调试)

node.js全栈项目_第2张图片
  1. node.js(后端工作)

node.js全栈项目_第3张图片
  1. robo3t(操作数据库)

node.js全栈项目_第4张图片

四、项目展示

1.注册页面
node.js全栈项目_第5张图片

选择文件即为选择头像

2.登录页面

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

3.博客主页面
node.js全栈项目_第6张图片

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

5.文章主页面
node.js全栈项目_第7张图片

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

6.用户发布文章主界面

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

7.删除评论功能
node.js全栈项目_第8张图片

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

五、代码展示

后端框架(利用Express生成的脚手架)

node.js全栈项目_第9张图片

前端页面设计

node.js全栈项目_第10张图片

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

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;

(代码过多不一一展示了)

六、源码及配套软件

node.js全栈项目_第11张图片

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

你可能感兴趣的:(前端,node.js,前端框架)