Awesome
Spring-CQ-web-UI
这是Spring-CQ-web的页面。基于Vue框架+Vuetify组件库开发。
框架项目地址:https://github.com/lz1998/spring-cq
后端项目地址:https://github.com/lz1998/spring-cq-web
项目环境
- nodejs 12.16.1
- npm 6.13.4
功能
- 登陆/注册
- 机器人状态监控
- 学习管理
- 欢迎管理
项目设计
src/api
定义了与后端交互的接口
src/assets
用于存放静态文件
src/components
存放项目公用的组件
- myImg 由于vuetify的图片组件不兼容小米浏览器,所以自己写
- cqCodeGenerate 生成酷Q码工具
src/plugins
不知道是啥,文档上说要这样写
src/router
定义vue路由、路由守卫(未登陆自动跳转到登陆)
menuItems是左侧导航栏对应的内容
src/store
没啥用
src/utils
requests是自己封装的发送http请求工具。如果未登录会自动跳转,并在发送请求前、收到响应后,对数据进行初步处理。
src/views
定义了各个页面。
- login 登陆页面
- layout 布局,包含顶部和左侧导航栏
- status 机器人状态监控
- learnManage 学习管理
- welcomeManage 欢迎管理
.env
设置后端地址
接口设计
详情看后端Controller
登陆
地址:/api/security/login
参数:用户名/密码
返回:正确token,错误验证码
查询状态
地址:/api/bot/getStatus
Header:'Bearer '+token
查询学习
地址:/api/learn/getGroupLearnPage
Header:'Bearer '+token
修改学习
地址:/api/learn/setGroupLearn
Header:'Bearer '+token
删除学习
地址:/api/learn/deleteGroupLearn
Header:'Bearer '+token
查询欢迎
地址:/api/welcome/getWelcome
Header:'Bearer '+token
修改欢迎
地址:/api/welcome/setWelcome
Header:'Bearer '+token
运行部署
安装所需依赖
npm install
运行 开发调试
npm run serve
打包静态文件
npm run build
结果在dist文件夹,复制到后端的static文件夹中