前端开发框架
当前页

业务开发说明 ​

参考views/upms下的业务代码

当前框架的登录、菜单使用的 mock 数据，mock/sys/user.ts、mock/sys/menu.ts

页面布局系统 ​

采用vite-plugin-vue-layouts插件配置 Layouts

空白布局 ​
  • 作用

通常用来编写登录页面、大屏等不需要菜单布局的页面

  • 用法：
vue
<route lang="yaml">
meta:
	layout: BlankLayout
</route>
  • 示例

src/views/sys/login/index.vue

默认布局 ​
  • 作用

常见的菜单、Header 之类的页面

  • 用法

通常在页面中不用写相关的配置，如需配置，设置如下：

vue
<route lang="yaml">
meta:
	layout: default/index
</route>

页面开发以及路由配置 ​

采用vite-plugin-pages插件使用文件系统配置相关路由

页面开发位置 ​

views/**/pages

系统自动识别views/xx/pages/abc/index.vue下的文件，并针生成相应的/xx/abc路由

以 upms 为例

views/upms/pages/account目录下
文件：src/views/upms/pages/account/index.vue
路由：/upms/account
src/views/upms/pages/audit-log目录下
文件1：src/views/upms/pages/audit-log/index.vue
路由1：/upms/audit-log

文件2：src/views/upms/pages/audit-log/ViewLog.vue
路由2：/upms/audit-log/ViewLog
页面路由 ​

目前支持两种路由方式：纯前端路由、纯前端路由 + 后端路由(主要开发方向)

  • 1）纯前端路由：配置：
javascript
// 配置位置 src/settings/config/projectConfig.ts
// 权限形式  FRONT_END纯前端路由
permissionMode: PermissionModeEnum.FRONT_END;

此时所有的前端路由都会出现在左侧菜单中

  • 2）纯前端路由 + 后端路由(主要开发方向)：配置：
javascript
// 配置位置 src/settings/config/projectConfig.ts
// 权限形式  FRONT_END纯前端路由
permissionMode: PermissionModeEnum.ROUTE_MAPPING;

后端菜单结构：

ts
label: '系统管理',     // 所属分类
name: '系统管理',
path: '',             // url路由
children: []          // 子路由
type: '0'             // 正常菜单  2 微应用菜单
meta: {               // 路由携带的参数
  icon: 'menu',
  title: '系统管理',
  hideMenu: '0',      // 是否隐藏 0 不隐藏 1 隐藏
  microName: 'upms', // 微应用name
  microType: 'vite',  // 微应用类型  vite app
  microPath: '/upms/role',  // 微应用路由
  url: 'http://host:port/' // 微应用地址
},

该模式下，菜单属性以后端路由为主，纯前端路由的属性并未配置到菜单属性中如有需求可以进行修改

注意：如何获取当前路由 菜单

后端请求配置 ​

我们推荐将业务分模块开发，因此面对的就是，不同的业务模块对后端有不同请求前缀，比如： upms 模块的请求前缀/sys/user、/sys/menu 等； abc 模块的请求前缀/abc/user、/abc/menu 等

针对这样的需求，框架对 axios 进行封装，让不同的模块拥有自己统一的请求前缀

全局前缀配置 ​

配置文件：.env.development

# 接口基础请求地址  通常配置如：http://localhost:9000
VITE_APP_BASE_URL=http://localhost:9000
  # 与VITE_APP_BASE_URL配合 通常配置 如： /basic-api => http://localhost:9000/basic-api
VITE_APP_BASE_URL_PREFIX=/basic-api
模块前缀配置(以 upms 为例) ​
ts
// src/views/upms/common/http/index.ts
import { createAxios } from '/@/utils/axios';

// 当路由使用 createWebHistory() 时需要携带  /  否则请求后端数据异常
export const sysPreFix = '/sys';

// export const devpHttp = defHttp;
export const sysHttp = createAxios({
  requestOptions: {
    apiUrl: sysPreFix,
  },
});
如何使用 ​

api 编写位置 src/views/upms/api，引用sysHttp

ts
// src/views/upms/api/dept.ts
import { sysHttp } from '/@/views/upms/common/http';

enum Api {
  DeptList = '/dept/tree',
}

// 获取部门列表
export const getDeptList = () => sysHttp.get<DeptResultModel>({ url: Api.DeptList });
效果 ​

所有使用sysHttp.get、sysHttp.post、sysHttp.put等的请求

如果配置了全局前缀设置为空，VITE_APP_BASE_URL_PREFIX=''，则请求地址：http://localhost:9000/sys 如果配置了全局前缀设置，VITE_APP_BASE_URL_PREFIX=/basic-api，则请求地址：http://localhost:9000/basic-api/sys