-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdoc.html
executable file
·135 lines (120 loc) · 4.1 KB
/
doc.html
1
2
3
4
5
6
7
8
9
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<title>API接口模拟</title>
<link href="http://lib.baomitu.com/bulma/0.5.1/css/bulma.min.css" rel="stylesheet">
<link href="http://lib.baomitu.com/highlight.js/9.12.0/styles/default.min.css" rel="stylesheet">
<link href="http://lib.baomitu.com/highlight.js/9.12.0/styles/rainbow.min.css" rel="stylesheet">
<style>
body,html{height:100%;}
.main{height:calc(100% - 157px);}
.main>.columns{height:100%;}
.sidebar{overflow:auto;background-color:#eee;}
.search-bar{border-bottom:1px solid #e8e8e8;}
.docs{overflow:auto;background-color:#474949;}
.docs .notification{margin-bottom:0;white-space:nowrap;}
.docs pre{margin:0;padding:0;background-color:inherit;}
.docs .hljs-ln-numbers{padding-right:.5em;min-width:26px;text-align:right;}
[v-cloak]{display:none;}
</style>
</head>
<body>
<section class="hero is-dark">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">API接口模拟</p>
<p class="subtitle">简要的接口模拟器</p>
</div>
</div>
</section>
<section id="app" class="main" v-cloak>
<div class="columns is-mobile is-gapless">
<div class="column is-one-quarter sidebar">
<p class="notification is-radiusless search-bar">
<input class="input" type="text" placeholder="搜索" v-model="searchQuery">
</p>
<aside class="menu">
<ul class="menu-list">
<li v-for="it of filteredDocs" :key="it.file" @click="showConetnt(it)">
<a :class="{'is-active': menuActiveItem.file === it.file}">{{it.title}}</a>
</li>
</ul>
</aside>
</div>
<div class="column docs">
<div v-if="showInfos" class="notification is-primary is-radiusless">
<p><strong>文件地址:</strong> {{menuActiveItem.file}}</p>
<p>
<strong>接口地址:</strong> <a :href="menuActiveItem.url" target="_blank">{{menuActiveItem.url}}</a>
</p>
</div>
<div v-else class="notification is-info">
<p>没有接口数据</p>
</div>
<pre><code ref="docsContent" class="hljs json"></code></pre>
</div>
</div>
</section>
<script src="http://lib.baomitu.com/vue/2.4.2/vue.min.js"></script>
<script src="http://lib.baomitu.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://lib.baomitu.com/highlight.js/9.12.0/highlight.min.js"></script>
<script src="http://lib.baomitu.com/highlightjs-line-numbers.js/2.0.0/highlightjs-line-numbers.js"></script>
<script>
(function() {
var app = new Vue({
el: '#app',
data: {
// search key
searchQuery: '',
// select item
menuActiveItem: {},
// menu list
menuList: [
// { title: '', url: '', file: '' },
],
},
computed: {
// show api file/url info
showInfos: function() {
return typeof this.menuActiveItem.file === 'string';
},
// search doc by regexp
filteredDocs: function () {
var self = this;
if (self.searchQuery === '') {
return self.menuList;
}
var searchRegex = new RegExp(self.searchQuery, 'i');
return self.menuList.filter(function (it) {
return (
searchRegex.test(it.title) ||
searchRegex.test(it.url) ||
searchRegex.test(it.file)
);
});
},
},
methods: {
// get ajax content
showConetnt: function(it, idx) {
var that = this;
that.menuActiveItem = it;
$.get(it.url, function (data) {
var docsContent = that.$refs.docsContent;
var ret = hljs.highlight('json', JSON.stringify(data, null, ' '), true);
docsContent.innerHTML = ret.value;
hljs.lineNumbersBlock(docsContent);
}, 'json');
},
},
});
// ejs output
app.menuList = @menuList;
})();
</script>
</body>
</html>