Signed-off-by: odboy <tianjun@odboy.cn>
This commit is contained in:
parent
d4aa1efbf1
commit
3f5eb1d163
101
README.md
101
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)
|
`kenaito-config-front` 是一个基于 Vue.js 和 Element UI
|
||||||
|
的前端项目，主要用于管理和配置Kenaito
|
||||||
模板文档： [https://panjiachen.github.io/vue-element-admin-site/zh/guide/](https://panjiachen.github.io/vue-element-admin-site/zh/guide/)
|
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 |
|
| sortable.js | 拖拽库 | [官方文档](https://sortablejs.github.io/Vue.Draggable/#/simple) |
|
||||||
| vue-treeselect | 下拉树组件 | https://vue-treeselect.js.org/ |
|
| vue-treeselect | 下拉树组件 | [官方文档](https://vue-treeselect.js.org/) |
|
||||||
| wangeditor/editor | 富文本编辑工具 | https://www.wangeditor.com/ |
|
| wangeditor/editor | 富文本编辑工具 | [官方文档](https://www.wangeditor.com/) |
|
||||||
| mavon-editor | 富文本编辑工具 | https://www.jianshu.com/p/fba836bf1499 |
|
| mavon-editor | Markdown 编辑工具 | [官方文档](https://www.jianshu.com/p/fba836bf1499) |
|
||||||
| clipboard | 一键复制 | https://www.jianshu.com/p/0140e7b3f253 |
|
| clipboard | 一键复制 | [官方文档](https://www.jianshu.com/p/0140e7b3f253) |
|
||||||
| vue-codemirror | 代码高亮编辑器 | https://codemirror.net/ |
|
| vue-codemirror | 代码高亮编辑器 | [官方文档](https://codemirror.net/) |
|
||||||
| echarts | 数据可视化图表 | https://echarts.apache.org/zh/index.html |
|
| echarts | 数据可视化图表 | [官方文档](https://echarts.apache.org/zh/index.html) |
|
||||||
| file-saver | 前端导出文件 | https://blog.csdn.net/xyphf/article/details/135146811 |
|
| file-saver | 前端导出文件 | [官方文档](https://blog.csdn.net/xyphf/article/details/135146811) |
|
||||||
| fuse.js | 模糊搜索库 | https://www.jb51.net/javascript/313000abq.htm |
|
| fuse.js | 模糊搜索库 | [官方文档](https://www.jb51.net/javascript/313000abq.htm) |
|
||||||
| jsencrypt | RSA加密和解密 | https://blog.csdn.net/randy521520/article/details/134346184 |
|
| jsencrypt | RSA 加密和解密 | [官方文档](https://blog.csdn.net/randy521520/article/details/134346184) |
|
||||||
| jszip | zip压缩库 | https://www.jb51.net/javascript/3184036rq.htm |
|
| jszip | ZIP 压缩库 | [官方文档](https://www.jb51.net/javascript/3184036rq.htm) |
|
||||||
| nprogress | 页面加载用进度条 | https://blog.csdn.net/qq_31968791/article/details/106790179 |
|
| nprogress | 页面加载进度条 | [官方文档](https://blog.csdn.net/qq_31968791/article/details/106790179) |
|
||||||
| qs | 增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换 | https://www.cnblogs.com/xinlightchaser/p/17721983.html |
|
| qs | 查询字符串解析和序列化库 | [官方文档](https://www.cnblogs.com/xinlightchaser/p/17721983.html) |
|
||||||
| vue-count-to | 数字滚动插件 | https://www.cnblogs.com/duhui/p/10509585.html |
|
| vue-count-to | 数字滚动插件 | [官方文档](https://www.cnblogs.com/duhui/p/10509585.html) |
|
||||||
| vue-cropper | 图片裁剪 | https://www.cnblogs.com/dihongjingyan/p/16401862.html |
|
| vue-cropper | 图片裁剪 | [官方文档](https://www.cnblogs.com/dihongjingyan/p/16401862.html) |
|
||||||
| vue-image-crop-upload | 头像裁剪上传 | https://www.cnblogs.com/luo1240465012/p/15398825.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 |
|
| vue-splitpane | 可拖拽分割面板 | [官方文档](https://www.cnblogs.com/e0yu/p/10906900.html) |
|
||||||
| vuedraggable | 拖拽插件 | https://www.jianshu.com/p/2164378fba35 |
|
| vuedraggable | 拖拽插件 | [官方文档](https://www.jianshu.com/p/2164378fba35) |
|
||||||
|
|
||||||
## Build Setup
|
## 快速开始
|
||||||
|
|
||||||
|
### 环境要求
|
||||||
|
|
||||||
**推荐 node 版本：12-16**
|
**推荐 node 版本：12-16**
|
||||||
|
|
||||||
|
### 安装依赖
|
||||||
|
|
||||||
``` bash
|
``` bash
|
||||||
# 安装依赖
|
# 安装依赖
|
||||||
npm install --registry https://registry.npmmirror.com
|
npm install --registry https://registry.npmmirror.com
|
||||||
|
```
|
||||||
|
|
||||||
|
### 启动服务
|
||||||
|
|
||||||
|
```bash
|
||||||
# 启动服务 localhost:28001
|
# 启动服务 localhost:28001
|
||||||
npm run dev
|
npm run dev
|
||||||
|
|
||||||
|
|
@ -54,6 +63,7 @@ admin/123456
|
||||||
```
|
```
|
||||||
|
|
||||||
## 常见问题的解决方案
|
## 常见问题的解决方案
|
||||||
|
|
||||||
- linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题
|
- linux 系统在安装依赖的时候会出现 node-sass 无法安装的问题
|
||||||
```
|
```
|
||||||
1. 单独安装：npm install --unsafe-perm node-sass
|
1. 单独安装：npm install --unsafe-perm node-sass
|
||||||
|
|
@ -61,7 +71,9 @@ admin/123456
|
||||||
```
|
```
|
||||||
|
|
||||||
## 如何增加子系统模块
|
## 如何增加子系统模块
|
||||||
|
|
||||||
#### 新增子系统请求路径
|
#### 新增子系统请求路径
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
# .env.development
|
# .env.development
|
||||||
VUE_APP_{子系统编码}_BASE_API = 'http://localhost:服务端口号'
|
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_{子系统编码}_BASE_API = 'https://kenaito-api.odboy.cn'
|
||||||
VUE_APP_{子系统编码}_WS_API = 'wss://kenaito-api.odboy.cn'
|
VUE_APP_{子系统编码}_WS_API = 'wss://kenaito-api.odboy.cn'
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 新增代理配置 -> vue.config.js
|
#### 新增代理配置 -> vue.config.js
|
||||||
```js
|
|
||||||
|
```text
|
||||||
module.exports = {
|
module.exports = {
|
||||||
devServer: {
|
devServer: {
|
||||||
proxy: {
|
proxy: {
|
||||||
'/kenaito-{子系统编码}/': {
|
'/kenaito-{子系统编码}/': {
|
||||||
target: process.env.VUE_APP_{子系统编码}_BASE_API,
|
target: process.env.VUE_APP_{子系统编码}_BASE_API,
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: {
|
pathRewrite:{
|
||||||
'^/kenaito-{子系统编码}': '/api/{子系统编码}'
|
'^/kenaito-{子系统编码}': '/api/{子系统编码}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -91,16 +105,20 @@ module.exports = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 新增请求服务类 -> utils/request{子系统编码}.js
|
#### 新增请求服务类 -> utils/request{子系统编码}.js
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
// 关键修改点 baseURL
|
// 关键修改点 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
|
timeout: Config.timeout
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 前端Service -> api（写法1）
|
#### 前端Service -> api（写法1）
|
||||||
```shell
|
|
||||||
|
```text
|
||||||
# 所在路径
|
# 所在路径
|
||||||
/src/api/{子系统编码}/{子模块编码}.js
|
/src/api/{子系统编码}/{子模块编码}.js
|
||||||
|
|
||||||
|
|
@ -117,7 +135,8 @@ export function queryPage(data) {
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 前端Service -> api（写法2）
|
#### 前端Service -> api（写法2）
|
||||||
```shell
|
|
||||||
|
```text
|
||||||
# 所在路径
|
# 所在路径
|
||||||
/src/api/{子系统编码}/{子模块}.js
|
/src/api/{子系统编码}/{子模块}.js
|
||||||
|
|
||||||
|
|
@ -132,7 +151,9 @@ export function queryPage() {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 后端API请求路径 -> controller
|
#### 后端API请求路径 -> controller
|
||||||
|
|
||||||
```java
|
```java
|
||||||
// 可参考后端 kenaito-config-service/src/main/java/cn/odboy/rest/AppController.java 中的 queryPage 方法
|
// 可参考后端 kenaito-config-service/src/main/java/cn/odboy/rest/AppController.java 中的 queryPage 方法
|
||||||
@RestController
|
@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) 联系我。
|
||||||
|
|
@ -23,3 +23,12 @@ export function remove(data) {
|
||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function queryClientList(data) {
|
||||||
|
return request({
|
||||||
|
url: 'kenaito-config/app/queryClientList',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -59,6 +59,19 @@
|
||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
<el-card style="margin-top: 10px">
|
||||||
|
<el-table
|
||||||
|
:data="clientListData"
|
||||||
|
>
|
||||||
|
<el-table-column label="IP地址" prop="ip" />
|
||||||
|
<el-table-column label="是否在线" prop="isActive">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag v-if="scope.row.isActive" type="success">online</el-tag>
|
||||||
|
<el-tag v-else type="error">offline</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="16">
|
<el-col :span="16">
|
||||||
<el-card>
|
<el-card>
|
||||||
|
|
@ -113,6 +126,12 @@
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
操作
|
||||||
|
</template>
|
||||||
|
<el-button type="primary">发布</el-button>
|
||||||
|
</el-descriptions-item>
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card style="margin-top: 20px">
|
<el-card style="margin-top: 20px">
|
||||||
|
|
@ -278,7 +297,8 @@ export default {
|
||||||
values: {
|
values: {
|
||||||
file: null
|
file: null
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
clientListData: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -417,12 +437,22 @@ export default {
|
||||||
const _this = this
|
const _this = this
|
||||||
_this.currentEnvCode = envCode
|
_this.currentEnvCode = envCode
|
||||||
const currentRow = _this.currentRow
|
const currentRow = _this.currentRow
|
||||||
configFileService.queryList({
|
if (envCode) {
|
||||||
appId: currentRow.id,
|
// query file list
|
||||||
envCode: envCode
|
configFileService.queryList({
|
||||||
}).then(res => {
|
appId: currentRow.id,
|
||||||
_this.envConfigFileDataSource = res || []
|
envCode: envCode
|
||||||
})
|
}).then(res => {
|
||||||
|
_this.envConfigFileDataSource = res || []
|
||||||
|
})
|
||||||
|
// query client list
|
||||||
|
configAppService.queryClientList({
|
||||||
|
envCode: envCode,
|
||||||
|
appName: currentRow.appName
|
||||||
|
}).then(res => {
|
||||||
|
_this.clientListData = res || []
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// ok
|
// ok
|
||||||
onDeleteEnv() {
|
onDeleteEnv() {
|
||||||
|
|
@ -525,7 +555,9 @@ export default {
|
||||||
})
|
})
|
||||||
}, 2000)
|
}, 2000)
|
||||||
MessageUtil.success(_this, '上传成功')
|
MessageUtil.success(_this, '上传成功')
|
||||||
this.uploadForm.visible = false
|
_this.uploadForm.loading = false
|
||||||
|
_this.uploadForm.values.file = null
|
||||||
|
_this.uploadForm.visible = false
|
||||||
} else {
|
} else {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue