前后端代码联调 - 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-optionv-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-optionv-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-optionv-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-optionv-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 = nullthis.counties = []this.countyId = nullfetch('/api/districts/' + this.provId).then(resp => resp.json()).then(json => this.cities = json.cities)},selectCity() {this.counties = []this.countyId = nullfetch('/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-columnprop="agentid"label="编号"width="80"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="tel"label="电话"width="180"></el-table-column><el-table-columnprop="servstar"label="服务星级"width="280"><el-template slot-scope="scope"><el-ratedisabledv-model="scope.row.servstar":colors="['#ffc0c0', '#ffa0a0', '#ff0000']"></el-rate></el-template></el-table-column></el-table><el-paginationlayout="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.resultsthis.count = json.countthis.nextPage = json.nextthis.prevPage = json.previous})}}}})
</script>

最后呈现出的效果如下图

感谢阅读❤，我将持续更新
项目详情代码请参考我的码云： https://gitee.com/dcstempt_ping/izufang_rent

“安居客“住房系统-基于Python-Django前后端分离开发（三）——前后端代码联调相关推荐

安居客住房系统-基于Python-Django前后端分离开发（一）——初始化项目及ORM关系映射
"安居客"住房系统-基于Python-Django前后端分离开发作者:代昌松项目详情代码请参加我的代码仓库:https://gitee.com/dcstempt_ping/iz ...
“安居客“住房系统-基于Python-Django前后端分离开发（二）——基于RESTful架构的数据接口配置以及Redis高速缓存
"安居客"住房系统-基于Python-Django前后端分离开发(二) 基于Django-Rest-Framework创建接口数据(二) 文章目录 "安居客"住 ...
安居客住房系统-基于Python-Django前后端分离开发（四）——户型、用户数据接口处理及其筛选
户型.用户数据接口处理及其筛选在前面的文档中,我已经完成了部分的数据接口,相信大家看了我的文档,已经能够明白如何书写序列化器.设置高级筛选条件.以及返回接口数据的视图函数,这里我将直接给大家房源的视 ...
基于 Python 的信用评分模型开发-附数据和代码
来源 | 知乎作者 | Carl 文章链接 | https://zhuanlan.zhihu.com/p/35284849 信用评分模型可用"四张卡"来表示,分别是 A卡(Ap ...
前后端分离开发模式下后端质量的保证 —— 单元测试
概述在今天, 前后端分离已经是首选的一个开发模式.这对于后端团队来说其实是一个好消息,减轻任务并且更专注.在测试方面,就更加依赖于单元测试对于API以及后端业务逻辑的较验.当然单元测试并非在前后端分 ...
ultraedit 运行的是试用模式_单元测试 —— 前后端分离开发模式下后端质量的保证...
概述在今天, 前后端分离已经是首选的一个开发模式.这对于后端团队来说其实是一个好消息,减轻任务并且更专注.在测试方面,就更加依赖于单元测试对于API以及后端业务逻辑的较验.当然单元测试并非在前后端分 ...
【基于python+Django的博客系统-哔哩哔哩】 https://b23.tv/bmRfAMu
[基于python+Django的博客系统-哔哩哔哩] https://b23.tv/bmRfAMu https://b23.tv/bmRfAMu
基于Python+Django+Vue+MYSQL的古诗词在线学习系统
项目介绍基于python+django+vue的古诗词在线学习网站则旨在通过标签分类管理等方式,实现管理员:首页.个人中心.用户管理.诗词管理.主题管理.情感色彩管理.风格管理.我的收藏管理.诗词论 ...
基于Python+django的医院排队叫号系统-计算机毕业设计
项目介绍随着时代发展,越来越多的人需要到医院进行挂号检查等操作,如果全部都到医院现场挂号,一方面的浪费大量的时间和精力,另一方面是浪费大量的医疗资源,为了能够让患者更加方便的进行挂号,我们通过pyt ...

“安居客“住房系统-基于Python-Django前后端分离开发（三）——前后端代码联调

前后端代码联调 - Vue + Element UI

获取省级行政区API接口数据

省市区三级联动效果

经理人数据表格

“安居客“住房系统-基于Python-Django前后端分离开发（三）——前后端代码联调相关推荐

最新文章

热门文章