# 留言墙
本留言墙来源自B站UP主yike陈,分为留言墙与照片墙两部分
[视频链接](https://www.bilibili.com/video/BV11t4y157L2/?spm_id_from=333.999.0.0&vd_source=290b6b566a6de4759a1517c89cdae2c8)
**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命令安装模块
![导入后端文件](https://img.5i21.cn/LightPicture/2023/07/0bea3485c3077674.png)
![Alt text](https://img.5i21.cn/LightPicture/2023/07/00959330117886b2.png)
- 将config文件夹中的walls数据库文件导入后端数据库
![导入数据库](https://img.5i21.cn/LightPicture/2023/07/181b36b753e22058.png)
- 之后配置反向代理(防火墙放行)
![配置反向代理,端口取决于config里面port参数](https://img.5i21.cn/LightPicture/2023/07/729a876ea023dfce.png)
- 之后使用pm2持久化运行
![持久化运行](https://img.5i21.cn/LightPicture/2023/07/0e34b01e6645ec0a.png)
## 前端
- 首先npm install安装相关包,之后修改env.js文件的baseUrl与baseImgPath为后端API地址、avatarUrl为头像地址
![安装相关包](https://img.5i21.cn/LightPicture/2023/07/c506983796661f2d.png)
- 之后npm run build构建后直接上传服务器即可使用
## 项目地址
**Demo地址:[一刻时空-苦苦的码人](https://www.5i21.cn/walls)**
## 项目截图
### PC端
![留言墙](https://img.5i21.cn/LightPicture/2023/02/ec3624a0132679e9.png)
![照片墙](https://img.5i21.cn/LightPicture/2023/02/55b4a4c6aaa6d16f.png)
![添加留言](https://img.5i21.cn/LightPicture/2023/02/12c70efe9cf0484d.png)
![添加图片](https://img.5i21.cn/LightPicture/2023/02/686af7a16b47f9de.png)
### 移动端
![留言墙](https://img.5i21.cn/LightPicture/2023/02/f6038a02f914de92.png)
![照片墙](https://img.5i21.cn/LightPicture/2023/02/9fdfc73c8e65ba6c.png)
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
软件开发设计:应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备:单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、存储设备、移动设备等 操作系统:LInux、树莓派、安卓开发、微机操作系统、网络操作系统、分布式操作系统等。此外,还有嵌入式操作系统、智能操作系统等。 网络与通信:数据传输、信号处理、网络协议、网络与通信硬件、网络安全网络与通信是一个非常广泛的领域,它涉及到计算机科学、电子工程、数学等多个学科的知识。 云计算与大数据:包括云计算平台、大数据分析、人工智能、机器学习等,云计算是一种基于互联网的计算方式,通过这种方式,共享的软硬件资源和信息可以按需提供给计算机和其他设备。
资源推荐
资源详情
资源评论
收起资源包目录
采用Vue3+Node开发的前后端分离高颜值留言墙项目.zip (64个子文件)
cm
Web
src
App.vue 779B
assets
store
index.js 436B
styles
common.less 1KB
common.css 498B
api
index.js 701B
utils
data.js 2KB
axios.js 604B
env.js 696B
methods.js 683B
router
index.js 785B
images
photo.svg 5KB
qm1.mp4 4.09MB
card.svg 2KB
favicon.ico 2KB
loading.json 10KB
favicon.svg 2KB
views
WallMessage.vue 11KB
index.vue 878B
fonts
icon
demo.css 8KB
demo_index.html 17KB
iconfont.ttf 4KB
iconfont.css 1016B
iconfont.json 2KB
iconfont.woff2 2KB
iconfont.js 11KB
iconfont.woff 2KB
main.js 249B
components
mobile
NodeCard.vue 3KB
NewCard.vue 10KB
CardDetail.vue 6KB
WallMessage.vue 10KB
index.vue 806B
TopBar.vue 2KB
Ibutton.vue 1KB
PhotoCard.vue 2KB
IModal.vue 2KB
pc
NodeCard.vue 4KB
NewCard.vue 10KB
FootBar.vue 225B
CardDetail.vue 6KB
Viewer.vue 3KB
TopBar.vue 2KB
Ibutton.vue 1KB
PhotoCard.vue 2KB
IModal.vue 2KB
KMR
message
message.js 410B
IMessage.vue 2KB
index.js 134B
vite.config.js 520B
package.json 545B
public
favicon.ico 772B
package-lock.json 121KB
index.html 1KB
.gitignore 253B
API
lib
db.js 5KB
app.js 2KB
controller
dbServe.js 3KB
package.json 150B
routes
files.js 764B
index.js 1KB
package-lock.json 64KB
config
wall.sql 3KB
default.js 266B
README.md 2KB
共 64 条
- 1
资源评论
妄北y
- 粉丝: 1w+
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 前端学习笔记,做一个简单的网站-留言板,学习代码
- 前端学习笔记,做一个简单的网站-数组转对象,学习代码
- 前端学习笔记,做一个简单的网站-数组排序,学习代码
- 前端学习笔记,做一个简单的网站-数组去重,学习代码
- 前端学习笔记,做一个简单的网站-数组去0,学习代码
- 前端学习笔记,做一个简单的网站-将class的属性值中的hide更换为show,学习代码
- 前端学习笔记,做一个简单的网站-将class的属性值中的hide更换为show,学习代码
- 前端学习笔记,做一个简单的网站-喇叭花数,学习代码
- 前端学习笔记,做一个简单的网站-利用事件委托的方法,给一个无序列表的列表项添加点击更改背景色事件,学习代码
- LiveDraw 64位
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功