1
This commit is contained in:
parent
504fd4010a
commit
5393c1b6e2
132
README.md
132
README.md
@ -1,39 +1,8 @@
|
||||
<p align="center">
|
||||
<img src="https://pic4.zhimg.com/v2-702a23ebb518199355099df77a3cfe07_b.webp" width="200" height="200" />
|
||||
</p>
|
||||
|
||||
<h1 align="center">KOI-UI🌻</h1>
|
||||
|
||||
<p align="center">一款<b>开箱即用</b>的 Vue3 中后台管理系统框架[纯前端]</p>
|
||||
|
||||
<p align="center">
|
||||
<span> [ </span>
|
||||
纯前端演示[开源]
|
||||
<a href="http://39.107.143.109/login" target="_blank">点击这里</a>
|
||||
<span> ] </span>
|
||||
<p>
|
||||
|
||||
<p align="center">
|
||||
<span> [ </span>
|
||||
前后端演示[129元]
|
||||
<a href="http://39.107.143.109/login" target="_blank">点击这里</a>
|
||||
<span> ] </span>
|
||||
<p>
|
||||
|
||||
<p align="center">
|
||||
<span> [ </span>
|
||||
博客演示[269元]
|
||||
<a href="http://39.107.143.109:8188/home/index" target="_blank">点击这里</a>
|
||||
<span> ] </span>
|
||||
<p>
|
||||
|
||||
前后端版本模版[129元]：SpringBoot3、JDK17、Sa-Token等技术；
|
||||
博客版本[269元]：博客 + 管理平台；
|
||||
|
||||
## 1、简介
|
||||
|
||||
KOI-UI🌻 是一款开源企业级别的中后台管理平台模板，基于 Vue3、Vite、TypeScript、Pinia、Pinia持久化插件、Unocss 和 ElementPlus等前端最新技术栈。相较于其他比较流行的后台管理模板，更加简洁、快捷和容易理解，对萌新小白十分友好。此项目学习成本非常低含有相关代码注释以及大量的案例，非常适合企业级项目、中小型项目、个人项目以及毕业设计。后续将用户、角色、菜单、字典管理和通用管理平台页面依次编写，做到直接对接后端接口即可，使之快速开发。常见的组件有小伙伴提供可提issus会依次封装进去展示。
|
||||
|
||||
## 2、特点
|
||||
|
||||
- 🎯 使用 Element Plus + Vite + Vue3 + TypeScript + Uncoss + Pinia 等主流技术。
|
||||
@ -52,81 +21,6 @@ KOI-UI🌻 是一款开源企业级别的中后台管理平台模板，基于 Vu
|
||||
- 👻 集成 `mock` 接口服务。
|
||||
- 🏡 集成 `iconify` 图标，支持自定义 svg 图标, 优雅使用icon。
|
||||
|
||||
## 3、无需递归路由
|
||||
|
||||
众所周知，在实现左侧无限递归路由的时候，后端需要进行树形递归，前端再二次进行递归处理，这样增加了前后端开发难度，如何解决如下？
|
||||
|
||||
此项目，前端使用扁平化路由，实现三级及以上页面依旧存在路由缓存效果。
|
||||
|
||||
后端提供接口菜单不需要再进行递归，直接根据提供的json格式，进行提供接口[数据如下]，简化后端难度，实现无限递归路由。
|
||||
|
||||
```properties
|
||||
{
|
||||
"status": 200,
|
||||
"msg": "SUCCESS",
|
||||
"data": [
|
||||
{
|
||||
"menuId": 1,
|
||||
"menuName": "系统管理",
|
||||
"parentId": 0,
|
||||
"menuType": "1",
|
||||
"path": "/system",
|
||||
"name": "systemPage",
|
||||
"component": "",
|
||||
"icon": "Tools",
|
||||
"isHide": "1",
|
||||
"isLink": "",
|
||||
"isKeepAlive": "0",
|
||||
"isFull": "1",
|
||||
"isAffix": "1",
|
||||
"redirect": "/system/user"
|
||||
},
|
||||
{
|
||||
"menuId": 11,
|
||||
"menuName": "用户管理",
|
||||
"parentId": 1,
|
||||
"menuType": "2",
|
||||
"path": "/system/user",
|
||||
"name": "userPage",
|
||||
"component": "system/user/index",
|
||||
"icon": "UserFilled",
|
||||
"isHide": "1",
|
||||
"isLink": "",
|
||||
"isKeepAlive": "0",
|
||||
"isFull": "1",
|
||||
"isAffix": "1",
|
||||
"redirect": ""
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 4、预览
|
||||
|
||||
> 预览截图
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="https://gitee.com/BigCatHome/koi-photo/raw/master/photos/KOI-ADMIN/KOI1.png" /></td>
|
||||
<td><img src="https://gitee.com/BigCatHome/koi-photo/raw/master/photos/KOI-ADMIN/KOI2.png" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="https://gitee.com/BigCatHome/koi-photo/raw/master/photos/KOI-ADMIN/KOI3.png" /></td>
|
||||
<td><img src="https://gitee.com/BigCatHome/koi-photo/raw/master/photos/KOI-ADMIN/KOI4.png" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="https://gitee.com/BigCatHome/koi-photo/raw/master/photos/KOI-ADMIN/KOI5.png" /></td>
|
||||
<td><img src="https://gitee.com/BigCatHome/koi-photo/raw/master/photos/KOI-ADMIN/KOI6.png" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="https://gitee.com/BigCatHome/koi-photo/raw/master/photos/KOI-ADMIN/KOI7.png" /></td>
|
||||
<td><img src="https://gitee.com/BigCatHome/koi-photo/raw/master/photos/KOI-ADMIN/KOI8.png" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## 5、支持
|
||||
|
||||
如果觉得 KOI-ADMIN🌻这个框架不错，或者已经在使用了，希望你可以在 **Github** 或者 **Gitee(码云)** 帮我点个 ⭐ ，这将对我是极大的鼓励。
|
||||
|
||||
## 6、快速开始
|
||||
|
||||
```properties
|
||||
@ -146,29 +40,3 @@ pnpm build
|
||||
# 生产环境
|
||||
pnpm build:prod
|
||||
```
|
||||
|
||||
## 8、源码
|
||||
|
||||
<p align="left">
|
||||
<span> [ </span>
|
||||
Gitee仓库
|
||||
<a href="https://gitee.com/BigCatHome/koi-ui.git" target="_blank">点击这里</a>
|
||||
<span> ] </span>
|
||||
<p>
|
||||
<p align="left">
|
||||
<span> [ </span>
|
||||
GitHub仓库
|
||||
<a href="https://github.com/yuxintao6/koi-ui.git" target="_blank">点击这里</a>
|
||||
<span> ] </span>
|
||||
<p>
|
||||
|
||||
## 9、入群交流
|
||||
|
||||
> 注意：加微信方式时记得添加备注：KOI-UI，支持知识付费。
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="https://gitee.com/BigCatHome/koi-photo/raw/master/photos/KOI-ADMIN/WeChat.png"/></td>
|
||||
<td><img src="https://gitee.com/BigCatHome/koi-photo/raw/master/photos/KOI-ADMIN/WeChatPay.png"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user