# guohua_web
**Repository Path**: abcdfdewrw/guohua_web
## Basic Information
- **Project Name**: guohua_web
- **Description**: 国画介绍网，基于vue，nodeJS全栈实现，该项目主要分为两种角色，即用户和管理员，用户可以浏览国画详情页，国画文章点赞，国画文章评 论，文章搜索。管理员有文章管理，用户管理，评论管理，文章数据可视化，个人中心。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-05
- **Last Updated**: 2023-05-30
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# guohua-web
#### 介绍
国画介绍网
技术：vue-router、axios、Element-UI、vue-cli、Echarts、NodeJS、MySQL
基于Vue，NodeJS开发的全栈项目，其中管理员修改信息有用到一点Springboot代码，但不多，主要还是Vue+nodeJS。该项目主要分为两种角色，即用户和管理员，用户可以浏览国画详情页，国画文章点赞，国画文章评 论，文章搜索。管理员有文章管理，用户管理，评论管理，文章数据可视化，个人中心。
#### 软件架构
backend文件夹，实现个人中心功能（管理员可以修改信息）
Craw文件，实现爬虫数据，主要爬取 [国画_国画_国画图片- 国风网 (zhongguofeng.com)](https://www.zhongguofeng.com/guohua/) 该网址
china_culture_network.sql文件，项目所用到的数据库
#### 安装教程
1. 使用IDEA启动backend文件夹中的 \src\mainyjava\com\example\backend\BackendApplication.java
2. 把 china_culture_network.sql 导入数据库，这里使用的是mysql
3. 用VScode打开整个项目guohua_web
在终端中输入 `npm run serve`;
启动服务器 `cd server`, `nodemon app.js`
#### 使用说明
功能：
【登录】：首先判断是否为管理员登录，如果是就把用户名存入到sessionStorage中去，并且把token设置为true，意味着登录成功；如果是用户登录也把用户名存入到sessionStorage中去，并且把token设置为true，意味着登录成功；
用户：
【文章详情页】：当用户点击文字列表（AtricleInfo.vue），与此同时阅读量+1，接着params传参到文章详情页（ArticleDetail）
【点赞】（axios发送请求获取数据重新渲染）：刚开始，我们会根据文章的ID去进行查询，初始化点赞数；然后，我们进行点赞和取消点赞的时候，同时会牵扯点赞图片的切换（this.flag=!this.flag）、点赞的状态（thumbs_up 0和1）的切换和点赞数量的加减；之后，我们再把更新的状态（用户名，文章ID，thumbs_up）插入到数据库中
【评论】：首先，从后台搜索评论，渲染到页面；然后 发布评论 的时候，先把数据插入到数据库中，之后再调用渲染方法显示；删除评论的话，你点击的那行评论的name必须与你在sessionStorage中的name要一致你才可以删除，否则就是没有权力删除.
管理员：
【后台中心】（Echarts）：使用Echarts统计前七天的评论数和点赞量，自己封装日期库。
注意：闰年和平年，前七天，可能会有些其他月份的天数，注意边界
【用户信息】【文章信息】【评论信息】（Element-UI）：Element-UI表格和分页
【文章上传】：Element-UI表单
【个人中心】：调用接口进行修改管理员账户和密码
#### 部分截图
图片上传到gitee上不知道咋看不了，可以在README.assets文件中查看
登录页面
用户界面
管理员界面
注册界面
文章详情页
评论界面
用户信息界面
