Skip to content

Commit 38e379f

Browse files
xdai555xdai555
committed
textfsm online demo
1 parent 86f3c8d commit 38e379f

8 files changed

Lines changed: 220 additions & 84 deletions

File tree

‎demo/fastapi_demo/templates/data.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name":"axios",
3+
"url": "https://axios-http.com/",
4+
"page": "1",
5+
"address": {
6+
"city":"北京",
7+
"country": "中国"
8+
}
9+
}

‎demo/fastapi_demo/templates/textfsm_online.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>TextFSM 在线解析 | xdai.vip</title>
9+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
11+
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
12+
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
13+
</head>
14+
15+
<body>
16+
<div id="app">
17+
<el-container>
18+
<el-header>
19+
<h1>TextFSM 在线解析</h1>
20+
</el-header>
21+
<el-main>
22+
<el-row>
23+
<el-col :span="8">
24+
<div class="grid-content" style="margin: 3px">
25+
<el-input type="textarea" placeholder="请输入原始 CLI 内容" v-model="raw_text" @change="textFSMParser"></el-input>
26+
</div>
27+
</el-col>
28+
<el-col :span="8">
29+
<div class="grid-content" style="margin: 3px">
30+
<el-input type="textarea" placeholder="请输入 TextFsm 模板" v-model="template_text"
31+
@change="textFSMParser()"></el-input>
32+
</div>
33+
</el-col>
34+
<el-col :span="8">
35+
<div class="grid-content" style="margin: 3px">
36+
<el-input type="textarea" placeholder="尚未匹配到结果" :value="result" ></el-input>
37+
</div>
38+
</el-col>
39+
40+
</el-row>
41+
</el-main>
42+
</el-container>
43+
44+
</div>
45+
46+
<script>
47+
const vm = new Vue({
48+
el: "#app",
49+
data (){
50+
return {
51+
raw_text: '',
52+
template_text: '',
53+
result: ''
54+
}
55+
},
56+
methods: {
57+
textFSMParser () {
58+
axios.get("./data.json").then(res=>(this.result=JSON.stringify(res.data)))
59+
}
60+
}
61+
})
62+
</script>
63+
</body>
64+
</html>

‎demo/fastapi_demo/textfsm_demo.py‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import textfsm
2+
import tempfile
3+
4+
def str_to_file_obj(text):
5+
f_obj = tempfile.NamedTemporaryFile()
6+
f_obj.write(text)
7+
# 确保string立即写入文件
8+
f_obj.flush()
9+
# 将文件读取指针返回到文件开头位置
10+
f_obj.seek(0)
11+
return f_obj
12+
13+
14+
def textfsm_parser(raw_text, template_text):
15+
textfsm_data = []
16+
fsm_handler = None
17+
18+
try:
19+
fsm_handler = textfsm.TextFSM(str_to_file_obj(template_text))
20+
for obj in fsm_handler.ParseText(raw_text):
21+
entry = {}
22+
for index, entry_value in enumerate(obj):
23+
entry[fsm_handler.header[index]] = entry_value
24+
textfsm_data.append(entry)
25+
return textfsm_data
26+
27+
except textfsm.parser.Error as tfte:
28+
return str(tfte)
29+
30+
raw_text = r'''IP
31+
192.168.1.1
32+
IP
33+
192.168.1.12
34+
IP
35+
192.168.1.13
36+
IP
37+
192.168.1.14'''
38+
template_text = b'''Value IPADD (\d+(\.\d+){3})
39+
40+
Start
41+
^IP
42+
^${IPADD} -> Record'''
43+
44+
ret = textfsm_parser(raw_text, template_text)
45+
print(ret)

‎demo/vue_demo/myvue/src/App.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<template>
22
<div id="app">
3-
<router-view/>
3+
<router-view></router-view>
44
</div>
55
</template>
66

77
<script>
88
import HelloWorld from './components/HelloWorld.vue'
99
import myHello from './components/hello.vue'
1010
import Index from './components/Index.vue'
11+
import TodoList from './components/TodoList'
1112
1213
/*
1314
添加组件的流程：
@@ -23,7 +24,7 @@ main.js 和 index.html 一般情况下是不用做改动的。
2324
*/
2425
2526
export default {
26-
components: { HelloWorld, myHello, Index },
27+
components: { HelloWorld, myHello, Index, TodoList },
2728
name: 'App'
2829
}
2930
</script>

‎demo/vue_demo/myvue/src/components/HelloWorld.vue‎

