• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

node.js全栈项目

武飞扬头像
沈复.
帮助1

一、项目介绍

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

二、涉及技术

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

三、涉及软件

  1. VScode(编写代码)

学新通
  1. APIpost(接口调试)

学新通
  1. node.js(后端工作)

学新通
  1. robo3t(操作数据库)

学新通

四、项目展示

1.注册页面
学新通

选择文件即为选择头像

2.登录页面
学新通

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

3.博客主页面
学新通

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

5.文章主页面
学新通

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

6.用户发布文章主界面
学新通

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

7.删除评论功能
学新通

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

五、代码展示

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

学新通

前端页面设计

学新通

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

  1.  
    var createError = require("http-errors");
  2.  
    var express = require("express");
  3.  
    var path = require("path");
  4.  
    var cookieParser = require("cookie-parser");
  5.  
    var logger = require("morgan");
  6.  
    let { expressjwt } = require("express-jwt");
  7.  
     
  8.  
    var articlesRouter = require("./routes/articles");
  9.  
    var usersRouter = require("./routes/users");
  10.  
    var uploadRouter = require("./routes/upload");
  11.  
    var commentsRouter = require("./routes/comments");
  12.  
     
  13.  
    var articlesFrontRouter = require("./routes/front/articles");
  14.  
    var commentsFrontRouter = require("./routes/front/comments");
  15.  
     
  16.  
    var app = express();
  17.  
     
  18.  
    //设置跨域访问
  19.  
    app.all("*", function (req, res, next) {
  20.  
    //设置允许跨域的域名,*代表允许任意域名跨域
  21.  
    res.header("Access-Control-Allow-Origin", req.headers.origin || "*");
  22.  
    //允许的header类型
  23.  
    res.header(
  24.  
    "Access-Control-Allow-Headers",
  25.  
    "Content-Type, Authorization, X-Requested-With"
  26.  
    );
  27.  
    // //跨域允许的请求方式
  28.  
    res.header(
  29.  
    "Access-Control-Allow-Methods",
  30.  
    "PATCH,PUT,POST,GET,DELETE,OPTIONS"
  31.  
    );
  32.  
    // 可以带cookies
  33.  
    res.header("Access-Control-Allow-Credentials", true);
  34.  
    if (req.method == "OPTIONS") {
  35.  
    res.sendStatus(200).end();
  36.  
    } else {
  37.  
    next();
  38.  
    }
  39.  
    });
  40.  
     
  41.  
    // view engine setup
  42.  
    app.set("views", path.join(__dirname, "views"));
  43.  
    app.set("view engine", "ejs");
  44.  
     
  45.  
    app.use(logger("dev"));
  46.  
    app.use(express.json());
  47.  
    app.use(express.urlencoded({ extended: false }));
  48.  
    app.use(cookieParser());
  49.  
    app.use(express.static(path.join(__dirname, "public")));
  50.  
     
  51.  
    //解析jwt
  52.  
    app.use(
  53.  
    expressjwt({
  54.  
    secret: "test12345",
  55.  
    algorithms: ["HS256"],
  56.  
    }).unless({
  57.  
    // 要排除的 路由
  58.  
    path: [
  59.  
    "/api/users",
  60.  
    "/api/upload",
  61.  
    /^\/api\/articles\/users\/\w /,
  62.  
    {
  63.  
    url: /^\/api\/articles\/\w /,
  64.  
    methods: ["GET"],
  65.  
    },
  66.  
     
  67.  
    // 前台两个文章接口不需要权限
  68.  
    "/api/front/articles",
  69.  
    {
  70.  
    url: /^\/api\/front\/articles\/\w /,
  71.  
    methods: ["GET"],
  72.  
    },
  73.  
    {
  74.  
    url: /^\/api\/front\/comments\/articles\/\w /,
  75.  
    methods: ["GET"],
  76.  
    },
  77.  
    ],
  78.  
    })
  79.  
    );
  80.  
     
  81.  
    app.use("/api/users", usersRouter);
  82.  
    app.use("/api/upload", uploadRouter);
  83.  
    app.use("/api/articles", articlesRouter);
  84.  
    app.use("/api/comments", commentsRouter);
  85.  
    app.use("/api/front/articles", articlesFrontRouter);
  86.  
    app.use("/api/front/comments", commentsFrontRouter);
  87.  
     
  88.  
    app.use(function (err, req, res, next) {
  89.  
    if (err.name === "UnauthorizedError") {
  90.  
    res
  91.  
    .status(401)
  92.  
    .json({ code: 0, msg: "无效的token或者没有没有传递token-请重新登录" });
  93.  
    } else {
  94.  
    next(err);
  95.  
    }
  96.  
    });
  97.  
    // catch 404 and forward to error handler
  98.  
    app.use(function (req, res, next) {
  99.  
    next(createError(404));
  100.  
    });
  101.  
     
  102.  
    // error handler
  103.  
    app.use(function (err, req, res, next) {
  104.  
    // set locals, only providing error in development
  105.  
    res.locals.message = err.message;
  106.  
    res.locals.error = req.app.get("env") === "development" ? err : {};
  107.  
     
  108.  
    // render the error page
  109.  
    res.status(err.status || 500);
  110.  
    res.render("error");
  111.  
    });
  112.  
     
  113.  
    module.exports = app;
学新通

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

六、源码及配套软件

学新通

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

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhfjjecb
系列文章
更多 icon
同类精品
更多 icon
继续加载