Skip to content

Commit

Permalink
优化代码,采用async/await
Browse files Browse the repository at this point in the history
  • Loading branch information
zaaksam committed Sep 12, 2017
1 parent 8fe7bb7 commit 08191f3
Show file tree
Hide file tree
Showing 11 changed files with 476 additions and 420 deletions.
62 changes: 57 additions & 5 deletions web/ts/api.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,65 @@
export interface APIStatic {
initURL: (url: string) => string
import Axios, { AxiosRequestConfig } from 'axios'

interface APIStatic {
/**
* get请求
*/
get<T>(url: string): Promise<APIResult<T>>
/**
* delete请求
*/
delete<T>(url: string): Promise<APIResult<T>>
/**
* put请求
*/
put<T>(url: string, data?: any): Promise<APIResult<T>>
/**
* post请求
*/
post<T>(url: string, data?: URLSearchParams): Promise<APIResult<T>>
}

const API: APIStatic = {
initURL: (url: string) => {
async function request<T>(method: 'get' | 'delete' | 'post' | 'put', url: string, data?: any) {
let result: APIResult<T> = { code: -1, msg: '' }

if (globalConfig.token != '') {
url += url.indexOf('?') == -1 ? '?' : '&'
url += 'token=' + globalConfig.token
}

let conf: AxiosRequestConfig = {
method: method,
url: '/api' + url
}
if (data) {
conf.data = data
}

return url
try {
let res = await Axios.request(conf)
result.code = res.data.code
result.msg = res.data.msg
result.data = res.data.data

} catch (err) {
result.msg = err.message
}

return result
}

const API: APIStatic = {
get: <T>(url: string) => {
return request<T>('get', url)
},
delete: <T>(url: string) => {
return request<T>('delete', url)
},
put: <T>(url: string, data?: T) => {
return request<T>('put', url, data)
},
post: <T>(url: string, data?: URLSearchParams) => {
return request<T>('post', url, data)
}
}

Expand Down
10 changes: 5 additions & 5 deletions web/ts/router.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import Vue from 'vue'
import VueRouter from 'vue-router'

import MyWhiteList from '../vue/whiteList.vue'
import MyPortMap from '../vue/portMap.vue'
import MyWhiteList from '../vue/whitelist.vue'
import MyPortMap from '../vue/portmap.vue'
import MyLog from '../vue/log.vue'
import MyDoc from '../vue/doc.vue'

Vue.use(VueRouter)

const routes: VueRouter.RouteConfig[] = [
{ path: globalConfig.prefixPath + '/web/whitelist', name: 'whiteList', component: MyWhiteList },
{ path: globalConfig.prefixPath + '/web/portmap', name: 'portMap', component: MyPortMap },
const routes = <VueRouter.RouteConfig[]>[
{ path: globalConfig.prefixPath + '/web/whitelist', name: 'whitelist', component: MyWhiteList },
{ path: globalConfig.prefixPath + '/web/portmap', name: 'portmap', component: MyPortMap },
{ path: globalConfig.prefixPath + '/web/log', name: 'log', component: MyLog },
{ path: globalConfig.prefixPath + '/web/doc', name: 'doc', component: MyDoc }
]
Expand Down
1 change: 1 addition & 0 deletions web/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"sourceMap": true
},
"include": [
"./types/**/*",
"./ts/**/*",
"./vue/**/*"
],
Expand Down
3 changes: 1 addition & 2 deletions web/vue/app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@ body {
</style>

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { Vue, Component } from 'vue-property-decorator'
import MyTop from './top.vue'
import MyBottom from './bottom.vue'
Expand Down
3 changes: 1 addition & 2 deletions web/vue/bottom.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@


<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class MyBottom extends Vue {
Expand Down
3 changes: 1 addition & 2 deletions web/vue/doc.vue
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,8 @@
</template>

<script lang="ts">
import Vue from 'vue'
import { Vue, Component } from 'vue-property-decorator'
import _ from 'lodash'
import { Component } from 'vue-property-decorator'
interface docModel {
alias: string
Expand Down
149 changes: 93 additions & 56 deletions web/vue/log.vue
Original file line number Diff line number Diff line change
@@ -1,93 +1,130 @@
<template>
<div>
<Row>
<Col span="24">
<MyPage :total="table.list.total" :pageIndex="table.list.pageIndex" :pageSize="table.list.pageSize" @onLoad="onLoad"></MyPage>
</Col>
<Row type="flex" style="margin-top: 10px; margin-bottom:15px">
类型:
<Select v-model="query.type" style="width: 120px">
<Option value="All"></Option>
<Option value="Info"></Option>
<Option value="Debug"></Option>
<Option value="Error"></Option>
<Option value="Warning"></Option>
<Option value="Critical"></Option>
</Select>
&nbsp;&nbsp;&nbsp;&nbsp;指定时间:
<Date-picker type="datetime" placement="bottom" placeholder="删除指定时间之前数据" style="width: 170px" @on-change="onDatetimeChange"></Date-picker>
&nbsp;&nbsp;&nbsp;&nbsp;内容:
<Input v-model="query.content" placeholder="模糊关键字" style="width: 160px"></Input>
&nbsp;&nbsp;&nbsp;&nbsp;
<Button type="primary" @click="onDel">删除指定</Button>
</Row>
<p>&nbsp;</p>
<Table stripe border :columns="table.columns" :data="table.list.items">
<Table stripe border :columns="tableColumns" :data="tableData.items">
</Table>
<MyPage :total="tableData.total" :pageIndex="tableData.pageIndex" :pageSize="tableData.pageSize" @onChange="onLoad"></MyPage>
</div>
</template>

<script lang="ts">
import Vue from 'vue'
import VueRouter from 'vue-router'
import { Component } from 'vue-property-decorator'
import { Vue, Component } from 'vue-property-decorator'
import _ from 'lodash'
import moment from 'moment'
import Axios, { AxiosResponse, AxiosError } from 'axios'
import MyPage from './page.vue'
import API from '../ts/api'
interface listModel extends BaseListModel {
items: LogModel[]
}
interface tableModel {
columns: any[]
list: listModel
}
@Component({
components: {
MyPage
}
})
export default class MyLog extends Vue {
table: tableModel = {
list: {
total: 0,
pageIndex: 1,
pageSize: 10,
pageCount: 0,
items: <LogModel[]>[],
query: Model.Log = {
type: 'All',
content: '',
created: 0
}
tableData: APIListModel<Model.Log> = {
pageIndex: 1,
pageSize: 10,
pageCount: 0,
total: 0,
items: []
}
tableColumns: any[] = <any>[
{
title: '类型',
key: 'type'
},
{
title: '内容',
key: 'content'
},
columns: <any[]>[
{
title: '类型',
key: 'type'
},
{
title: '内容',
key: 'content'
},
{
title: '记录时间',
key: 'created',
render: (h: Vue.CreateElement, params: any): Vue.VNode => {
return h('span', moment.unix(params.row.created).format('YYYY-MM-DD HH:mm:ss'))
}
{
title: '记录时间',
key: 'created',
render: (h: Vue.CreateElement, params: any) => {
return h('span', moment.unix(params.row.created).format('YYYY-MM-DD HH:mm:ss'))
}
]
}
}
]
mounted() {
this.onLoad()
}
onLoad() {
async onLoad() {
let pi = _.parseInt(this.$route.query.pi)
let ps = _.parseInt(this.$route.query.ps)
if (_.isNaN(pi)) {
pi = this.table.list.pageIndex
pi = this.tableData.pageIndex
}
if (_.isNaN(ps)) {
ps = this.table.list.pageSize
ps = this.tableData.pageSize
}
let pms = new URLSearchParams()
pms.set('pageIndex', pi.toString())
pms.set('pageSize', ps.toString())
let result = await API.get<Model.Logs>('/log/list/?' + pms.toString())
if (result.code === 10000) {
this.tableData = result.data!.list
} else {
this.$Message.error({ duration: 5, content: result.msg + '(' + result.code.toString() + ')' })
}
}
async onDel() {
if (this.query.created <= 0) {
this.$Message.error({ duration: 5, content: '指定时间必须选择' })
return
}
let pms = new URLSearchParams()
pms.set('created', this.query.created.toString())
if (this.query.type != 'All') {
pms.set('type', this.query.type)
}
if (this.query.content != '') {
pms.set('content', this.query.content)
}
Axios.get(API.initURL('/api/log/list'), { params: { pageIndex: pi, pageSize: ps } })
.then((res: AxiosResponse) => {
this.table.list = <listModel>res.data.data.list
let result = await API.delete<any>('/log/?' + pms.toString())
if (result.code === 10000) {
this.onLoad()
} else {
this.$Message.error({ duration: 5, content: result.msg + '(' + result.code.toString() + ')' })
}
}
if (res.data.code === 90000) {
this.$Message.error({ duration: 5, content: res.data.msg + '(' + res.data.code.toString() + ')' })
}
})
.catch((err: AxiosError) => {
this.$Message.error({ duration: 5, content: err.message + '(' + err.code + ')' })
})
onDatetimeChange(expiredStr: string) {
let unix = moment(expiredStr, 'YYYY-MM-DD HH:mm:ss').unix()
if (_.isNaN(unix)) {
this.query.created = 0
} else {
this.query.created = unix
}
}
}
</script>
20 changes: 13 additions & 7 deletions web/vue/page.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
<template>
<Page :total="total" :current="pageIndex" :page-size="pageSize" @on-change="onPageChange" @on-page-size-change="onPageSizeChange" show-total show-sizer>
<Page class="myPage" :total="total" :current="pageIndex" :page-size="pageSize" @on-change="onPageChange" @on-page-size-change="onPageSizeChange" placement="top" show-total show-sizer>
</Page>
</template>

<style>
.myPage {
height: 60px;
line-height: 60px;
}
</style>

<script lang="ts">
import Vue from 'vue'
import { Vue, Component, Prop } from 'vue-property-decorator'
import VueRouter from 'vue-router'
import { Component, Prop } from 'vue-property-decorator'
@Component
export default class MyPage extends Vue {
Expand All @@ -24,17 +30,17 @@ export default class MyPage extends Vue {
}
url += 'pi=' + pi.toString()
this.$router.replace(url)
this.onLoad()
this.onChange()
}
onPageSizeChange(ps: number) {
let url = this.$route.path + '?ps=' + ps.toString() + '&pi=1'
this.$router.replace(url)
this.onLoad()
this.onChange()
}
onLoad() {
this.$emit('onLoad')
onChange() {
this.$emit('onChange')
}
}
</script>
Loading

0 comments on commit 08191f3

Please sign in to comment.