ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 完善了部分开发文档

Browse Source
This commit is contained in:
自带大佬气场
2021-04-28 17:08:06 +08:00
parent aac183749b
commit 8c429bcde6
23 changed files with 633 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
Web/public/doc-code/api/queue.js Normal file
View File

@@ -0,0 +1,15 @@
/* 使用关键字await */
async function doc() {
const res1 = await this.$api.apiName1(params1)
const res2 = await this.$api.apiName2(params2)
}
/* 使用$queue */
this.$api
.$queue([
this.$api.apiName1Await(params1),
this.$api.apiName2Await(params2),
])
.then(([_res1, _res2]) => {
/* ... */
})

14
Web/public/doc-code/api/setting.js Normal file
View File

@@ -0,0 +1,14 @@
export default {
/* 自定义的接口名称 */
apiName: [
/* 接口地址 */
url,
/* 请求类型 [get | post] */
'get',
/* axios所需的设置参数 */
options,
],
/* 默认为post的接口 */
apiPostName: postUrl
}

11
Web/public/doc-code/api/usage.js Normal file
View File

@@ -0,0 +1,11 @@
this.$api
.apiName(params)
.then((res) => {
/* ... */
})
.catch((error) => {
/* catch */
})
.finally(() => {
/* finally */
})

14
Web/public/doc-code/auth/index.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<section>
<!-- 简单的权限标识 -->
<Auth auth="sysApp:page">
<a-button>按钮1</a-button>
</Auth>
<!-- 多个并且关系的权限标识 -->
<Auth :auth="['sysApp:page', 'sysApp:add']"></Auth>
<!-- 多个或者关系的权限标识 -->
<Auth :auth="[['sysApp:page'], ['sysApp:add']]"></Auth>
<!-- 前缀简化 -->
<Auth :auth="{ sysApp: ['page', 'add'] }"></Auth>
</section>
</template>

12
Web/src/common/login/index.js
View File

