创建文档
This commit is contained in:
54
docs/02.前端/03.代码示例/01.Api示例.md
Normal file
54
docs/02.前端/03.代码示例/01.Api示例.md
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Api示例
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/5c0128/
|
||||
---
|
||||
# Api示例
|
||||
|
||||
::: tip
|
||||
此处提供一个如何从后台调用接口的Api示例
|
||||
:::
|
||||
|
||||
::: warning 注意
|
||||
多个功能模块推荐创建多个api文件，方便代码维护
|
||||
:::
|
||||
|
||||
1. 进入 `src>api>api` 文件夹中，创建一个文件，这里我们以UserApi.ts为例，并写入类的基本信息
|
||||
``` ts
|
||||
class UserApi{
|
||||
|
||||
}
|
||||
|
||||
export default UserApi
|
||||
```
|
||||
2. 引入封装好的 `axios` 并继承
|
||||
|
||||
``` ts {1,3}
|
||||
import BaseAxios from '@/common/http'
|
||||
|
||||
class UserApi extends BaseAxios<any, any>{
|
||||
|
||||
}
|
||||
|
||||
export default UserApi
|
||||
```
|
||||
3. 根据后台接口文档写入需要请求的方法，注意请求方法
|
||||
|
||||
``` ts {5,6,7,8,10,11,12,13}
|
||||
import BaseAxios from '@/common/http'
|
||||
|
||||
class UserApi extends BaseAxios<any, any>{
|
||||
|
||||
// 根据用户id获取角色id
|
||||
public getRoleByUserId(param: any): Promise<Base.AxiosResponse<any>> {
|
||||
return this.axios.get('/ftUser/getRoleByUserId', param)
|
||||
}
|
||||
|
||||
// 给用户添加角色
|
||||
public addRole(param: any): Promise<Base.AxiosResponse<any>> {
|
||||
return this.axios.post('/ftUser/addRole', param)
|
||||
}
|
||||
}
|
||||
|
||||
export default UserApi
|
||||
```
|
||||
263
docs/02.前端/03.代码示例/02.新增页面示例.md
Normal file
263
docs/02.前端/03.代码示例/02.新增页面示例.md
Normal file
@@ -0,0 +1,263 @@
|
||||
---
|
||||
title: 新增页面示例
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/5003ef/
|
||||
---
|
||||
# 新增页面示例
|
||||
|
||||
::: tip
|
||||
此处提供使用通用模板的页面使用方法，若要添加常规页面请参考 [Vue](https://cn.vuejs.org/) 官网提供的说明。
|
||||
使用此方法前需要已经在配置表配置好需要调用的单表信息。
|
||||
:::
|
||||
|
||||
1. 首先在 `src>api>views` 中新建文件夹 `user-example` ，进入文件夹新建文件 `user-example.ts`，写入以下信息
|
||||
|
||||
``` ts
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { mixins } from 'vue-class-component'
|
||||
import Common from '@/api/mixins/Common'
|
||||
|
||||
@Component({
|
||||
name: 'userExample'
|
||||
})
|
||||
export default class extends mixins(Common) {
|
||||
}
|
||||
```
|
||||
|
||||
2. 添加默认配置信息，需要使用者根据注释及页面需求更改配置
|
||||
|
||||
``` ts {4,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61}
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { mixins } from 'vue-class-component'
|
||||
import Common from '@/api/mixins/Common'
|
||||
import StringUtils from '@/common/StringUtils'
|
||||
|
||||
@Component({
|
||||
name: 'userExample'
|
||||
})
|
||||
export default class extends mixins(Common) {
|
||||
// 表格中 '操作'列的宽度
|
||||
private operationWidth = 200
|
||||
|
||||
async created() {
|
||||
// 设置默认排序
|
||||
this.sort = 'UPDATE_TIME'
|
||||
this.order = 'DESC'
|
||||
// 设置表别名
|
||||
this.tableAlias = 'user'
|
||||
// 获取表头及表单信息
|
||||
await this.acquireTableInfo()
|
||||
// 获取基表信息格式化下拉框及表格数据
|
||||
await this.getBaseTableInfo()
|
||||
// 获取列表信息
|
||||
this.acquireTable()
|
||||
// 设置默认校验构造
|
||||
this.formRules = {
|
||||
PASSWORD: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
|
||||
USERNAME: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
|
||||
}
|
||||
// 设置默认禁用字段
|
||||
this.disableField = ['CREATE_TIME', 'UPDATE_TIME']
|
||||
}
|
||||
|
||||
// 编辑表格新增行
|
||||
addRow() {
|
||||
const obj: any = {
|
||||
index: this.editList.length,
|
||||
edit: true
|
||||
}
|
||||
this.editList.push(obj)
|
||||
}
|
||||
|
||||
// 可编辑表格select
|
||||
editTableSelectionChange(val: any) {
|
||||
this.editTableSelectList = val
|
||||
}
|
||||
|
||||
// 表格校验规则
|
||||
tableRules(val: any) {
|
||||
const { rows, rules, callback } = val
|
||||
let message = ''
|
||||
Object.getOwnPropertyNames(rules).forEach(function(key) {
|
||||
if (key !== '__ob__') {
|
||||
if (StringUtils.isEmpty(rows[key])) {
|
||||
message += rules[key][0].message
|
||||
message += ','
|
||||
}
|
||||
}
|
||||
})
|
||||
callback(message)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3. 在路径 `src>views` 新建文件夹 `user-example` , 进入 `user-example` 文件夹，新建文件 `user-example.vue`，并写入以下信息，scss请根据页面设计自行更改，或者复制通用页面示例中的scss，这里先不再显示。
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="../../api/views/user-example/user-example.ts"></script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
4. 在 `src>router>index.ts` 中增加 `user-example.vue` 的路由指向。
|
||||
|
||||
``` ts {3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18}
|
||||
export const asyncRoutes: RouteConfig[] = [
|
||||
....,
|
||||
{
|
||||
path: '/userExample',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'userExample',
|
||||
component: () => import(/* webpackChunkName: "icons" */ '@/views/user-example/userExample.vue'),
|
||||
name: 'userExample',
|
||||
meta: {
|
||||
title: 'userExample',
|
||||
icon: 'example',
|
||||
noCache: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
....
|
||||
]
|
||||
```
|
||||
|
||||
此时可以看到目录上多了刚刚我们添加的路由
|
||||
|
||||
|
||||
|
||||
5. 此时目录还未显示中文，由于框架使用i18n插件，此时我们需要进入语言目录下进行设置，进入 `src>lang>zh.ts` 中设置显示中文。
|
||||
|
||||
::: warning 注意
|
||||
此处设置需要添加到router对象下，且key值需要与路由中的title设置一致
|
||||
:::
|
||||
|
||||
``` ts {3}
|
||||
export default {
|
||||
route: {
|
||||
userExample:'用户示例',
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
然后我们就可以看到显示目录变成中文。
|
||||
|
||||
|
||||
|
||||
6. 然后，我们添加通用组件到ts文件及页面中。
|
||||
|
||||
首先引入组件到ts文件中
|
||||
|
||||
``` ts {5,8,9,10}
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { mixins } from 'vue-class-component'
|
||||
import Common from '@/api/mixins/Common'
|
||||
import StringUtils from '@/common/StringUtils'
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
@Component({
|
||||
name: 'commonExample',
|
||||
components: {
|
||||
tableHeadCo,
|
||||
}
|
||||
})
|
||||
export default class extends mixins(Common) {
|
||||
// 表格中 '操作'列的宽度
|
||||
private operationWidth = 200
|
||||
|
||||
async created() {
|
||||
// 设置默认排序
|
||||
this.sort = 'UPDATE_TIME'
|
||||
this.order = 'DESC'
|
||||
// 设置表别名
|
||||
this.tableAlias = 'user'
|
||||
// 获取表头及表单信息
|
||||
await this.acquireTableInfo()
|
||||
// 获取基表信息格式化下拉框及表格数据
|
||||
await this.getBaseTableInfo()
|
||||
// 获取列表信息
|
||||
this.acquireTable()
|
||||
// 设置默认校验构造
|
||||
this.formRules = {
|
||||
PASSWORD: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
|
||||
USERNAME: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
|
||||
}
|
||||
// 设置默认禁用字段
|
||||
this.disableField = ['CREATE_TIME', 'UPDATE_TIME']
|
||||
}
|
||||
|
||||
// 编辑表格新增行
|
||||
addRow() {
|
||||
const obj: any = {
|
||||
index: this.editList.length,
|
||||
edit: true
|
||||
}
|
||||
this.editList.push(obj)
|
||||
}
|
||||
|
||||
// 可编辑表格select
|
||||
editTableSelectionChange(val: any) {
|
||||
this.editTableSelectList = val
|
||||
}
|
||||
|
||||
// 表格校验规则
|
||||
tableRules(val: any) {
|
||||
const { rows, rules, callback } = val
|
||||
let message = ''
|
||||
Object.getOwnPropertyNames(rules).forEach(function(key) {
|
||||
if (key !== '__ob__') {
|
||||
if (StringUtils.isEmpty(rows[key])) {
|
||||
message += rules[key][0].message
|
||||
message += ','
|
||||
}
|
||||
}
|
||||
})
|
||||
callback(message)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
然后再vue实例中引入组件
|
||||
|
||||
``` vue {3,4,5,6,7,8,9,10,11,12,13,14}
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:check-box-visible="true"
|
||||
:formatter="tableFomatter"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:loading="loading"
|
||||
:slot-visible="true"
|
||||
:width="operationWidth"
|
||||
@handle-sort-change="handleSortChange"
|
||||
@handle-selection-change="handleSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="../../api/views/user-example/user-example.ts"></script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
然后我们刷新页面，就可以看到刚刚引入的组件了。
|
||||
|
||||
|
||||
|
||||
7. 页面实例讲解完毕，最后，请按照使用者按照需要进行页面相关的开发或引入其他组件进行开发。
|
||||
|
||||
Reference in New Issue
Block a user