node.js全栈项目

2023-10-30

一、项目介绍

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

二、涉及技术

  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生成的脚手架)

前端页面设计

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

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;

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

六、源码及配套软件

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

node.js全栈项目 的相关文章

随机推荐

  • 【深入理解C++】调用父类的构造函数

    文章目录 1 子类的构造函数默认会调用父类的无参构造函数 2 调用父类的构造函数 1 子类的构造函数默认会调用父类的无参构造函数 include
  • 阿里java代码规范_阿里java代码规范

    命名规范 类命 驼峰式 MarcoPolo 方法名 localValue 常量 大写单词 单词间 分割 语义清楚 MAX STOCK COUNT 抽象类 以Abstract Base开始 异常类用 Exception结束 测试用Test结尾
  • 断断续续弄了两天 终于可以清理完磨人的MySQL Connector Net 6.7.4了

    我是win7 64位 我的情况是 用360软件管家卸载的时候会回滚 开始 gt regedit gt 点一下计算机 左侧列表第一个 gt Ctrl F gt 先搜索MySQL Connector Net 6 7 4 删掉一个后继续Ctrl
  • 优秀程序员必须知道的32个算法,提高你的开发效率

    size large color darkred 导读 奥地利符号计算研究所 Research Institute for Symbolic Computation 简称RISC 的Christoph Koutschan博士在自己的页面上发
  • 程序员须知:面试中最容易被问到的18个算法题(附答案!)

    原创 IT168企业级 2017 09 20 17 21 算法是比较复杂又基础的学科 每个学编程的人都会学习大量的算法 而根据统计 以下这18个问题是面试中最容易遇到的 本文给出了一些基本答案 供算法方向工程师或对此感兴趣的程序员参考 1
  • 推荐一个共享充电宝小程序

    真正的大师 永远都怀着一颗学徒的心 一 项目简介 今天推荐一个共享充电宝小程序 二 实现功能 该项目使用uniapp开发的 可打包成小程序 app app并没有适配 还需要自己改改东西 三 技术选型 uniapp 四 界面展示 五 源码地址
  • Java排序算法:冒泡算法

    Java排序算法 冒泡算法 冒泡算法 Java冒泡排序 Bubble Sort 是一种简单的排序算法 其基本思想是比较相邻的两个元素 如果顺序错误则交换位置 每次将未排序部分的最大 小 值 冒泡 到已排序部分的末尾 直到全部排序完成 下面是
  • numpy学习笔记:np.zeros应用——生成三通道全黑Mask(蒙版)

    numpy学习笔记 np zeros应用 生成三通道全黑Mask 蒙板 np zeros官方文档 np zeros官方文档 下面是一段生成256 256三通道全黑mask的demo import numpy as np import cv2
  • 使用nginx-quic支持HTTP/3

    本文主要介绍使用nginx quic和boringssl项目来对服务器进行升级支持HTTP 3协议 1 背景介绍 nginx官方从1 19版本开始 新建立了一个分支 专门用来对QUIC进行支持 官网的链接点这里 注意该项目还处于早期的alp
  • 使用深度学习TensorFlow框架进行图片识别

    Apsara Clouder大数据专项技能认证 使用深度学习TensorFlow框架进行图片识别 本认证系统的介绍了深度学习的一些基础知识 以及Tensorflow的工作原理 通过阿里云机器学习PAI基于经典的CIFAR 10数据集实现图片
  • 前端Vue 项目性能优化

    前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术 帮我们处理了前端开发中最脏最累的 DOM 操作部分 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM 但 Vue 项目中仍然存在项目首屏优化 Webpack 编译配置优
  • smbus电池信息读取

    smbus协议的智能电池 我们可以使用i2c的读写方式获取ic信息 也可以使用smbus协议的接口获取 编译方法 arm none linux gnueabi gcc batterygetdemo c o batterygetdemo 编译
  • 一元三次方程求解 蓝桥杯 764

    题目描述 有形如 ax3 bx2 cx d 0 这样的一个一元三次方程 给出该方程中各项的系数 a b c d 均为实数 并约定该方程存在三个不同实根 根的范围在 100至 100 之间 且根与根之差的绝对值 1 要求由小到大依次在同一行输
  • OSI七层网络模型和TCP/IP五层模型

    文章目录 1 OSI的来源 2 OSI七层模型的划分 3 TCP IP五层模型 1 OSI的来源 OSI Open System Interconnect 即开放式系统互联 一般都叫OSI参考模型 是ISO 国际标准化组织 组织在1985年
  • 五大浏览器对应的内核

    写这个文章是为了让自己容易快速找到 简单粗暴 3 晴天雨天不如前端在身边 各浏览器对应的内核 谷歌 Webkit gt blink 现在是blink啦 FireFox Gecko safari webkit opera presto IE
  • 【海思SS626

    目录 一 下载 Ubuntu 18 04 6 LTS 二 VMware17创建虚拟机 三 安装Ubuntu18 04LTS 四 安装其他软件 五 总结 一 下载 Ubuntu 18 04 6 LTS 问题 为什么要下载 Ubuntu18 0
  • 封装cookie、sessionStorage、localStorage公共函数(vue)

    封装cookie sessionStorage localStorage公共函数 vue 通常一个前端项目 我们最常用到的三个浏览器储存有三种 cookie sessionStorage localStorage 这三种各有各的优势 在项目
  • JavaScript遇到的坑

    一 document getElementById返回为null 今天准备学习下canvas画图 于是呢写了如下代码 canvas html
  • 最新的爱心代码已就绪 发射成功 速来领取啦

    哈喽 大家好 我是木易巷 爱情 是每个人都在追求的东西 身为一个IT行业人士 我也会追求爱情 我也会像心爱的人表达感情 只是我所表达的方式与他人有所不同 我的主要战场在计算机上 所以我就想到了用计算机来表达感情 在网页上做爱心 还是会动的爱
  • node.js全栈项目

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