# WebProgram **Repository Path**: woodcutter-plum/web-program ## Basic Information - **Project Name**: WebProgram - **Description**: Web程序开发项目，全球新闻管理系统，5人协作！ - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2022-05-30 - **Last Updated**: 2022-08-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: React, Echarts ## README # 全球新闻管理系统（偏向前端） --- ## 前端技术栈 HTML5+CSS3+JavaScript+React+Antd组件库+axios(第三方请求插件）+tsparticles+React-Redux+echarts(图表) ## 后端使用插件json-server，本地代理服务器启动。 --- # 如何启动项目 web-program文件夹下使用npm install命令下载对应依赖 ## 安装JsonServer npm install json-server ## src中jsonserver文件夹下执行 json-server --watch .\db.json --port 5000 (此操作在localhost5000下创建后端模拟数据，注意：5000不可更改！） ## `npm start` 执行npm start,将在localhost:3000（默认端口）上启动项目 # 分组 ## 分组成员 组长：李樵。 组员：蒋楠，高锋，梁彬，嵇汇顺。 ## 组员分工： 详情请见文件：web课设第四小组.xlsx --- # 功能模块 ## 登录模块 tsparticles粒子效果插件+Ant Design组件库实现登录页面（背景动态粒子效果）! ![tsparticles+Antd组件库实现登录页面!](https://gitee.com/woodcutter-plum/React-Program-01/raw/master/imagestore/login.png) ## 注册模块 提供用户注册功能注册成功自动跳转登录页。 ![注册页面](https://gitee.com/woodcutter-plum/web-program/raw/master/imagestore/register.png) ## 首页 首页对上线的新闻提供可视化的数据管理：左上角新闻链接，右侧echarts饼图，下侧echarts注状图 ![首页](https://gitee.com/woodcutter-plum/React-Program-01/raw/master/imagestore/home.png) ![首页echarts实现数据可视化](https://gitee.com/woodcutter-plum/React-Program-01/raw/master/imagestore/echart.png) --- ## 权限管理模块 ### 角色列表 查看系统中所有角色，删除或编辑角色！ ![用户列表页面展示!](https://gitee.com/woodcutter-plum/React-Program-01/raw/master/imagestore/userlist.png) ### 权限列表 查看系统中所有权限列表，不同角色左侧menu菜单渲染不同，删除或分配权限 ![](https://gitee.com/woodcutter-plum/web-program/raw/master/imagestore/roles.png) --- ## 新闻管理模块 ### 草稿箱 查看自己已撰写的新闻，修改或删除它或者提交审核。 ### 新闻撰写 分步骤撰写新闻使用antd分步器做的。 ![撰写新闻展示](https://gitee.com/woodcutter-plum/React-Program-01/raw/master/imagestore/newsmanage.png) ### 新闻分类 查看新闻的不同分类，删除或修改分类 ## 用户管理模块 ### 用户列表 查看系统中所有注册的用户，并且可修改用户的账号密码。 ![](https://gitee.com/woodcutter-plum/web-program/raw/master/imagestore/userlist.png) ## 审核管理模块 ### 审核新闻 由上级的管理员审核下级的区域编辑的发布的新闻。 ![](https://gitee.com/woodcutter-plum/web-program/raw/master/imagestore/shenhe.png) ### 审核列表 可以查看正在审核中的新闻，允许上线或者打回不通过。 ## 发布管理模块 ### 待发布 查看通过审核等待发布的新闻列表，可以提供发布的功能。 ### 已发布 查看已发布的新闻列表，可以将已发布的新闻下线或直接删除。 ![已发布页面展示!](https://gitee.com/woodcutter-plum/React-Program-01/raw/master/imagestore/sunset.png) ### 已下线 查看已经下线的新闻列表，已下线的新闻可以提供删除功能或者重新上线。 # 测试 ## 测试用例 ### 1.项目页面按钮的主要功能，包括查询，添加，修改，删除。 ### 2.菜单折叠，路由跳转用例测试。 ### 3.权限分配，不同用户菜单不显示，路由无权限访问测试用例。 ### 4.页面显示是否均正常。 ### 5.前后端接口通信是否异常。400/500？ ### 6.全局状态管理loading是否有异常显示。 ### 7.各部分功能实现是否完整。 ### 8.用户能否正常登录/注册 ### 9.可视化组件数据显示是否异常 ## 用例检测结果及是否解决 ### 1.用户列表中超级管理员禁用操作不可点击，需求：若不可点击，直接删除此按钮（不显示此按钮）（李樵已解决） ### 2.编辑按钮弹框时无法正确带入table表格中的值：需求：正常打开modal时传入表格中的数据，不需要用户手动填入。（李樵已解决） ### 3.添加用户接口报400，：需求：正常请求添加用户（李樵已解决） ### 4.tree控件中的多选单选不能联合控制：需求：能够联合控制，全选框取消勾选时子集自动取消勾选。（李樵已解决） ### 5.点击发布时会自动跳转到已发布列表，需求：不跳转到已发布列表，只做出相应的提示。（李樵已解决） ### 6.使用没有权限的用户登录系统，仍然能看到部分不具权限的页面：需求：无权限的用户不能看到对应菜单，且手动输入路由跳转至nopermission页面。（李樵已解决） # 流程图 (持续更新！) ![系统流程图：(持续更新中)](https://gitee.com/woodcutter-plum/web-program/raw/master/modules.png) # ER图 ![ER图](https://gitee.com/woodcutter-plum/web-program/raw/master/imagestore/ERPic.png) # 系统架构图 ![系统架构图](https://gitee.com/woodcutter-plum/web-program/raw/master/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84%E5%9B%BE.jpg) # 系统类图 ![类图](https://gitee.com/woodcutter-plum/web-program/raw/master/%E7%B3%BB%E7%BB%9F%E7%B1%BB%E5%9B%BE%EF%BC%88%E6%96%B0%EF%BC%89.png) # 时序图（用户） ![](https://gitee.com/woodcutter-plum/web-program/raw/master/imagestore/times1.png) # 时序图（管理员） ![](https://gitee.com/woodcutter-plum/web-program/raw/master/imagestore/times2.png) # 分工合作图（小组所有成员） ![](https://gitee.com/woodcutter-plum/web-program/raw/master/imagestore/works.png)