ap-dev 1.1.14 → 1.1.15
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/dev/ApiPanel/menus.js +4 -1
- package/dev/ApiPanel/modules/ApiJavaUtils.vue +5 -0
- package/dev/ApiPanel/modules/ApiVueUtils.vue +48 -0
- package/dev/ApiPanel/tabs/ApiVueDateUtil.vue +44 -0
- package/dev/ApiPanel/tabs/ApiVueWebSocketUtil.vue +128 -0
- package/dev/ApiPanel/tabs/ApiWebSocketUtil.vue +47 -0
- package/package.json +1 -1
package/dev/ApiPanel/menus.js
CHANGED
|
@@ -21,6 +21,7 @@ import ApiListUtil from './../tabs/ApiListUtil'
|
|
|
21
21
|
import ApiStringUtil from './../tabs/ApiStringUtil'
|
|
22
22
|
import ApiQyWxUtil from './../tabs/ApiQyWxUtil'
|
|
23
23
|
import ApiJavaCommonUtil from './../tabs/ApiJavaCommonUtil'
|
|
24
|
+
import ApiWebSocketUtil from './../tabs/ApiWebSocketUtil'
|
|
24
25
|
|
|
25
26
|
export default {
|
|
26
27
|
name: "ApiJavaUtils",
|
|
@@ -37,6 +38,7 @@ export default {
|
|
|
37
38
|
ApiStringUtil,
|
|
38
39
|
ApiQyWxUtil,
|
|
39
40
|
ApiJavaCommonUtil,
|
|
41
|
+
ApiWebSocketUtil
|
|
40
42
|
},
|
|
41
43
|
data() {
|
|
42
44
|
let opts = [
|
|
@@ -76,6 +78,9 @@ export default {
|
|
|
76
78
|
}, {
|
|
77
79
|
label: 'CacheUtil',
|
|
78
80
|
component: 'ApiCacheUtil',
|
|
81
|
+
},{
|
|
82
|
+
label: 'WebSocketUtil',
|
|
83
|
+
component: 'ApiWebSocketUtil',
|
|
79
84
|
},
|
|
80
85
|
];
|
|
81
86
|
return {
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<el-tabs v-model="activeName" tabPosition="left" class="api-tabs">
|
|
3
|
+
<template v-for="(item,index) in opts">
|
|
4
|
+
<el-tab-pane :label="item.label" :name="'tab' + index" class="api-tab">
|
|
5
|
+
<component :is="item.component"></component>
|
|
6
|
+
</el-tab-pane>
|
|
7
|
+
</template>
|
|
8
|
+
</el-tabs>
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script>
|
|
12
|
+
import ApiVueDateUtil from './../tabs/ApiVueDateUtil'
|
|
13
|
+
import ApiVueWebSocketUtil from './../tabs/ApiVueWebSocketUtil'
|
|
14
|
+
|
|
15
|
+
export default {
|
|
16
|
+
name: "ApiJavaUtils",
|
|
17
|
+
components: {
|
|
18
|
+
ApiVueDateUtil,
|
|
19
|
+
ApiVueWebSocketUtil,
|
|
20
|
+
},
|
|
21
|
+
data() {
|
|
22
|
+
let opts = [
|
|
23
|
+
{
|
|
24
|
+
label: "DateUtil",
|
|
25
|
+
component: "ApiVueDateUtil"
|
|
26
|
+
}, {
|
|
27
|
+
label: "WebSocketUtil",
|
|
28
|
+
component: "ApiVueWebSocketUtil"
|
|
29
|
+
}
|
|
30
|
+
];
|
|
31
|
+
return {
|
|
32
|
+
activeName: 'tab0',
|
|
33
|
+
opts: opts
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<style scoped>
|
|
40
|
+
.api-tabs {
|
|
41
|
+
display: flex;
|
|
42
|
+
height: 100%;
|
|
43
|
+
}
|
|
44
|
+
.api-tabs /deep/ .el-tabs__content {
|
|
45
|
+
flex: 1;
|
|
46
|
+
overflow: scroll;
|
|
47
|
+
}
|
|
48
|
+
</style>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div style="height: 100%">
|
|
3
|
+
<h3>日期工具类 - DateUtil</h3>
|
|
4
|
+
<api-table :data="methodData" :columns="methodCols"/>
|
|
5
|
+
</div>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script>
|
|
9
|
+
import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
|
|
10
|
+
|
|
11
|
+
export default {
|
|
12
|
+
name: 'ApiStringUtil',
|
|
13
|
+
components: {
|
|
14
|
+
ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
|
|
15
|
+
},
|
|
16
|
+
data() {
|
|
17
|
+
const methodCols = [
|
|
18
|
+
{label: '方法名', prop: 'name', width: '220px'},
|
|
19
|
+
{label: '说明', prop: 'memo', width: '300px'},
|
|
20
|
+
{label: '示例代码', prop: 'code', minWidth: '100px'}]
|
|
21
|
+
const methodData = [
|
|
22
|
+
{
|
|
23
|
+
name: 'formatDate',
|
|
24
|
+
memo: `格式化日期<br><span class="api-memo">格式：yyyy-MM-dd hh:mm:ss。</span>`,
|
|
25
|
+
code: `<span class="api-code">// 1、导入方法
|
|
26
|
+
import {formatDate} from 'ap-util/util/DateUtil';
|
|
27
|
+
|
|
28
|
+
// 2、调用
|
|
29
|
+
let str = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
|
|
30
|
+
</span>`
|
|
31
|
+
}
|
|
32
|
+
]
|
|
33
|
+
|
|
34
|
+
return {
|
|
35
|
+
methodData,
|
|
36
|
+
methodCols
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
methods: {}
|
|
40
|
+
}
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<style scoped>
|
|
44
|
+
</style>
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div style="height: 100%">
|
|
3
|
+
<h3>WebSocket工具类 - WebSocketUtil</h3>
|
|
4
|
+
<api-tittle-2>1、导入方法:</api-tittle-2>
|
|
5
|
+
<api-content>
|
|
6
|
+
<api-code>import {initWebSocket, sendMessage, sendMessageByPrefix,closeWebSocket} from "@/views/demo/WebSocketUtil";</api-code>
|
|
7
|
+
</api-content>
|
|
8
|
+
|
|
9
|
+
<api-tittle-2>2、初始化WebSocket:</api-tittle-2>
|
|
10
|
+
<api-content>
|
|
11
|
+
<b>初始化：</b><span class="api-code">initWebSocket(options)</span><br>
|
|
12
|
+
【参数】id - [必填][唯一] 连接id<br>
|
|
13
|
+
【参数】onmessage - 接收后端消息回调函数<br>
|
|
14
|
+
【参数】onopen - 连接成功回调函数<br>
|
|
15
|
+
【参数】onclose - 连接关闭回调函数<br>
|
|
16
|
+
【参数】onerror - 连接错误回调函数<br>
|
|
17
|
+
【参数】reconnect - 断开自动重连，默认true<br>
|
|
18
|
+
|
|
19
|
+
<api-code>{{js1}}</api-code>
|
|
20
|
+
</api-content>
|
|
21
|
+
|
|
22
|
+
<api-tittle-2>3、发送消息：两种方式，根据具体需求选择</api-tittle-2>
|
|
23
|
+
<api-tittle-2>3.1 前端方式发送消息:</api-tittle-2>
|
|
24
|
+
<api-content>
|
|
25
|
+
<b>单消息发送：</b><span class="api-code">sendMessage(id, message)</span><br>
|
|
26
|
+
【参数】id - 连接id，同初始化时的id<br>
|
|
27
|
+
【参数】message - 消息内容<br>
|
|
28
|
+
<api-code>// 例：给id为"demo123"的连接发消息<br>
|
|
29
|
+
sendMessage("demo123", "这是推给你的消息");</api-code><br>
|
|
30
|
+
|
|
31
|
+
<b>群发消息：</b><span class="api-code">sendMessageByPrefix(prefix, message)</span><br>
|
|
32
|
+
【参数】prefix - 连接id的前缀<br>
|
|
33
|
+
【参数】message - 消息内容<br>
|
|
34
|
+
<api-code>// 例：给以"demo"为开头的连接，群发消息<br>
|
|
35
|
+
sendMessageByPrefix("demo", "这是群发的消息");</api-code>
|
|
36
|
+
</api-content>
|
|
37
|
+
<api-tittle-2>3.2 后端方式发送消息:</api-tittle-2>
|
|
38
|
+
<api-content>
|
|
39
|
+
参考后端工具类【WebSocketUtil】
|
|
40
|
+
</api-content>
|
|
41
|
+
|
|
42
|
+
<api-tittle-2>4、关闭WebSocket:</api-tittle-2>
|
|
43
|
+
<api-content>
|
|
44
|
+
在页面Destroy前关闭连接，如下
|
|
45
|
+
<api-code>{{js2}}</api-code>
|
|
46
|
+
</api-content>
|
|
47
|
+
|
|
48
|
+
<api-tittle-2>5、完整示例:</api-tittle-2>
|
|
49
|
+
<api-content>
|
|
50
|
+
<api-code>{{js3}}</api-code>
|
|
51
|
+
</api-content>
|
|
52
|
+
|
|
53
|
+
</div>
|
|
54
|
+
</template>
|
|
55
|
+
|
|
56
|
+
<script>
|
|
57
|
+
import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
|
|
58
|
+
|
|
59
|
+
export default {
|
|
60
|
+
name: 'ApiVueWebSocketUtil',
|
|
61
|
+
components: {
|
|
62
|
+
ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
|
|
63
|
+
},
|
|
64
|
+
data() {
|
|
65
|
+
const js1 = `// 初始化：通常只需要配置id和onmessage即可
|
|
66
|
+
initWebSocket({
|
|
67
|
+
id: this.id,
|
|
68
|
+
onmessage: (event) => {
|
|
69
|
+
console.log("前端接收到消息啦！" + event.data);
|
|
70
|
+
}
|
|
71
|
+
})`
|
|
72
|
+
const js2 = `beforeDestroy() {
|
|
73
|
+
closeWebSocket(this.id);
|
|
74
|
+
},`
|
|
75
|
+
const js3 = `<template>
|
|
76
|
+
<ap-container>
|
|
77
|
+
<ap-main margin="1111">
|
|
78
|
+
<div>
|
|
79
|
+
<el-button type="primary" @click="sendMsg">单个发消息</el-button>
|
|
80
|
+
<el-button type="primary" @click="sendMessageByPrefix">群发消息</el-button>
|
|
81
|
+
</div>
|
|
82
|
+
</ap-main>
|
|
83
|
+
</ap-container>
|
|
84
|
+
</template>
|
|
85
|
+
|
|
86
|
+
<script>
|
|
87
|
+
|
|
88
|
+
import {closeWebSocket, initWebSocket, sendMessage, sendMessageByPrefix} from "@/views/demo/WebSocketUtil";
|
|
89
|
+
|
|
90
|
+
export default {
|
|
91
|
+
name: "DemoSocket",
|
|
92
|
+
mounted() {
|
|
93
|
+
initWebSocket({
|
|
94
|
+
id: this.id,
|
|
95
|
+
onmessage: (event) => {
|
|
96
|
+
console.log("前端接收到消息：" + event.data);
|
|
97
|
+
},
|
|
98
|
+
})
|
|
99
|
+
},
|
|
100
|
+
beforeDestroy() {
|
|
101
|
+
closeWebSocket(this.id);
|
|
102
|
+
},
|
|
103
|
+
data() {
|
|
104
|
+
return {
|
|
105
|
+
id: "demo" + new Date().getTime()
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
methods: {
|
|
109
|
+
sendMsg() {
|
|
110
|
+
sendMessage(this.id, "这是单一消息");
|
|
111
|
+
},
|
|
112
|
+
sendMessageByPrefix() {
|
|
113
|
+
sendMessageByPrefix("demo", "这是群发消息");
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
< /script>`
|
|
118
|
+
|
|
119
|
+
return {
|
|
120
|
+
js1,js2,js3
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
methods: {}
|
|
124
|
+
}
|
|
125
|
+
</script>
|
|
126
|
+
|
|
127
|
+
<style scoped>
|
|
128
|
+
</style>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div style="height: 100%">
|
|
3
|
+
<h3>WebSocket工具类 - WebSocketUtil</h3>
|
|
4
|
+
<api-table :data="methodData" :columns="methodCols"/>
|
|
5
|
+
</div>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script>
|
|
9
|
+
import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
|
|
10
|
+
|
|
11
|
+
export default {
|
|
12
|
+
name: 'ApiWebSocketUtil',
|
|
13
|
+
components: {
|
|
14
|
+
ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
|
|
15
|
+
},
|
|
16
|
+
data() {
|
|
17
|
+
const methodCols = [
|
|
18
|
+
{label: '方法名', prop: 'name', width: '220px'},
|
|
19
|
+
{label: '说明', prop: 'memo', width: '300px'},
|
|
20
|
+
{label: '示例代码', prop: 'code', minWidth: '100px'}]
|
|
21
|
+
const methodData = [
|
|
22
|
+
{
|
|
23
|
+
name: 'sendMessage',
|
|
24
|
+
memo: `单点消息：推送给指定的连接<br>`,
|
|
25
|
+
code: `<span class="api-code">// 给id为"demo123"的连接发消息
|
|
26
|
+
WebSocketUtil.sendMessage("demo123", "消息内容");
|
|
27
|
+
</span>`
|
|
28
|
+
},{
|
|
29
|
+
name: 'sendMessageByPrefix',
|
|
30
|
+
memo: `广播消息：推送给指定前缀的连接<br>`,
|
|
31
|
+
code: `<span class="api-code">// 给以"demo"为开头的连接，群发消息
|
|
32
|
+
WebSocketUtil.sendMessageByPrefix("demo", "消息内容");
|
|
33
|
+
</span>`
|
|
34
|
+
}
|
|
35
|
+
]
|
|
36
|
+
|
|
37
|
+
return {
|
|
38
|
+
methodData,
|
|
39
|
+
methodCols
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
methods: {}
|
|
43
|
+
}
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<style scoped>
|
|
47
|
+
</style>
|