iview+python 前后端基本模板演示
iview+python 前后端基本模板演示
- 前后端模板
- 前端代码
- 后端代码示例
前后端模板
这篇文章分享iview加python项目的基本模板。
前端代码
<div class="home-page" id="first124466">
<div>
<span>业务名称：</span>
<i-select v-model="searchmodel.bizid" style="width:150px">
<i-option v-for="item in bussinesslistall" :value="item.bk_biz_id">{{ item.bk_biz_name }}</i-option>
</i-select>
<span>主机列表</span>
<i-select v-model="searchmodel.iplist" multiple style="width:300px">
<i-option v-for="item in hostlist"
:value="item.bk_host_innerip">{{ item.bk_host_innerip }}</i-option>
</i-select>
<span>模板名称:</span>
<i-input placeholder="" v-model="searchmodel.name" style="width:200px"></i-input>
<span>开始时间:</span>
<Date-picker type="datetime" placeholder="结束日期和时间" style="width: 200px" format="yyyy-MM-dd HH:mm:ss"
v-model="searchmodel.starttime"></Date-picker>
<i-button type="primary" @click="addone" style="float:right;">新增</i-button>
<i-button type="primary" @click="searchlist" style="float:right;margin-right: 10px;">查询</i-button>
</div>
<div style="margin-top:10px;">
<i-table :columns="columns" :data="tablelist"></i-table>
</div>
<div>
<Modal
v-model="modal"
title="新建巡检模板"
@on-ok="ok"
@on-cancel="cancel">
<div class="thediv">
<span>业务名称</span>
<i-select v-model="createmodel.bizid" style="width:300px">
<i-option v-for="item in bussinesslist" :value="item.bk_biz_id">{{ item.bk_biz_name }}</i-option>
</i-select>
</div>
<div class="thediv">
<span>模板名称</span>
<i-input placeholder="" v-model="createmodel.name" style="width:300px"></i-input>
</div>
<div class="thediv">
<span>巡检脚本</span>
<i-input type="textarea" placeholder="" v-model="createmodel.thescript" style="width:300px"></i-input>
</div>
<div class="thediv">
<span>任务类型</span>
<Radio-group v-model="createmodel.type">
<Radio label="立即">立即</Radio>
<Radio label="周期">周期</Radio>
</Radio-group>
</div>
</Modal>
</div>
<div>
<i-button @click="click()">default</i-button>
<i-button type="primary" @click="click()">primary</i-button>
<i-button type="info" @click="click()">info</i-button>
<i-button type="success" @click="click()">success</i-button>
<i-button type="warning" @click="click()">warning</i-button>
<i-button type="error" @click="click()">error</i-button>
</div>
</div>
html里包含了一个列表，一个新建用的模态框，一些搜索条件及按钮样式的示例。
以下是前端的js代码：
<script>
Vue.prototype.$http = axios;
Vue.use(iview);
new Vue({
el: '#first124466',
data() {
return {
bussinesslistall: [],
bussinesslist: [],
searchmodel: {bizid: 2, name: '', starttime: '', iplist: []},
hostlist: [],
columns: [
{
title: '模板名称',
key: 'name'
},
{
title: '业务名称',
key: 'bizname'
},
{
title: '脚本内容',
key: 'thescript'
},
{
title: '阈值',
key: 'theint'
},
{
title: '创建时间',
key: 'createtime'
},
{
title: '备注',
key: 'comment'
},
{
title: '操作',
width: 300,
render: (h, params) => {
return h('div', [h('i-button', {
props: {type: 'primary', size: 'small'},
style: {margin: '0 5px'},
on: {
click: () => {
this.deleteone(params.row)
}
}
}, '删除')
])
}
}
],
tablelist: [],
modal: false,
createmodel: {
bizid: '',
name: '',
thescript: '',
type: ''
}
}
},
methods: {
searchbiz() {
this.$http.get(site_url + 'search_biz_token').then(res => {
this.bussinesslistall = res.data.data.info
this.bussinesslistall.unshift({bk_biz_id: 0, bk_biz_name: '全部'})
})
this.$http.get(site_url + 'search_biz_token').then(res => {
this.bussinesslist = res.data.data.info
})
},
gethostlist() {
this.$http.get(site_url + 'newsearchhost?id='+this.searchmodel.bizid).then(res => {
this.hostlist = res.data.data.info
})
},
searchlist() {
this.$http(site_url + 'api/getxunjianlist/', {
method: 'get',
params: this.searchmodel
})
.then(response => {
this.tablelist = response.data.list
})
},
addone() {
this.modal = true
},
ok() {
this.$http.post(site_url + 'api/newonexunjian/', this.createmodel).then(res => {
if (res.data.result) {
this.$Message.success("提交成功！")
this.searchlist()
}
})
let bizname = ''
this.bussinesslist.forEach(item => {
if (item.bk_biz_id == this.bussinessid) {
bizname = item.bk_biz_name
}
})
},
cancel() {
},
deleteone(detail) {
this.$http.get(site_url + 'api/deleteonexunjian/?id=' + detail.id).then(res => {
if (res.data.result) {
this.$Message.success("删除成功！")
this.searchlist()
}
})
}
},
mounted() {
this.searchbiz()
this.searchlist()
this.gethostlist()
},
watch: {
'searchmodel.bizid': function () {
this.gethostlist()
}
}
})
</script>
<style>
.thediv {
margin-top: 10px;
}
</style>
前端的效果图：
后端代码示例
基本的增删查
def saveonef(request):
obj = json.loads(request.body)
testobj = obj
p = FileSave()
for attr in [f.name for f in p._meta.fields]:
if (attr in testobj):
setattr(p, attr, testobj[attr])
p.save()
return JsonResponse({"result": True})
def getxunjianrenwulist(request):
type = request.GET.get('type')
key = request.GET.get('name')
if ((type=='全部')|(type==u'全部')):
returnlist = FileSave.objects.filter(showname__contains=key).values()
else:
returnlist = FileSave.objects.filter(showname__contains=key,type=type).values()
return JsonResponse({"result": True, "list": list(returnlist)})
def deleteonef(request):
id = request.GET.get('id')
FileSave.objects.filter(id=id).delete()
return JsonResponse({"result": True})