@@ -70,21 +70,9 @@ const doLogout = () => {
})
}
const doCheck = () => {
return new Promise((resolve, reject) => {
api.checkLogin().then(({ result }) => {
setGlobal(result)
resolve()
}).catch(() => {
reject()
})
})
}
export {
doLogin,
doLogout,
doCheck,
setGlobal,
getGlobal

2
Web/src/main.js
View File

@@ -26,7 +26,7 @@ SwiperClass.use([Pagination, Mousewheel, Autoplay, Scrollbar])
Vue.use(getAwesomeSwiper(SwiperClass))
import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'
import 'highlight.js/styles/monokai-sublime.css'
Vue.use(hljs.vuePlugin);
/**

5
Web/src/pages/system/doc/api/index.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<section>
<p>在本框架中，只需要进行简单的接口配置，就可以实现调用。</p>
</section>
</template>

26
Web/src/pages/system/doc/api/queue.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<section>
<p>有些场景下，需要对几个接口同时进行调用，并且同时返回数据。</p>
<p>
当然可以直接使用关键字
<a-tag class="mr-none" color="orange">await</a-tag>；也可以使用已经封装好的
<a-tag class="mr-none" color="orange">$queue</a-tag>，并在接口函数后增加
<a-tag class="mr-none" color="orange">Await</a-tag>后缀。
</p>
<Highlight :code="codes['/api/queue.js']" language="javascript" />
</section>
</template>
<script>
import Highlight from '../highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>

23
Web/src/pages/system/doc/api/setting.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<section>
<p>
维护接口地址在
<a-tag class="mr-none" color="orange">@/src/common/api/requests</a-tag>中
</p>
<Highlight :code="codes['/api/setting.js']" language="javascript" />
</section>
</template>
<script>
import Highlight from '../highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>

21
Web/src/pages/system/doc/api/usage.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<section>
<p>调用时可以直接使用全局函数。</p>
<p>接口的函数名对应到上面配置的接口名称即可。</p>
<Highlight :code="codes['/api/usage.js']" language="javascript" />
</section>
</template>
<script>
import Highlight from '../highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>

26
Web/src/pages/system/doc/auth/index.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<section>
<p>在不少业务组件中，时常需要做到权限控制一些按钮的显示隐藏。如果只使用样式来隐藏按钮，是不安全的。</p>
<p>所以在本框架中，推荐将按钮用全局的权限组件包裹来控制是否渲染。</p>
<Highlight :code="codes['/auth/index.vue']" language="html" />
<p>
权限标识会读取全局用户信息中的
<a-tag class="mr-none" color="orange">permissions</a-tag>进行比对。
</p>
<p>权限组件插槽内的可以是任何元素，只要不符合条件，将不会渲染。</p>
</section>
</template>
<script>
import Highlight from '../highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>

3
Web/src/pages/system/doc/database/index.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<div></div>
</template>

77
Web/src/pages/system/doc/database/migrations.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<section>
<p>在建立或修改了实体类之后，可以将实体类更新到数据库。</p>
<p>
在Visual Studio中选择
<a-breadcrumb separator=">">
<a-breadcrumb-item>工具</a-breadcrumb-item>
<a-breadcrumb-item>NuGet 包管理器</a-breadcrumb-item>
<a-breadcrumb-item>程序包管理控制台</a-breadcrumb-item>
</a-breadcrumb>之后在打开的程序包管理控制台中，默认项目选择
<a-tag class="mr-none" color="orange">Ewide.Database.Migrations</a-tag>，并在控制台中输入命令。
</p>
<h4>生成迁移文件</h4>
<Highlight :code="'add-migration init -c \'DefaultDbContext\''" language="c++" />
<p>其中</p>
<ul>
<li>
<p>
<a-tag color="blue">add-migration</a-tag>是固定的命令。
</p>
</li>
<li>
<p>
<a-tag color="blue">init</a-tag>是自定义的数据库版本号。
</p>
</li>
<li>
<p>
<a-tag color="blue">-c</a-tag>是固定的参数。
</p>
</li>
<li>
<p>
<a-tag color="blue">'DefaultDbContext'</a-tag>是对应的DbContext。
</p>
</li>
</ul>
<h4>更新迁移到数据库</h4>
<p>
在确保
<a-tag class="mr-none" color="orange">Ewide.Database.Migrations</a-tag>中已经生成迁移文件之后，可以运行更新命令。
</p>
<Highlight :code="'update-database -context \'DefaultDbContext\''" language="c++" />
<p>其中</p>
<ul>
<li>
<p>
<a-tag color="blue">update-database</a-tag>是固定的命令。
</p>
</li>
<li>
<p>
<a-tag color="blue">-context</a-tag>是固定的参数。
</p>
</li>
<li>
<p>
<a-tag color="blue">'DefaultDbContext'</a-tag>是对应的DbContext。
</p>
</li>
</ul>
</section>
</template>
<script>
import Highlight from '../highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>

44
Web/src/pages/system/doc/functions/index.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<section>
<p>
现在已经将众多常用的函数挂载到
<a-tag class="mr-none" color="orange">Vue</a-tag>原型链中，方便在任意业务组件中直接通过
<a-tag class="mr-none" color="orange">this</a-tag>调用。
</p>
<ul>
<li>
<p>
<a-tag color="blue">$api</a-tag>可直接调用webapi，详见
<a href="#doc-4">接口</a>。
</p>
</li>
<li>
<p>
<a-tag color="blue">$_</a-tag>调用实用的工具库
<a-tag class="mr-none" color="orange">Lodash</a-tag>，使用方式详见
<a href="https://www.lodashjs.com/" target="_blank">官方文档</a>。
</p>
</li>
<li>
<p>
<a-tag color="blue">$moment</a-tag>调用轻便的时间工具库
<a-tag class="mr-none" color="orange">Moment.js</a-tag>，使用方式详见
<a href="http://momentjs.cn/docs/" target="_blank">官方文档</a>。
</p>
</li>
<li>
<p>
<a-tag class="mr-none" color="blue">onOpenContentWindow</a-tag>和
<a-tag color="blue">closeContentWindow</a-tag>打开和关闭窗口，详见
<a href="#doc-2">窗口</a>。
</p>
</li>
<li>
<p>
<a-tag color="blue">$auth</a-tag>权限渲染组件的函数版，可以用于在js中的权限处理，并返回布尔值。参数格式详见
<a href="#doc-5">权限渲染</a>。
</p>
</li>
</ul>
</section>
</template>

122
Web/src/pages/system/doc/globalinfo/index.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<section>
<p>
在进入主页时，默认会调用
<a-tag class="mr-none" color="orange">getLoginUser</a-tag>接口来获取当前登录用户基本信息。
</p>
<p>此时这些基本信息将会被挂载到全局，方便使用。</p>
<Highlight :code="'this.$root.global.info'" language="javascript" />
<h4>可用的基本信息</h4>
<ul>
<li>
<p>
<a-tag color="blue">account</a-tag>登录帐号。
</p>
</li>
<li>
<p>
<a-tag color="blue">adminType</a-tag>帐号管理类型。
</p>
</li>
<li>
<p>
<a-tag color="blue">avatar</a-tag>用户头像。
</p>
</li>
<li>
<p>
<a-tag color="blue">birthday</a-tag>生日。
</p>
</li>
<li>
<p>
<a-tag color="blue">email</a-tag>邮箱。
</p>
</li>
<li>
<p>
<a-tag color="blue">id</a-tag>帐号ID。
</p>
</li>
<li>
<p>
<a-tag color="blue">lastLoginAddress</a-tag>上次登录的物理地址。
</p>
</li>
<li>
<p>
<a-tag color="blue">lastLoginBrowser</a-tag>上次登录使用的浏览器。
</p>
</li>
<li>
<p>
<a-tag color="blue">lastLoginIp</a-tag>上次登录的IP地址。
</p>
</li>
<li>
<p>
<a-tag color="blue">lastLoginOs</a-tag>上次登录使用的操作系统。
</p>
</li>
<li>
<p>
<a-tag color="blue">lastLoginTime</a-tag>上次登录时间。
</p>
</li>
<li>
<p>
<a-tag color="blue">loginEmpInfo</a-tag>用户相关组织和附加信息。
</p>
</li>
<li>
<p>
<a-tag color="blue">name</a-tag>用户名。
</p>
</li>
<li>
<p>
<a-tag color="blue">nickName</a-tag>昵称。
</p>
</li>
<li>
<p>
<a-tag color="blue">permissions</a-tag>权限。
</p>
</li>
<li>
<p>
<a-tag color="blue">phone</a-tag>手机号。
</p>
</li>
<li>
<p>
<a-tag color="blue">roles</a-tag>所属角色。
</p>
</li>
<li>
<p>
<a-tag color="blue">sex</a-tag>性别。
</p>
</li>
<li>
<p>
<a-tag color="blue">tel</a-tag>电话。
</p>
</li>
</ul>
</section>
</template>
<script>
import Highlight from '../highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>

145
Web/src/pages/system/doc/index.vue
View File

@@ -3,10 +3,15 @@
<container>
<a-row :gutter="16" type="flex">
<a-col flex="auto">
<container mode="container">
<section :id="`doc-${index}`" :key="index" v-for="(doc, index) in docs">
<container
:id="`doc-${index}`"
:key="index"
mode="container"
v-for="(doc, index) in docs"
>
<section>
<h1>{{ doc.title }}</h1>
<component :codes="codes" :is="doc.component" v-if="doc.name" />
<component :codes="codes" :is="doc.component" v-if="doc.path" />
<template v-if="doc.children">
<section
:id="`doc-${index}-${_index}`"
@@ -14,10 +19,11 @@
v-for="(_doc, _index) in doc.children"
>
<h3>{{ _doc.title }}</h3>
<component :codes="codes" :is="_doc.component" v-if="_doc.name" />
<component :codes="codes" :is="_doc.component" v-if="_doc.path" />
</section>
</template>
</section>
<a-divider v-if="index < docs.length - 1" />
</container>
</a-col>
<a-col flex="240px">
@@ -48,59 +54,126 @@
</a-card>
</template>
<script>
const docs = [
{
title: '数据库',
path: '/database',
children: [
{
title: '实体(N)',
},
{
title: '迁移',
path: '/database/migrations',
},
],
},
{
title: '数据传输对象',
},
{
title: '窗口',
path: '/window',
children: [
{
title: '打开窗口',
path: '/window/open',
},
{
title: '关闭窗口',
path: '/window/close',
},
],
},
{
title: '全局函数',
path: '/functions',
},
{
title: '接口',
path: '/api',
children: [
{
title: '配置',
path: '/api/setting',
},
{
title: '调用',
path: '/api/usage',
},
{
title: '队列',
path: '/api/queue',
},
],
},
{
title: '权限渲染',
path: '/auth',
},
{
title: '种子',
path: '/seed',
children: [
{
title: '查询表格',
path: '/seed/query',
},
{
title: '编辑窗口',
path: '/seed/form',
},
],
},
{
title: '全局用户信息',
path: '/globalinfo',
},
{
title: '内置组件(N)',
},
{
title: '本地存储(N)',
path: '/storage',
},
{
title: '工具(N)',
},
];
export default {
data() {
return {
docs: [
{
title: '开始使用',
name: '/usage',
},
{
title: '窗口',
},
{
title: '种子',
name: '/seed',
children: [
{
title: '查询表格',
name: '/seed/query',
},
{
title: '编辑窗口',
name: '/seed/form',
},
],
},
],
docs: null,
codes: {},
};
},
mounted() {
this.docs.forEach((doc) => {
if (doc.name) {
this.$set(doc, 'component', () => import(`.${doc.name}`));
docs.forEach((doc) => {
if (doc.path) {
doc.component = () => import(`.${doc.path}`);
}
if (doc.children) {
doc.children.forEach((_doc) => {
this.$set(_doc, 'component', () => import(`.${_doc.name}`));
_doc.component = () => import(`.${_doc.path}`);
});
}
});
this.docs = docs;
// 读取doc-code下所有文件内容
const files = require.context('@/../public/doc-code', true, /\.(js|html|vue|css|less|json)(\?.*)?$/);
const files = require.context('@/../public/doc-code', true, /\.(js|jsx|html|vue|css|less|json|cs)(\?.*)?$/);
const codes = {};
files.keys().forEach((p) => {
const fileName = p.slice(1);
const filepath = p.slice(1);
const xhr = new XMLHttpRequest();
xhr.open('GET', `./doc-code${fileName}`, false);
xhr.open('GET', `./doc-code${filepath}`, false);
xhr.overrideMimeType('text/plain;charset=utf-8');
xhr.send(null);
codes[fileName] = xhr.responseText;
codes[filepath] = xhr.responseText;
});
console.log(codes);
this.codes = codes;
},
methods: {

5
Web/src/pages/system/doc/seed/index.vue
View File

@@ -21,6 +21,11 @@
</a-breadcrumb>输入
<a-tag class="mr-none" color="orange">vue.json</a-tag>并回车，将会打开针对vue文件的用户片段配置JSON。
</p>
<p>
注意：在模版字符串中如果使用到了
<a-tag class="mr-none" color="orange">$</a-tag>，就请使用
<a-tag class="mr-none" color="orange">$$</a-tag>对其进行转义。
</p>
</li>
</ul>
<Highlight :code="codes['/seed/vue.json']" language="json" />

4
Web/src/pages/system/doc/seed/query.vue
View File

@@ -1,5 +1,9 @@
<template>
<section>
<p>
当前版本
<a-tag>1.0</a-tag>
</p>
<Highlight :code="codes['/seed/query.vue']" language="html" />
</section>
</template>

3
Web/src/pages/system/doc/storage/index.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<section></section>
</template>

23
Web/src/pages/system/doc/window/close.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<section>
<Highlight :code="'this.closeContentWindow(key)'" language="javascript" />
<h4>key</h4>
<p>
<a-tag>String | Number</a-tag>非必传参数。指定关闭窗口的键。如果未指定键，则关闭当前选中的窗口。
</p>
</section>
</template>
<script>
import Highlight from '../highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>

27
Web/src/pages/system/doc/window/index.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<section>
<p>
本框架是以
<b>页签</b>形式打开业务组件（一般意义上的页面）。当然其中也有使用到路由，但只用于登录与主页的跳转。
</p>
<p>
所有业务组件都放置于
<a-tag class="mr-none" color="orange">@/src/pages</a-tag>目录下，打开窗口时默认只读取该目录下的组件。
</p>
<p>目前已对打开和关闭窗口的方法进行了全局化处理，可以在任何组件内轻松地使用。</p>
</section>
</template>
<script>
import Highlight from '../highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>

59
Web/src/pages/system/doc/window/open.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<section>
<Highlight :code="'this.onOpenContentWindow(settings)'" language="javascript" />
<h4>settings</h4>
<ul>
<li>
<p>
<a-tag color="red">key</a-tag>
<a-tag>String | Number</a-tag>非必要，窗口的唯一键。当下一次打开同键的窗口时，只切换到该窗口。如果未指定唯一键，将会自动生成随机键。
</p>
</li>
<li>
<p>
<a-tag color="red">icon</a-tag>
<a-tag>String</a-tag>非必要，窗口页签的图标。
</p>
</li>
<li>
<p>
<a-tag color="red">title</a-tag>
<a-tag>String</a-tag>非必要，窗口页签的标题。如果不指定标题，讲会以“新建窗口”显示。
</p>
</li>
<li>
<p>
<a-tag color="red">path</a-tag>
<a-tag>String</a-tag>必要，组件路径。
</p>
</li>
<li>
<p>
<a-tag color="red">param</a-tag>
<a-tag>Object</a-tag>非必要，传递参数。在业务组件中通过
<a-tag class="mr-none" color="orange">props</a-tag>接收。
</p>
</li>
<li>
<p>
<a-tag color="red">closable</a-tag>
<a-tag>Boolean</a-tag>非必要，设置是否可关闭窗口。默认为可关闭。
</p>
</li>
</ul>
</section>
</template>
<script>
import Highlight from '../highlight';
export default {
components: {
Highlight,
},
props: {
codes: {
type: Object,
},
},
};
</script>

2
Web/src/views/main/index.vue
View File

@@ -144,7 +144,7 @@ export default {
onCloseContentWindow(key) {
key = key || this.tabActived;
const i = this.$_.findIndex(this.panes, (p) => p.key === key && p.closable);
const i = this.$_.findIndex(this.panes, (p) => p.key === key);
this.panes.splice(i, 1);
if (this.panes.length) {