https://github.com/softwaiter/dayuan-vue-template
大圆Admin前端开发模板（VUE版）
https://github.com/softwaiter/dayuan-vue-template
element-ui framework template vue
Last synced: 3 months ago
JSON representation
大圆Admin前端开发模板（VUE版）
- Host: GitHub
- URL: https://github.com/softwaiter/dayuan-vue-template
- Owner: softwaiter
- License: mit
- Created: 2023-11-04T15:08:19.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-06-25T15:33:43.000Z (12 months ago)
- Last Synced: 2025-01-24T20:38:12.749Z (5 months ago)
- Topics: element-ui, framework, template, vue
- Language: Vue
- Homepage: http://www.dayuan.tech
- Size: 8.06 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 大圆VUE前端开发模板
## 一、框架概览
### 1.1 简介
大圆VUE前端快速开发框架（以下简称大圆VUE）是基于[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)框架二次开发的一个前端快速开发框架。
首先，vue-elemnet-admin是一个很优秀的前端后台解决方案。它基于vue和element-ui实现；使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件；可以帮助用户快速搭建企业级中后台产品原型。
既然vue-element-admin已经这么优秀，为什么还要进行二次开发呢？vue-element-admin提供的是基础的开发框架，不包含具体的业务逻辑，用户需要将所有业务需求逐一实现；大圆VUE解决的就是这类需求：一是抽取并实现通用的页面功能逻辑，用户在其业务中可直接使用；二是进一步封装前后台的交互逻辑；让页面交互和响应更标准和商业化；三是增加了子模块加载模式，方便了团队分散开发、集中发布。
### 1.2 功能特点
#### 1.2.1 通用页面功能
* ###### 登录页面和逻辑（账号密码登录/手机验证码登录）
* ###### 找回密码页面和逻辑（通过手机号找回/通过邮箱找回）
* ###### 账户注册页面和逻辑
* ###### 验证码功能（图形验证码和短信验证码）
* ###### 修改密码页面和逻辑
* ###### 个人信息页面和逻辑（头像上传、手机绑定、邮箱绑定、微信绑定）
* ###### 扩展业务组件（机构选择器、用户选择器、产品选择器）
#### 1.2.2 交互逻辑
* ###### 统一请求错误处理逻辑
* ###### 统一登录检查处理逻辑
* ###### 首次登录密码必须修改逻辑
#### 1.2.3 子模块模式
框架在src目录下增加了submodules目录，和views目录并列，用于存放各个业务子模块。使用子模块的方式能够将不同的业务模块很好的隔离，每个子模块都可以作为一个独立前端项目开发和运行（拥有独立的路由定义和功能页面）；极大的方便了开发、维护和升级。
submodules目录中的子模块中必须包含一个router.js路由定义文件以及若干其他相关文件（页面文件、资源文件等）。
**财务子模块案例目录结构：**
submodules
└─ finance // 财务子模块
├─ api // 接口目录
│ ├─ goods.js // 商品接口定义
│ └─ order.js // 订单接口定义
├─ svg // svg图片目录
│ └─ finance.svg // 财务管理图标
├─ views // 页面目录
│ ├─ goods // 商品管理
│ │ └─ index.vue // 商品管理页面文件
│ └─ order // 订单管理
│ └─ index.vue // 订单管理页面文件
└─ router.js // 路由定义文件
router.js文件内容只包含constantRoutes、asyncRoutes两个数组，用于定义常量路由和动态路由。
router.js路由定义方法和vue-element-admin框架中的路由定义相同；在此基础上，大圆VUE扩展了position属性，用于定义路由的显示位置，不指定的话将按顺序显示。
**财务子模块案例路由定义：**
```vue
import Layout from '@/layout'
export const constantRoutes = []
export const asyncRoutes = [
{
position: 5,
path: '/finance',
component: Layout,
alwaysShow: true,
redirect: 'noRedirect',
name: 'finance-manage',
meta: {
title: '财务管理',
icon: 'finance',
roles: ['goods', 'order']
},
children: [
{
path: 'goods',
component: () => import('@/submodules/finance/views/goods/index'),
name: 'GoodsList',
meta: {
title: '商品定义',
roles: ['goods']
}
},
{
path: 'order',
component: () => import('@/submodules/finance/views/order/index'),
name: 'OrderList',
meta: {
title: '订单列表',
roles: ['order']
}
}
]
}
]
```
## 二、截图预览
## 三、演示地址
项目演示既包含前端的页面布局，也包含后台接口逻辑，用户能够体验到完整真实的效果。本项目的后端接口逻辑全部调用的大圆Admin产品的接口服务，用户也可根据需要自行替换。
## 四、快速开始
### 4.1 环境准备
#### 4.1.1 安装Git
* 下载[Git for Windows](https://gitforwindows.org/)安装包。
* 运行下载的安装包，一路Next，直到完成。
#### 4.1.2 安装node&npm
* 下载[Node.js](https://nodejs.org/en/download/)安装包（新版node安装包已包含npm）。
* 运行下载的安装包，一路Next，直到完成。
*注意*：安装步骤说明全部以Windows环境为基础，其他操作系统可自行百度。
### 4.2 安装运行
#### 4.2.1 下载
```shell
git clone https://github.com/softwaiter/dayuan-vue-template.git
```
#### 4.2.2 安装
```shell
npm install
```
#### 4.2.3 运行
```shell
npm run dev
```
#### 4.2.4 发布
```shell
npm run build:prod
```
## 五、扩展组件
大圆VUE提供了4个自定义组件，分别是图形验证码、机构选择器、用户选择器和产品选择器；扩展组件都极强的业务属性，用户可根据需要选用；在演示环境的日志页面中，可以体验实际使用效果。
### 5.1 图形验证码
#### 5.1.1 常规用法
##### 1. 引入组件
```vue
import DayuanCaptcha from 'dayuan-captcha';
export default {
components: { DayuanCaptcha },
// 省略...
}
```
##### 2. 使用组件
```vue
```
#### 5.1.2 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------------ | -------------------------------------------- | ------ | ------ | ------ |
| CaptchaRequiredUrl | 指定判断接口请求是否需要图形验证码的接口地址 | string | — | — |
| CaptchaUrl | 指定获取图形验证码的接口地址 | string | — | — |
| Headers | 接口请求需要携带的Headers | string | — | — |
#### 5.1.3 方法
| 方法名 | 说明 | 参数 |
| ------- | -------------------------------------------------- | ------------------------------------------------------------ |
| tryShow | 判断指定接口是否需要图形验证码，需要的话请求并显示 | action：指定接口，格式为“接口请求方式_接口路径”；如：post\_/account/changepass |
| hide | 隐藏显示的图形验证码 | — |
#### 5.1.4 事件
| 事件名称 | 说明 | 回调参数 |
| -------- | ------------------------------ | -------------------------- |
| error | 报错时触发 | error：错误信息 |
| submit | 用户输入或拖动验证码完成时触发 | data：用户输入的验证码数据 |
### 5.2 机构选择器
#### 5.2.1 常规用法
##### 1. 引入组件
```vue
import OrgSelect from "@/components/OrgSelect";
export default {
components: { OrgSelect },
// 省略...
}
```
##### 2. 使用组件
```vue
```
#### 5.2.2 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------- | ---------------- | ------- | ------ | -------------- |
| value/v-model | 绑定值 | string | — | — |
| clearable | 是否可以清空选项 | boolean | — | true |
| disabled | 是否禁用 | boolean | — | false |
| placeholder | 占位符 | string | — | 请选择所属机构 |
#### 5.2.3 事件
| 事件名称 | 说明 | 回调参数 |
| -------- | -------------------- | ------------ |
| changed | 选中值发生变化时触发 | 目前的选中值 |
### 5.3 用户选择器
#### 5.3.1 常规用法
##### 1. 引入组件
```vue
import UserSelect from "@/components/UserSelect";
export default {
components: { UserSelect },
// 省略...
}
```
##### 2. 使用组件
```vue
```
#### 5.3.2 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------- | -------------------------------------------- | ------- | ------ | ---------- |
| value/v-model | 绑定值 | string | — | — |
| org | 用户下拉选项过滤器（只显示选中机构下的用户） | string | — | — |
| clearable | 是否可以清空选项 | boolean | — | true |
| disabled | 是否禁用 | boolean | — | false |
| placeholder | 占位符 | string | — | 请选择用户 |
#### 5.3.3 事件
| 事件名称 | 说明 | 回调参数 |
| -------- | -------------------- | ------------ |
| changed | 选中值发生变化时触发 | 目前的选中值 |
### 5.4 产品选择器
#### 5.4.1 常规用法
##### 1. 引入组件
```vue
import ProductSelect from "@/components/ProductSelect";
export default {
components: { ProductSelect },
// 省略...
}
```
##### 2. 使用组件
```vue
```
#### 5.4.2 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------- | -------------------------------------------------- | ------- | ------ | ---------- |
| value/v-model | 绑定值 | string | — | — |
| org | 产品下拉选项过滤器（只显示选中机构获得授权的产品） | string | — | — |
| user | 产品下拉选项过滤器（只显示选中用户获得授权的产品） | | | |
| clearable | 是否可以清空选项 | boolean | — | true |
| disabled | 是否禁用 | boolean | — | false |
| placeholder | 占位符 | string | — | 请选择用户 |
#### 5.4.3 事件
| 事件名称 | 说明 | 回调参数 |
| -------- | -------------------- | ------------ |
| changed | 选中值发生变化时触发 | 目前的选中值 |
## 六、扩展功能
### 6.1 扩展配置
| 配置项 | 说明 | 所在文件 |
| ----------------------- | ------------------------------------------------------- | ----------- |
| shortTitle | 项目简称 | settings.js |
| showBindWechatInProfile | 个人信息页是否显示绑定微信 | settings.js |
| platform | 平台类型，默认请求参数（不使用大圆Admin接口服务可忽略） | settings.js |
| product | 产品编码，默认请求参数（不使用大圆Admin接口服务可忽略） | settings.js |
### 6.2 扩展Store存储项
| 存储项 | 说明 | 所在文件 |
| ------- | ---------------------------- | ---------------- |
| userid | 当前登录用户的ID | store/getters.js |
| account | 当前登录用户的账户名 | store/getters.js |
| name | 当前登录用户的账户名称 | store/getters.js |
| avatar | 当前登录用户的头像数据 | store/getters.js |
| roles | 当前登录用户功能模块授权数据 | store/getters.js |
| orgCode | 当前登录用户所属机构编码 | store/getters.js |
| orgName | 当前登录用户所属机构名称 | store/getters.js |
### 6.3 扩展方法
| 方法名 | 说明 | 全局别名 | 所在文件 |
| ------------------ | -------------------------------------- | -------- | ------------- |
| isNullOrWhiteSpace | 判断变量是否为null或由空格组成 | — | utils/util.js |
| hasModule | 判断当前用户是否具备指定的功能模块授权 | $visible | utils/auth.js |
| setToken | 保存用户登录Token | — | utils/auth.js |
| getToken | 获取当前登录用户Token | — | utils/auth.js |
| removeToken | 移除当前登录用户Token | — | utils/auth.js |