ChatRoomForGpt/ARW-vue-main

Vue后台开发流程

🎉优势

1. 前台系统不用编写登录、授权、认证模块；只负责编写业务模块即可
2. 后台系统无需任何二次开发，直接发布即可使用
3. 前台与后台系统分离，分别为不同的系统（域名可独立）
4. 全局异常统一处理
5. 自定义的代码生成功能
6. 国际化

🍁前端运行

# 进入项目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：可以复制粘贴，修改字段，删除不需要的字段或按钮即可

示例：添加学校管理(一级目录)下的 班级管理(二级菜单)

# 具体功能可以参考 模板页面 `class/index(简易版)` | `student/index(具体功能版)`

// 搜索框
// 功能按钮(添加、删除)
// 表格渲染
// 弹窗

# 修改 api 接口位置
import { xxxList, delxxx } from '@/api/business/xxx模块/xxx.js'

---

2、弹窗组件

• 添加
• 修改
• 详情

# 修改 api 接口位置
import { xxxList, delxxx } from '@/api/business/xxx模块/xxx.js'

报表主要几个核心功能：

输入框

下拉框

字典选项

标签

json

图片

富文本

弹窗

// 具体操作请看模板

---

3、新增 api

在 src/api/business 文件夹下创建本模块对应的 api 服务。

# 其中一个请求示例，修改 url请求地址 和 method请求方法

// 查询列表
export function classList(query) {
  return request({
    url: '/business/class/GetClassList',
    method: 'get',
    params: query
  })
}

---

4、添加菜单

打开 系统管理 的 菜单管理 点击新增按钮

# 因为需要做 `权限管理` 所有使用的是权限字符

# 使用了权限字符，就要给对应的按钮，添加权限字符(与后端沟通，或者看任务表)

---

5、查看接口数据

Swagger官网教程

⚙ 参数修改

项目标题： 在 .env 中的 VITE_APP_TITLE。

主题颜色：在 src 中的 settings.js 里面有后台的主题参数。

或者直接在后台修改~