Lines changed: 1 addition & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,6 @@
11
<template>
22
<div class="hello">
33
<h1>{{ msg }}</h1>
4-
<h2>Essential Links</h2>
5-
<ul>
6-
<li>
7-
<a
8-
href="https://vuejs.org"
9-
target="_blank"
10-
>
11-
Core Docs
12-
</a>
13-
</li>
14-
<li>
15-
<a
16-
href="https://forum.vuejs.org"
17-
target="_blank"
18-
>
19-
Forum
20-
</a>
21-
</li>
22-
<li>
23-
<a
24-
href="https://chat.vuejs.org"
25-
target="_blank"
26-
>
27-
Community Chat
28-
</a>
29-
</li>
30-
<li>
31-
<a
32-
href="https://twitter.com/vuejs"
33-
target="_blank"
34-
>
35-
Twitter
36-
</a>
37-
</li>
38-
<br>
39-
<li>
40-
<a
41-
href="http://vuejs-templates.github.io/webpack/"
42-
target="_blank"
43-
>
44-
Docs for This Template
45-
</a>
46-
</li>
47-
</ul>
48-
<h2>Ecosystem</h2>
49-
<ul>
50-
<li>
51-
<a
52-
href="http://router.vuejs.org/"
53-
target="_blank"
54-
>
55-
vue-router
56-
</a>
57-
</li>
58-
<li>
59-
<a
60-
href="http://vuex.vuejs.org/"
61-
target="_blank"
62-
>
63-
vuex
64-
</a>
65-
</li>
66-
<li>
67-
<a
68-
href="http://vue-loader.vuejs.org/"
69-
target="_blank"
70-
>
71-
vue-loader
72-
</a>
73-
</li>
74-
<li>
75-
<a
76-
href="https://github.com/vuejs/awesome-vue"
77-
target="_blank"
78-
>
79-
awesome-vue
80-
</a>
81-
</li>
82-
</ul>
834
</div>
845
</template>
856

@@ -89,7 +10,7 @@ export default {
8910
name: 'HelloWorld',
9011
data () {
9112
return {
92-
msg: 'Welcome to Vue.js App'
13+
msg: 'Welcome to Vue.js App 1'
9314
}
9415
}
9516
}

‎demo/vue_demo/myvue/src/components/TodoList.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div>
3+
<h1>hello {{ name }}</h1>
4+
<div>
5+
<input type="text" v-model="info">
6+
<button @click="handleClick">添加</button>
7+
</div>
8+
<li class="item" v-for="item in list" :key="item" :param="item">{{ item }}</li>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
props: ['param'],
15+
data () {
16+
return {
17+
name: 'test',
18+
info: '',
19+
list: []
20+
}
21+
},
22+
methods: {
23+
handleClick () {
24+
console.log(this.info)
25+
this.list.push(this.info)
26+
this.info = ''
27+
}
28+
}
29+
}
30+
</script>
31+
32+
<style scoped>
33+
.item {
34+
color: red;
35+
font-size: 20px;
36+
}
37+
</style>

‎demo/vue_demo/myvue/src/router/index.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import HelloWorld from '@/components/HelloWorld'
44
import myHello from '@/components/hello'
55
import NotFound from '@/components/NotFound'
66
import Index from '@/components/Index'
7+
import TodoList from '@/components/TodoList'
78

89
Vue.use(Router)
910

1011
/* export default命令，为模块指定默认输出。 export default 命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。 */
1112
export default new Router({
1213
routes: [
1314
{
14-
path: '/',
15+
path: '/hello-world',
1516
name: 'HelloWorld',
1617
component: HelloWorld
1718
},
@@ -25,9 +26,13 @@ export default new Router({
2526
redirect: '/'
2627
},
2728
{
28-
path: '/index',
29+
path: '/',
2930
component: Index
3031
},
32+
{
33+
path: '/todo',
34+
component: TodoList
35+
},
3136
{
3237
path: '*',
3338
component: NotFound

‎demo/vue_demo/todo.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>ToDo List</title>
9+
<script src="./js/vue.js"></script>
10+
</head>
11+
12+
<body>
13+
<div id="app">
14+
hello {{ name }}
15+
<div>
16+
<input type="text" v-model="info">
17+
<button @click="handleClick">添加</button>
18+
</div>
19+
<ul>
20+
<li v-for="item in list"> {{ item }}</li>
21+
</ul>
22+
<!-- for 循环里面的 item 是为了给 v-bind 绑定的参数 param 进行赋值 -->
23+
<todo-item v-for="item in list" :param="item"></todo-item>
24+
</div>
25+
26+
<script>
27+
// 在 Vue 的实例里面三个 param 是互相对应的
28+
Vue.component("todo-item", {
29+
props: ['param'],
30+
template: '<li>{{ param }}</li>'
31+
})
32+
33+
new Vue({
34+
el: "#app",
35+
data() {
36+
return {
37+
name: "test",
38+
info: '',
39+
list: []
40+
}
41+
},
42+
methods: {
43+
handleClick() {
44+
console.log(this.info)
45+
this.list.push(this.info)
46+
this.info = ''
47+
}
48+
}
49+
})
50+
</script>
51+
52+
</body>
53+
54+
</html>

0 commit comments

Comments
 (0)