校园社交网站(PC端)

项目介绍

校园社交网站是一个前后端分离的项目，项目采用Vue+Node+Mysql，elementUI组件库开发。
在这里插入图片描述

项目技术栈

前端技术栈

1. vue
2. elementUI
3. axios
4. vue-router
5. WebSocket
6. vue-cli
7. Echarts
8. …

后端技术栈

1. node
2. MySQL
3. WebSocket
4. node-schedule(计时器)
5. async
6. axios(爬虫)

• 项目地址：有偿提供

• 项目介绍视频

注意：node版本须在14.19.**以下,16版本npm安装会报错
链接地址

前端项目运行（nodejs 6.0+）

# 克隆到本地
git clone 项目地址

# 安装依赖
npm install 或 yarn(推荐)

# 开启本地服务器localhost:8080
npm run dev

# 发布环境
npm run build

效果演示

演示地址（请用PC端打开）

功能如下

登录注册

• 登录：用户输入账号和密码，点击登录
• 注册：用户依次填写信息(账号、密码->姓名、身份证号、性别、出生年月、所在地->上传头像、学校、专业、年级、个性签名)，点击注册

个人信息

• 展示个人信息：点击头像，展示个人信息
• 修改个人信息：点击修改
• 退出登录：点击退出登录

校内服务

由于尝试访问学校后台失败，只能做一个静态页面了😩😩

• 个人课程表：点击课程表，展示个人课程表(每节课的背景颜色随机生成)
• 考试信息：点击考试信息列表，支持模糊查询，考试状态包括(未开始、已结束)
• 考试成绩：点击考试成绩，支持模糊查询，低于60分红色标识

管理员权限

• 发布通知：输入题目和内容(可输入链接)，可重置
• 授予权限：支持用户id模糊查询，可删除用户、设置用户为管理员、查看用户部分信息
• 数据分析：
      - 用户分布图：显示全国用户分布图，各省份用户人数
      - 学校数据柱状图：选择省份，显示省份下的各学校注册用户人数
      - 在线人数折线图：统计每天用户在线人数

通知

• 系统通知：显示管理员发布的通知
• 收到的赞：个人动态收到的赞的通知(显示动态内容)
• 评论：研发中…
• 好友验证：研发中…

动态

• 展示动态列表：
      - 点赞：点击点赞图标，点赞列表更新
      - 评论：点击评论图标，输入内容(可选择添加表情)，评论列表更新
      - 转发：点击转发图标，动态列表更新
      - 删除：点击删除图标，动态列表(更新此动态为该用户自己发布的，才会有删除图标)
• 好友列表：
      - 查找好友：点击放大镜图标，输入用户id
      - 添加好友：点击加号图标，输入用户id，点击添加，输入验证信息发送，对方实时收到好友验证通知，对方反馈信息，自己实时收到对方反馈信息
      - 删除好友：在还有列表中，鼠标移到该用户id上，点击删除，刷新好友列表
• 动态主题(通过花瓣网爬取图片)
      - 显示背景主题：通过懒加载，背景主题列表默认显示电脑壁纸
      - 搜索背景主题：通过输入框搜索背景图片，通过爬取花瓣网可获得图片信息
      - 选择背景主题：在背景主题列表中选择主题图片，同时当前选择的主题图片禁选，选择后，跳转到动态页面

聊天

聊天时，好友向该用户发信息时，好友会置顶，标记未读

• 好友聊天：
      - 显示聊天记录：显示聊天记录，可点击文件进行下载
      - 发送聊天内容：可输入表情、发送图片、发送文件
      - 收藏聊天内容：鼠标移到某聊天内容上，出现提示是否收藏，点击即可收藏
• 群聊：
      - 创建群聊：输入群名，选择群成员(来自好友)
      - 显示群成员：显示群成员
      - 显示文件列表：显示群文件，同时显示文件大小，点击可下载
      - 删除群成员(为群主) ：若为群主，可点击删除图标，删除群成员
• 收藏：显示收藏的聊天记录
• 文件：显示聊天中所有文件信息，发布者头像，id，文件名，文件类型，文件大小，发布文件时间，来源(包括好友和群)，方便下载