wxy05240 / MessageWall

采用Vue3+Node开发的前后端分离高颜值留言墙项目

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

留言墙

本留言墙来源自B站UP主yike陈,分为留言墙与照片墙两部分 视频链接

Web文件夹为前端,API文件夹为后端,前端配置文件位置为:src/assets/utils/env.js,后端配置文件位置为:config/default.js,并且需要导入相关sql文件,与配置反向代理

由于本项目后端使用Nodejs编写,请在Web/src/assets/utils/env.js中修改后端API地址,其中的avatarUrl为留言墙右上方小图标

  • 本项目采用前后端分离方式编写,前端使用Vue3改写,后端使用Nodejs编写
  • 本项目改写自B站UP主yike陈,并在其视频基础上增添移动端与适当改写
  • 如果喜欢该项目就给个Star吧!

部署教程

后端

  • 将后端文件导入网站,使用npm install命令安装模块 导入后端文件 Alt text
  • 将config文件夹中的walls数据库文件导入后端数据库 导入数据库
  • 之后配置反向代理(防火墙放行) 配置反向代理,端口取决于config里面port参数
  • 之后使用pm2持久化运行 持久化运行

前端

  • 首先npm install安装相关包,之后修改env.js文件的baseUrl与baseImgPath为后端API地址、avatarUrl为头像地址 安装相关包
  • 之后npm run build构建后直接上传服务器即可使用

项目地址

Demo地址:一刻时空-苦苦的码人

项目截图

PC端

留言墙 照片墙 添加留言 添加图片

移动端

留言墙 照片墙

About

采用Vue3+Node开发的前后端分离高颜值留言墙项目


Languages

Language:Vue 63.0%Language:JavaScript 14.5%Language:HTML 14.2%Language:CSS 7.4%Language:Less 0.9%