qlfy-postmate 1.1.2 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +142 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
#### 1、安装
|
|
4
4
|
|
|
5
5
|
```
|
|
6
|
-
npm i qlfy-postmate@1.1.
|
|
6
|
+
npm i qlfy-postmate@1.1.3
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
#### 2、导入
|
|
@@ -28,4 +28,144 @@ const childrenComm = new ChildPostmate({
|
|
|
28
28
|
})
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
#### 4、参数对象说明
|
|
32
|
+
|
|
33
|
+
| 回调函数名称 | 解释 | 回调参数 | 返回值 |
|
|
34
|
+
| ------------ | -------------------------------------------- | ------------------------------------------------------------ | ------ |
|
|
35
|
+
| error | 链接失败、未链接时执行 | null | void |
|
|
36
|
+
| success | 链接成功时执行 | chldPostmate | void |
|
|
37
|
+
| receive | 父页面推送数据时执行，初次链接成功会触发一次 | {<br />isHideHeader:boolean,<br />token:string,<br />loginInfo:object,<br />......<br />} | void |
|
|
38
|
+
|
|
39
|
+
#### 5、方法
|
|
40
|
+
|
|
41
|
+
| 名称 | 解释 | 使用 |
|
|
42
|
+
| ------- | ------------------------------------------------------------ | ------------------------- |
|
|
43
|
+
| getData | 链接成功后<br />可通过ChildPostmate实例对象，主动向父页面获取数据 | getData((dataInfo)=>void) |
|
|
44
|
+
|
|
45
|
+
#### 注意：
|
|
46
|
+
|
|
47
|
+
1、ChildPostmate 链接的创建是异步过程，需等待error或success函数执行后才可进行登陆状态的判断
|
|
48
|
+
|
|
49
|
+
2、getData方法，仅能在链接创建完成后再调用
|
|
50
|
+
|
|
51
|
+
3、error、success函数仅作为链接状态的标注函数，不传递数据
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
### 接入步骤
|
|
56
|
+
|
|
57
|
+
1. 对系统登录状态进行改造，系统加载时先将登陆状态判断屏蔽
|
|
58
|
+
|
|
59
|
+
2. 系统公共部分（app.vue）对该插件进行导入和 new，创建实例，并传入相应回调
|
|
60
|
+
|
|
61
|
+
3. 等待回调被执行，并做出以下操作：
|
|
62
|
+
|
|
63
|
+
------- 如果error回调执行：解除对登录状态的屏蔽；
|
|
64
|
+
|
|
65
|
+
------- 如果success回调执行：
|
|
66
|
+
|
|
67
|
+
2.1、保持对登录状态的屏蔽，并等待receive回调执行；
|
|
68
|
+
|
|
69
|
+
2.2、receive回调执行：
|
|
70
|
+
|
|
71
|
+
（1）使用接收数据中的token、loginInfo数据，将本地的登陆状态设置为已登录，后续接口请求时携带本回调传入的token；
|
|
72
|
+
|
|
73
|
+
（2）使用接收数据中的isHideHeader字段，对本系统页头的显隐进行控制
|
|
74
|
+
|
|
75
|
+
```vue
|
|
76
|
+
<my-header v-if="!isHideHeader" />
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
（3）解除对登陆状态判断的屏蔽（因已使用接收的数据配置了登录状态，不会触发本系统的登陆）；
|
|
80
|
+
|
|
81
|
+
### 样例：
|
|
82
|
+
|
|
83
|
+
App.vue
|
|
84
|
+
|
|
85
|
+
```vue
|
|
86
|
+
<template>
|
|
87
|
+
<div class="system-content" v-loading="loading">
|
|
88
|
+
<!-- 系统登录状态的判断，需等待postmate链接的响应后再执行 -->
|
|
89
|
+
|
|
90
|
+
<!-- 页头 -->
|
|
91
|
+
<my-header v-if="!isHideHeader"></my-header>
|
|
92
|
+
|
|
93
|
+
<!-- 侧面导航 -->
|
|
94
|
+
<my-aside v-if="!isHideHeader"></my-aside>
|
|
95
|
+
|
|
96
|
+
<!-- 内容区 -->
|
|
97
|
+
<RouterView v-if="!loading" />
|
|
98
|
+
</div>
|
|
99
|
+
</template>
|
|
100
|
+
|
|
101
|
+
<script setup lang="ts">
|
|
102
|
+
import { ref } from 'vue'
|
|
103
|
+
import { useSystemStore } from '@/store/modules/system'
|
|
104
|
+
import { ChildPostmate } from 'qlfy-postmate'
|
|
105
|
+
|
|
106
|
+
// 系统loading
|
|
107
|
+
const loading = ref(false)
|
|
108
|
+
// 页头是否展示
|
|
109
|
+
const isHideHeader = ref(false)
|
|
110
|
+
// pinia系统数据管理对象
|
|
111
|
+
const systemStore = useSystemStore()
|
|
112
|
+
|
|
113
|
+
initPostMate()
|
|
114
|
+
|
|
115
|
+
// 方法 -- 初始化postmate链接
|
|
116
|
+
function initPostMate() {
|
|
117
|
+
loading.value = true
|
|
118
|
+
const childrenComm = new ChildPostmate({
|
|
119
|
+
error: (err: any) => {
|
|
120
|
+
console.log('-----------------链接失败-----------------')
|
|
121
|
+
console.log(err)
|
|
122
|
+
loading.value = false
|
|
123
|
+
},
|
|
124
|
+
|
|
125
|
+
success: (success: any) => {
|
|
126
|
+
console.log('-----------------链接成功-----------------')
|
|
127
|
+
console.log(success)
|
|
128
|
+
loading.value = false
|
|
129
|
+
},
|
|
130
|
+
|
|
131
|
+
receive: (dataInfo: any) => {
|
|
132
|
+
console.log('-----------------接收数据-----------------')
|
|
133
|
+
console.log(dataInfo)
|
|
134
|
+
if (dataInfo.status !== 200) return
|
|
135
|
+
/**
|
|
136
|
+
* 接收到推送数据后做如下操作
|
|
137
|
+
* 1、根据isHideHeader控制页头显隐
|
|
138
|
+
* 2、将登录装填变更为已登录，并将token保存在正常登录所在位置进行取用
|
|
139
|
+
*/
|
|
140
|
+
|
|
141
|
+
// 控制导航、页头的展示
|
|
142
|
+
isHideHeader.value = dataInfo.data.isHideHeader
|
|
143
|
+
// 保存登陆信息
|
|
144
|
+
systemStore.setLoginInfo(dataInfo.data.loginInfo)
|
|
145
|
+
// 保存token
|
|
146
|
+
systemStore.setTooken(dataInfo.data.token)
|
|
147
|
+
},
|
|
148
|
+
})
|
|
149
|
+
}
|
|
150
|
+
</script>
|
|
151
|
+
|
|
152
|
+
<style scoped></style>
|
|
153
|
+
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### 集成调试
|
|
157
|
+
|
|
158
|
+
按下面链接格式在浏览器中访问，该链接支持前端的本地调试
|
|
159
|
+
|
|
160
|
+
```js
|
|
161
|
+
http://10.76.91.80:28084/test?url=本地前端服务地址
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
url后配置本地所启用的前端服务
|
|
165
|
+
|
|
166
|
+
例：
|
|
167
|
+
|
|
168
|
+
```js
|
|
169
|
+
http://10.76.91.80:28084/test?url=http://192.168.3.136:8080/
|
|
170
|
+
```
|
|
171
|
+
|