鸿蒙os前端连接Django后端实现获取数据并合理展示

前端

代码

getdata.hml

<div class="container">
    <div class="title">
        <text class="txt">Django 6</text>
    </div>
    <div class="middle">
        <text class="txt1">姓名:</text>
        <text class="val">{{detail[0].name}}</text>
    </div>
    <div class="middle">
        <text class="txt1">年龄:</text>
        <text class="val">{{detail[0].age}}</text>
    </div>
    <div class="middle">
        <text class="txt1">性别:</text>
        <text class="val">{{detail[0].sex}}</text>
    </div>
    <div class="get">
        <button class="btn" onclick="onclick">获取信息</button>
    </div>
    <div class="back">
        <text>{{winfo}}</text>
    </div>
</div>

getdata.css

.container{
    background: linear-gradient(120deg, #3498db, #8e44ad);
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.title{
    margin-top: 100px;
    margin-left: 35%;
}
.txt{
    color: white;
    font-size: 40px;

}
.txt1{
    font-size: 30px;
    margin-left: 10%;
}
.btn{
    width: 150px;
    height: 45px;
    margin-left: 40%;
}

getdata.js

import fetch from '@system.fetch';
import router from '@system.router';
import qs from 'querystring'
export default{
    data:{
        winfo:"",
        detail:[{
                    name:"aaa",
                    age:"22",
                    sex:"男"
                },
                {
                    name:"bbb"
                }
        ]
    },
    onclick(){
        //        发起网络请求
        fetch.fetch({
            url:`http://127.0.0.1:8000/tt/Getdata/`,
            data:qs.stringify({'id':'1'}),
//            前端要给后端传输的数据
            responseType:"json",
//            格式
            method:"POST",
//            方式
            success:(resp)=>
            {
                var getdata
                getdata=JSON.parse(resp.data)
//                以json格式获取后端数据
                this.detail[0].id=getdata[0].id
                this.detail[0].name=getdata[0].name
                this.detail[0].age=getdata[0].age
                this.detail[0].sex=getdata[0].sex
                this.winfo=resp.data
                console.log("返回数据："+this.winfo)
            },
            fail:(resp)=>{
                console.log("获取数据失败")
            }
        });
    },
}

运行效果

“获取信息”按钮点击前后对比

 后端

views.py文件中代码

class Getdata(APIView):
    def post(self, request):
        try:
            ID = request.data.get("id")  # 获取前端数据
            print("前端：" + ID)
            res = B.objects.filter(id=ID).last()  # 获取数据库最新数据
            name = res.Name
            age = res.Age
            sex = res.Sex
            alldata = [{
                'name': name, 'age': age, 'sex': sex
            }]  # 字典变量，存放数据库获取来的数据
            print(alldata)
            alldata_json = json.dumps(alldata, ensure_ascii=False)
            # 将变量alldata编码成Json字符串,ensure_ascii：默认True输出ASCLL码，如果把这个该成False,就可以输出中文
            return HttpResponse(alldata_json)  # 给前端返回数据
        except B.DoesNotExist as e:
            print("刷新失败" + e)  # 输出失败结果及其原因
        else:
            return HttpResponse("请求失败")