# cntest-front-vue

**Repository Path**: lzh2019/cntest-front-vue

## Basic Information

- **Project Name**: cntest-front-vue
- **Description**: 使用layui-vue开发的轻量spa-admin
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-07
- **Last Updated**: 2024-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Layui-vue, SPA, vue3-options, JavaScript, CSS

## README

# cntest-front-vue

#### 介绍
练习项目,
基于layui-vue的轻量级 spa-admin(单页管理系统),
后端开发中(springboot+MongoDB)

#### 软件架构

> 软件架构 & 功能说明  

1. 主框架: [vue3选项式](https://cn.vuejs.org/guide/introduction.html#api-styles) + [layui-vue](https://www.layui-vue.com/zh-CN/components/color) + js + css
2. http请求库 - [Axios](https://www.axios-http.cn/docs/intro)
3. 路由 - [vueRouter](https://router.vuejs.org/zh/guide/)
4. 状态管理 - [pinia](https://pinia.vuejs.org/zh/introduction.html)
5. Websocket/Stomp消息通信 - stompjs + sockjs-client
6. 前端uuid生成器 - [vue-uuid](https://npm.io/package/vue-uuid)
7. 前端跨域请求库 - [jsonp](https://npm.io/package/jsonp)
8. 前端Md5库 - [js-md5](https://npm.io/package/js-md5)
9. 页面加载进度条 - [nprogress](https://npm.io/package/nprogress)
10. 前端图表库 -  highcharts
11. 音频播放 - [vue3-audio-player](https://npm.io/package/vue3-audio-player)
12. 视频播放 - [longze-vue3-video-player](https://npm.io/package/longze-vue3-video-player)
13. 行政区划组件 - [v-region](https://npm.io/package/v-region)

### 开发/更新记录
1. 登录页 和 home页布局 
2. axios+vite代理转发 
3. 后端-目录，菜单，按钮新增api ,菜单树api
4. mp3音频在线播放
5. m3u8,mp4在线播放
6. add行政区划组件

#### 安装教程

1.  node版本v20.10.0+
2.  推荐使用pnpm

#### 使用说明

1.  开发 pnpm run dev
2.  打包 pnpm run build
3.  预览 pnpm run preview


#### layui-vue的易用组件/实用功能

1. 内置192个icon , 内置全屏按钮功能 , 内置404/500/空数据的UI展示组件 
2. 新特性功能-二维码,条形码,水印
3. 万能弹层-图片相册弹层, 模态/iframe/抽屉/ 成功失败消息展示 / 上下左右通知 / 确认，询问弹窗 /全局loding /填报信息 /最小化最大化 / 尺寸拉伸
4. 常用业务表单-input,单选，多选，文本域，开关，日期选择，级联选择，文件上传，icon选择，评分，滑块
5. 常用UI展示组件- 卡片,时间线, 进度,手风琴折叠面板, 描述列表, 轮播图 ,数字滚动 ,分割面板 ,通告栏 ,标签,选项卡,面板,骨架填充,浮动文字提示
6. 常用数据展示/操作组件- table表格(支持前端导出excel), 分页条, 树
7. 高级UX交互显示/控制组件- 步骤条, 穿梭框 , 虚拟滚动容器


#### 计划添加功能

1. ws/stomp双向消息通信+已读未读消息盒
2. sse单向推送 - 仿chatGPT对话
3. pdf/xlsx/docx预览
4. 音频播放
5. mp4,m3u8视频播放
6. js开启摄像头+webRTC通信
7. js自定义区域截屏
8. 可视化大屏设计器- 指标看板, 指标图表, 地图, xx动效 , T+1更新的指标前端定时轮训, 实时指标ws推送或mqtt订阅
9. 仿百度搜索引擎+搜索提示+数据分页展示+关键词高亮
10. 仿抖音滑动播放短视频
11. 图床+瀑布流式图片展示
12. mqtt消息发布/订阅
13. 前端Form表单设计器 + pc-web前后端代码生成器
14. rbac权限管理
15. 轻量cron定时任务管理 + py脚本导入task / java代码注册task
16. 登录日志, 系统日志, 系统监控
17. 邮件发送, 短信发送, 安卓通知推送
18. 富文本编辑器 , markdown编辑器 , 代码编辑器

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)