223 lines
3.9 KiB
Markdown
223 lines
3.9 KiB
Markdown
<h2 align="center"> Vue后台开发流程</h2>
|
||
|
||
|
||
|
||
## 🎉优势
|
||
|
||
1. 前台系统不用编写登录、授权、认证模块；只负责编写业务模块即可
|
||
2. 后台系统无需任何二次开发，直接发布即可使用
|
||
3. 前台与后台系统分离，分别为不同的系统（域名可独立）
|
||
4. 全局异常统一处理
|
||
5. 自定义的代码生成功能
|
||
6. 国际化
|
||
|
||
|
||
|
||
## 🍁前端运行
|
||
|
||
```bash
|
||
# 进入项目vue目录
|
||
cd ARW-vue-main
|
||
|
||
# 安装依赖
|
||
npm i
|
||
|
||
# 启动服务
|
||
npm run dev
|
||
|
||
# 前端访问地址 http://localhost:8887
|
||
```
|
||
|
||
确保**后端**的服务已启动：
|
||
|
||
|
||
|
||
|
||
|
||
**账号：**
|
||
|
||
- 管理员：admin
|
||
- 密 码：123456
|
||
|
||
|
||
|
||
------
|
||
|
||
## ✨ 开发流程
|
||
|
||
点击这里查看 (文档)[http://www.izhaorui.cn/doc/frontend.html#%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83]
|
||
|
||
|
||
|
||
### 1、新增 view
|
||
|
||
> 在 `src/views/business` 文件下 创建对应的文件夹，
|
||
>
|
||
> 一般性一个路由对应一个文件，
|
||
>
|
||
> 各个功能模块维护自己的 utils 或 components 组件。
|
||
|
||
**Tip：可以复制粘贴，修改字段，删除不需要的字段或按钮即可**
|
||
|
||
示例：添加`学校管理(一级目录)`下的 `班级管理(二级菜单)`
|
||
|
||
|
||
|
||
|
||
|
||
```json
|
||
# 具体功能可以参考 模板页面 `class/index(简易版)` | `student/index(具体功能版)`
|
||
|
||
// 搜索框
|
||
// 功能按钮(添加、删除)
|
||
// 表格渲染
|
||
// 弹窗
|
||
|
||
# 修改 api 接口位置
|
||
import { xxxList, delxxx } from '@/api/business/xxx模块/xxx.js'
|
||
```
|
||
|
||
|
||
|
||
------
|
||
|
||
|
||
|
||
### 2、弹窗组件
|
||
|
||
|
||
|
||
* 添加
|
||
* 修改
|
||
* 详情
|
||
|
||
```js
|
||
# 修改 api 接口位置
|
||
import { xxxList, delxxx } from '@/api/business/xxx模块/xxx.js'
|
||
```
|
||
|
||
|
||
|
||
> 报表主要几个核心功能：
|
||
>
|
||
> 输入框
|
||
>
|
||
> 下拉框
|
||
>
|
||
> 字典选项
|
||
>
|
||
> 标签
|
||
>
|
||
> json
|
||
>
|
||
> 图片
|
||
>
|
||
> 富文本
|
||
>
|
||
> 弹窗
|
||
|
||
```json
|
||
// 具体操作请看模板
|
||
```
|
||
|
||
|
||
|
||
------
|
||
|
||
|
||
|
||
### 3、新增 api
|
||
|
||
在 `src/api/business `文件夹下创建本模块对应的 api 服务。
|
||
|
||
|
||
|
||
```js
|
||
# 其中一个请求示例，修改 url请求地址 和 method请求方法
|
||
|
||
// 查询列表
|
||
export function classList(query) {
|
||
return request({
|
||
url: '/business/class/GetClassList',
|
||
method: 'get',
|
||
params: query
|
||
})
|
||
}
|
||
```
|
||
|
||
|
||
|
||
------
|
||
|
||
|
||
|
||
### 4、添加菜单
|
||
|
||
打开 `系统管理` 的 `菜单管理` **点击新增按钮**
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
# 因为需要做 `权限管理` 所有使用的是权限字符
|
||
```
|
||
|
||
|
||
|
||
```
|
||
# 使用了权限字符，就要给对应的按钮，添加权限字符(与后端沟通，或者看任务表)
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
------
|
||
|
||
|
||
|
||
### 5、查看接口数据
|
||
|
||
[Swagger官网教程](https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/web-api-help-pages-using-swagger?view=aspnetcore-5.0)
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
## ⚙ 参数修改
|
||
|
||
项目标题： 在 `.env` 中的 `VITE_APP_TITLE`。
|
||
|
||
主题颜色：在 `src` 中的 `settings.js` 里面有后台的主题参数。
|
||
|
||
或者直接在后台修改~
|
||
|
||
|
||
|
||
|