From 3f5eb1d163c971c582f2264a7ae39fe9197c04e7 Mon Sep 17 00:00:00 2001 From: odboy Date: Wed, 11 Dec 2024 20:57:33 +0800 Subject: [PATCH] Signed-off-by: odboy --- README.md | 103 ++++++++++++++++++++---------- src/api/config/configApp.js | 9 +++ src/views/config-center/index.vue | 48 +++++++++++--- 3 files changed, 120 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 9a0c3c0..97d9aea 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,51 @@ -# kenaito-config-front +# Kenaito Config Front -## 前端模板 +## 项目简介 -初始模板基于： [https://github.com/PanJiaChen/vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) - -模板文档： [https://panjiachen.github.io/vue-element-admin-site/zh/guide/](https://panjiachen.github.io/vue-element-admin-site/zh/guide/) +`kenaito-config-front` 是一个基于 Vue.js 和 Element UI +的前端项目，主要用于管理和配置Kenaito +Config系统。初始模板基于 [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) +，详细文档可参考 [官方文档](https://panjiachen.github.io/vue-element-admin-site/zh/guide/)。 ## 依赖组件 -| 名称 | 功能 | 官网地址 | -|-----------------------|---------------------------------------------|--------------------------------------------------------------| -| sortable.js | js拖拽库 | https://sortablejs.github.io/Vue.Draggable/#/simple | -| vue-treeselect | 下拉树组件 | https://vue-treeselect.js.org/ | -| wangeditor/editor | 富文本编辑工具 | https://www.wangeditor.com/ | -| mavon-editor | 富文本编辑工具 | https://www.jianshu.com/p/fba836bf1499 | -| clipboard | 一键复制 | https://www.jianshu.com/p/0140e7b3f253 | -| vue-codemirror | 代码高亮编辑器 | https://codemirror.net/ | -| echarts | 数据可视化图表 | https://echarts.apache.org/zh/index.html | -| file-saver | 前端导出文件 | https://blog.csdn.net/xyphf/article/details/135146811 | -| fuse.js | 模糊搜索库 | https://www.jb51.net/javascript/313000abq.htm | -| jsencrypt | RSA加密和解密 | https://blog.csdn.net/randy521520/article/details/134346184 | -| jszip | zip压缩库 | https://www.jb51.net/javascript/3184036rq.htm | -| nprogress | 页面加载用进度条 | https://blog.csdn.net/qq_31968791/article/details/106790179 | -| qs | 增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换 | https://www.cnblogs.com/xinlightchaser/p/17721983.html | -| vue-count-to | 数字滚动插件 | https://www.cnblogs.com/duhui/p/10509585.html | -| vue-cropper | 图片裁剪 | https://www.cnblogs.com/dihongjingyan/p/16401862.html | -| vue-image-crop-upload | 头像裁剪上传 | https://www.cnblogs.com/luo1240465012/p/15398825.html | -| vue-splitpane | 可拖拽分割面板 | https://www.cnblogs.com/e0yu/p/10906900.html?ivk_sa=1024320u | -| vuedraggable | 拖拽插件 | https://www.jianshu.com/p/2164378fba35 | +| 名称 | 功能 | 官方文档 | +|-----------------------|---------------|---------------------------------------------------------------------| +| sortable.js | 拖拽库 | [官方文档](https://sortablejs.github.io/Vue.Draggable/#/simple) | +| vue-treeselect | 下拉树组件 | [官方文档](https://vue-treeselect.js.org/) | +| wangeditor/editor | 富文本编辑工具 | [官方文档](https://www.wangeditor.com/) | +| mavon-editor | Markdown 编辑工具 | [官方文档](https://www.jianshu.com/p/fba836bf1499) | +| clipboard | 一键复制 | [官方文档](https://www.jianshu.com/p/0140e7b3f253) | +| vue-codemirror | 代码高亮编辑器 | [官方文档](https://codemirror.net/) | +| echarts | 数据可视化图表 | [官方文档](https://echarts.apache.org/zh/index.html) | +| file-saver | 前端导出文件 | [官方文档](https://blog.csdn.net/xyphf/article/details/135146811) | +| fuse.js | 模糊搜索库 | [官方文档](https://www.jb51.net/javascript/313000abq.htm) | +| jsencrypt | RSA 加密和解密 | [官方文档](https://blog.csdn.net/randy521520/article/details/134346184) | +| jszip | ZIP 压缩库 | [官方文档](https://www.jb51.net/javascript/3184036rq.htm) | +| nprogress | 页面加载进度条 | [官方文档](https://blog.csdn.net/qq_31968791/article/details/106790179) | +| qs | 查询字符串解析和序列化库 | [官方文档](https://www.cnblogs.com/xinlightchaser/p/17721983.html) | +| vue-count-to | 数字滚动插件 | [官方文档](https://www.cnblogs.com/duhui/p/10509585.html) | +| vue-cropper | 图片裁剪 | [官方文档](https://www.cnblogs.com/dihongjingyan/p/16401862.html) | +| vue-image-crop-upload | 头像裁剪上传 | [官方文档](https://www.cnblogs.com/luo1240465012/p/15398825.html) | +| vue-splitpane | 可拖拽分割面板 | [官方文档](https://www.cnblogs.com/e0yu/p/10906900.html) | +| vuedraggable | 拖拽插件 | [官方文档](https://www.jianshu.com/p/2164378fba35) | -## Build Setup +## 快速开始 + +### 环境要求 **推荐 node 版本：12-16** +### 安装依赖 + ``` bash # 安装依赖 npm install --registry https://registry.npmmirror.com +``` +### 启动服务 + +```bash # 启动服务 localhost:28001 npm run dev @@ -54,14 +63,17 @@ admin/123456 ``` ## 常见问题的解决方案 -- linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题 + +- linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题 ``` 1. 单独安装：npm install --unsafe-perm node-sass 2. 直接使用：npm install --unsafe-perm ``` ## 如何增加子系统模块 + #### 新增子系统请求路径 + ```shell # .env.development VUE_APP_{子系统编码}_BASE_API = 'http://localhost:服务端口号' @@ -75,15 +87,17 @@ VUE_APP_{子系统编码}_WS_API = 'ws://localhost:服务端口号' VUE_APP_{子系统编码}_BASE_API = 'https://kenaito-api.odboy.cn' VUE_APP_{子系统编码}_WS_API = 'wss://kenaito-api.odboy.cn' ``` + #### 新增代理配置 -> vue.config.js -```js + +```text module.exports = { devServer: { proxy: { '/kenaito-{子系统编码}/': { target: process.env.VUE_APP_{子系统编码}_BASE_API, changeOrigin: true, - pathRewrite: { + pathRewrite:{ '^/kenaito-{子系统编码}': '/api/{子系统编码}' } }, @@ -91,16 +105,20 @@ module.exports = { } } ``` + #### 新增请求服务类 -> utils/request{子系统编码}.js + ```js const service = axios.create({ // 关键修改点 baseURL - baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_{子系统编码}_BASE_API : '/', + baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_{子系统编码}_BASE_API: '/', timeout: Config.timeout }) ``` + #### 前端Service -> api（写法1） -```shell + +```text # 所在路径 /src/api/{子系统编码}/{子模块编码}.js @@ -117,7 +135,8 @@ export function queryPage(data) { ``` #### 前端Service -> api（写法2） -```shell + +```text # 所在路径 /src/api/{子系统编码}/{子模块}.js @@ -132,7 +151,9 @@ export function queryPage() { }) } ``` + #### 后端API请求路径 -> controller + ```java // 可参考后端 kenaito-config-service/src/main/java/cn/odboy/rest/AppController.java 中的 queryPage 方法 @RestController @@ -144,3 +165,21 @@ public class AppController { } } ``` + +## 贡献指南 + +欢迎贡献代码！请遵循以下步骤： + +1. **Fork 仓库** +2. **创建新分支**: `git checkout -b feature/your-feature` +3. **提交更改**: `git commit -m 'Add some feature'` +4. **推送分支**: `git push origin feature/your-feature` +5. **发起 Pull Request** + +## 许可证 + +本项目采用 [MIT License](LICENSE) 许可证。 + +## 联系我们 + +如果有任何问题或建议，请通过 [GitHub Issues](https://github.com/odboy-tianjun/kenaito-config-front/issues) 联系我。 \ No newline at end of file diff --git a/src/api/config/configApp.js b/src/api/config/configApp.js index 8443a8b..ed95590 100644 --- a/src/api/config/configApp.js +++ b/src/api/config/configApp.js @@ -23,3 +23,12 @@ export function remove(data) { data: data }) } + +export function queryClientList(data) { + return request({ + url: 'kenaito-config/app/queryClientList', + method: 'post', + data: data + }) +} + diff --git a/src/views/config-center/index.vue b/src/views/config-center/index.vue index 41716e0..7110210 100644 --- a/src/views/config-center/index.vue +++ b/src/views/config-center/index.vue @@ -59,6 +59,19 @@ @current-change="handleCurrentChange" /> + + + + + + + + @@ -113,6 +126,12 @@ /> + + + 发布 + @@ -278,7 +297,8 @@ export default { values: { file: null } - } + }, + clientListData: [] } }, computed: { @@ -417,12 +437,22 @@ export default { const _this = this _this.currentEnvCode = envCode const currentRow = _this.currentRow - configFileService.queryList({ - appId: currentRow.id, - envCode: envCode - }).then(res => { - _this.envConfigFileDataSource = res || [] - }) + if (envCode) { + // query file list + configFileService.queryList({ + appId: currentRow.id, + envCode: envCode + }).then(res => { + _this.envConfigFileDataSource = res || [] + }) + // query client list + configAppService.queryClientList({ + envCode: envCode, + appName: currentRow.appName + }).then(res => { + _this.clientListData = res || [] + }) + } }, // ok onDeleteEnv() { @@ -525,7 +555,9 @@ export default { }) }, 2000) MessageUtil.success(_this, '上传成功') - this.uploadForm.visible = false + _this.uploadForm.loading = false + _this.uploadForm.values.file = null + _this.uploadForm.visible = false } else { return false }