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

最新推荐文章于 2023-02-02 15:39:16 发布

代__-__代

最新推荐文章于 2023-02-02 15:39:16 发布

阅读量887

点赞数 1

分类专栏：前后端分离开发文章标签： ajax vue html css3 javascript

本文链接：https://blog.csdn.net/weixin_45606738/article/details/107916800

版权

前后端分离开发专栏收录该内容

7 篇文章 2 订阅

订阅专栏

前后端代码联调 - 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

代__-__代

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
“安居客“住房系统-基于Python-Django前后端分离开发（三）——前后端代码联调

前后端代码联调 - Vue + Element UI作者：代昌松这里我将在static/html文件夹下创建一个test.py的前端数据测试页，通过Ajax发起异步请求的方式拿到后端数据，然后通过Vue.js渲染前端页面。此处我会利用到https://element.eleme.cn/#/zh-CN 的一些下拉列表，样式，表格等等组件建立我的测试网页。获取省级行政区API接口数据<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