前后端代码联调 - Vue + Element UI
作者:代昌松
这里我将在static/html
文件夹下创建一个test.py
的前端数据测试页,通过Ajax发起异步请求的方式拿到后端数据,然后通过Vue.js渲染前端页面。
此处我会利用到https://element.eleme.cn/#/zh-CN 的一些下拉列表,样式,表格等等组件建立我的测试网页。
获取省级行政区API接口数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前后端联调测试</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<h1>Hello World!</h1>
<hr>
<div id="app1">
<el-select v-model="provId" filterable placeholder="请选择">
<el-option
v-for="prov in provinces"
:key="prov.distid"
:label="prov.name"
:value="prov.distid">
</el-option>
</el-select>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app1',
data: {
provId: null,
provinces: [],
},
created() {
fetch('/api/districts/')
.then(resp => resp.json())
.then(json => this.provinces = json.result)
}
})
</script>
</body>
</html>
省市区三级联动效果
完成到这一步,表明获取接口数据就已经成功了,接下来要做的就是实现省市区三级联动的效果。废话不多说,直接上代码:
<div id="app1">
<el-select v-model="provId" filterable placeholder="请选择" @change="selectProv">
<el-option
v-for="prov in provinces"
:key="prov.distid"
:label="prov.name"
:value="prov.distid">
</el-option>
</el-select>
<el-select v-model="cityId" filterable placeholder="请选择" @change="selectCity">
<el-option
v-for="city in cities"
:key="city.distid"
:label="city.name"
:value="city.distid">
</el-option>
</el-select>
<el-select v-model="countyId" filterable placeholder="请选择">
<el-option
v-for="county in counties"
:key="county.distid"
:label="county.name"
:value="county.distid">
</el-option>
</el-select>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app1',
data: {
provId: null,
provinces: [],
cityId: null,
cities: [],
countyId: null,
counties: []
},
created() {
fetch('/api/districts/')
.then(resp => resp.json())
.then(json => this.provinces = json.result)
},
methods: {
selectProv() {
this.cities = []
this.cityId = null
this.counties = []
this.countyId = null
fetch('/api/districts/' + this.provId)
.then(resp => resp.json())
.then(json => this.cities = json.cities)
},
selectCity() {
this.counties = []
this.countyId = null
fetch('/api/districts/' + this.cityId)
.then(resp => resp.json())
.then(json => this.counties = json.cities)
}
}
})
</script>
</body>
</html>
经理人数据表格
同样利用Element的框架制作可以翻页的经理人表格,代码如下
<div id="app2">
<el-table :data="agents" style="width: 60%">
<el-table-column
prop="agentid"
label="编号"
width="80">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="tel"
label="电话"
width="180">
</el-table-column>
<el-table-column
prop="servstar"
label="服务星级"
width="280">
<el-template slot-scope="scope">
<el-rate
disabled
v-model="scope.row.servstar"
:colors="['#ffc0c0', '#ffa0a0', '#ff0000']">
</el-rate>
</el-template>
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
page-size="5"
:total="count"
@current-change="handleCurrentChange"
@prev-click="loadData(prevPage)"
@next-click="loadData(nextPage)">
</el-pagination>
</div>
<script>
const app2 = new Vue({
el: '#app2',
data: {
count: 0,
agents: [],
nextPage: null,
prevPage: null,
},
created() {
this.loadData('/api/agents/')
},
methods: {
handleCurrentChange(currentPage) {
this.loadData('/api/agents/?page=' + currentPage)
},
loadData(url) {
if (url) {
fetch(url)
.then(resp => resp.json())
.then(json => {
this.agents = json.results
this.count = json.count
this.nextPage = json.next
this.prevPage = json.previous
})
}
}
}
})
</script>
最后呈现出的效果如下图
感谢阅读❤,我将持续更新
项目详情代码请参考我的码云: https://gitee.com/dcstempt_ping/izufang_rent