观前提醒：源码、数据库、实验报告在文末
该Web小型软件系统是基于图片分享的模仿微博社交平台，用户在里面可查看别人分享的内容，同时也可以发布自己的内容。在浏览分享的帖子中，用户可以进行点赞、评论、收藏等操作。用户在个人中心界面可修改个人信息、修改已分享内容的权限（是否可点赞、评论）、查看已经收藏的内容。管理员还可以登陆后台管理系统禁止或重新允许注册用户进行分享内容。
1.总体设计⽅案.
1.1 首页：所有用户可访问，在这里也预览所有用户分享的内容，同时还有点赞榜、最近发布的内容。通过点击分享的帖子可跳转到详情页面，点击个人头像可跳到个人中心，如果是管理员还可以点击相关的按钮跳转到后台管理系统。
1.2 内容详情页面：用户可在这看到帖子的所有内容，同时还可以进行点赞、搜藏、评论以及回复评论的操作
1.3 个人中心页面：用户可修改个人信息（头像、邮箱、密码），修改自己发布内容的权限（是否可点赞、评论、查看）、发布自己的内容、查看自己收藏的分享
1.4 后台管理系统页面：该页面只有管理员才可以访问，管理员可以禁止或重新允许注册用户进行分享内容。
技术栈：Mysql+Vue+Nodejs+ElementUI+echarts
主要运行截图：
用户注册：
上传头像（不超过60kb）：
个人页面：
用户密码默认123456
管理员账号：admin 密码：123456
普通用户账号1：user 密码：123456
普通用户账号2：user1密码：123456
普通用户账号3：123456密码：123456
主界面：允许用户点赞、评论、收藏，含点赞榜、最新话题
允许二级评论
搜索关键词“美丽”
管理员界面：（blog_users表中is_admin置为1）
设置用户身份、是否允许分享
实验报告部分截图和内容：
软件系统采用前后端分离方式：
（一）前端：
1、dist —— 项目构建打包后的默认输出目录。
dist文件夹在新建项目中一开始并不会存在。只有当你执行过一次构建命令（build）后，才会创建。它的内部目录结构为：
├── dist //项目构建后的输出目录
│ └── css
│ └── img
│ └── js
│ └── index.html // 项目主入口文件
│ └── … // 其他公共资源
2、node_modules —— 项目依赖文件，其中包括很多基础依赖和自己安装的依赖。
├── node_modules
│ └── …
3、public —— 存放公共资源和项目的主入口文件index.html。public文件夹中存放的是项目公共资源。比如网站LOGO等，还会有项目的主入口文件index.html。通常我们不需要对public文件夹内的资源做任何修改。
├── public
│ └── index.html // 项目主入口文件
│ └── … // 其他公共资源
4、src —— 项目核心文件夹：包括项目源码，各种静态资源等等。是我们开发的重点工作目录。
├── src
│ └── assets //静态资源
│ └── components //公共组件
│ └── plugins //插件资源
│ └── router //路由配置
│ └── store //vuex文件
│ └── views //视图组件
│ └── App.vue //根组件
│ └── main.js //入口文件
5、.gitignore —— Git上传时需要忽略的文件目录；
6、package-lock.json —— 版本管理使用的文件；
7、package.json —— 项目的基本配置信息文件，包括各种插件，依赖以及某些依赖的详细配置等；
8、README.md —— 项目的描述文件。
整个vue脚手架目录为：
├── dist //项目构建后的输出目录
├── node_modules
│ └── … // 各类依赖
├── public
│ └── index.html // 项目主入口文件
│ └── … // 其他公共资源
├── src
│ └── assets //静态资源
│ └── logo.png
│ └── components //公共组件
│ └── HelloWorld.vue
│ └── plugins //插件资源
│ └── axios.js
│ └── router //路由配置
│ └── index.js
│ └── store //vuex文件
│ └── index.js
│ └── views //视图组件
│ └── About.vue
│ └── Home.vue
│ └── App.vue //根组件
│ └── main.js //入口文件
├── tests //选装：测试模块
├── .gitignore //Git上传时需要忽略的文件列表
├── package-lock.json //版本管理使用的文件
├── package.json //项目的基本配置信息文件
├── README.md //项目的描述文件
├── … //其他依赖的独立配置信息文件
后端接口举例：
- 注册
简要描述：
· 用户注册接口
请求URL：
· /api/regUser
请求方式：
· POST
返回示例：
{
“status”: 1,
“message”: “注册成功”
} - 登录
简要描述：
· 用户登录接口
请求URL：
· /api/login
请求方式：
· POST
返回示例：
{
“status”: 1,
“message”: “登录成功”,
“token”: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwidXNlcm5hbWUiOiJUd2lsaWdodCIsInBhc3N3b3JkIjoiIiwibmlja25hbWUiOiLlirPln4PlvrfCt-emj-adsCIsImVtYWlsIjpudWxsLCJhdmF0YXIiOiIiLCJpc19zaGFyZSI6MSwiaXNfYWRtaW4iOjAsImlhdCI6MTY1MTg0OTUwOCwiZXhwIjoxNjUxODg1NTA4fQ.suBEHiyCLuDFDGrGWrteoW6zSLhhQxhdrLwNUeeH-TM"
} - 获取分享列表
简要描述：
· 获取分享列表
请求URL：
· api/article/list
请求方式：
· GET
Header:
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwidXNlcm5hbWUiOiJUd2lsaWdodCIsInBhc3N3b3JkIjoiIiwibmlja25hbWUiOiLlirPln4PlvrfCt-emj-adsCIsImVtYWlsIjpudWxsLCJhdmF0YXIiOiIiLCJpc19zaGFyZSI6MSwiaXNfYWRtaW4iOjAsImlhdCI6MTY1MTg0OTUwOCwiZXhwIjoxNjUxODg1NTA4fQ.suBEHiyCLuDFDGrGWrteoW6zSLhhQxhdrLwNUeeH-TM
URL参数：
· 无
返回示例：
{
“status”: 1,
“message”: “获取分享列表成功”,
“data”: [
{
“id”: 4,
“user_id”: 3,
“content”: “骸骨骑士大人奇幻世界冒险中”,
“pictures”: “\uploads\upload_file-1651748956331;\uploads\upload_file-1651748956350”,
“pub_date”: “2022-05-05 19:09:16.358”,
“view_num”: 0,
“like_num”: 1,
“comment_num”: 2,
“is_view”: 1,
“is_like”: 1,
“is_comment”: 1,
“is_delete”: 0
},
{
“id”: 5,
“user_id”: 3,
“content”: “间谍过家家”,
“pictures”: “\uploads\upload_file-1651827732307;\uploads\upload_file-1651827732328”,
“pub_date”: “2022-05-06 17:02:12.350”,
“view_num”: 0,
“like_num”: 0,
“comment_num”: 0,
“is_view”: 1,
“is_like”: 1,
“is_comment”: 1,
“is_delete”: 0
}
]
}
运行教程：
（建议先启动后端，再启动前端）
1.数据库是导入
登录数据库，打开sqlyog,建立好连接后，创建数据库blog_db
选择执行sql脚本
执行成功
2.后端启动教程
打开文件夹
打开serve文件夹
依赖已经有了，所以直接node app.js启动后端项目即可
3.前端启动教程：
输入npm i less -loader@5 less安装less
输入npm i安装依赖
输入npm run serve跑起来
复制链接到浏览器打开即可
源码、数据库获取：
百度云链接：https://pan.baidu.com/s/13ewwWQi38uW4hfuKSn7w4w?pwd=ni75
提取码：ni75
链接失效也可以添加cynm-2233获取，码字不易，别忘了点赞~~