django 第六次培训-优快云博客

本文链接：https://blog.youkuaiyun.com/cxy2002cxy/article/details/126558117

前端：

hml

<div id="wrapper">
    <div id="div1">
        <div id="div2">
            <text id="text1">用户个人中心</text>
            <div id="div3">
                <div id="div4">
                    <text id="text2">基本信息：</text>
                    <button id="button1" onclick="onClick" value="刷 新"></button>
                </div>
                <div id="div5">
                    <text id="text3">姓  名：</text>
                    <text id="text4">{{detail[0].name}}</text>
                </div>
                <div id="div6">
                    <text id="text5">性  别：</text>
                    <text id="text6">{{detail[0].sex}}</text>
                </div>
                <div id="div7">
                    <text id="text7">年  龄：</text>
                    <text id="text8">{{detail[0].age}}</text>
                </div>
                <div id="div8">
                    <text id="text9">手机号：</text>
                    <text id="text10">{{detail[0].phone}}</text>
                </div>
                <div id="div9">
                    <text id="text11">收  入：</text>
                    <text id="text12">{{detail[0].income}}</text>
                </div>
                <div id="div12">
                    <text id="text13">{{winfo}}</text>
                </div>
            </div>
        </div>
    </div>
</div>

css

#wrapper {
    flex-direction: column;
    width: 100%;
}

#div1 {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#div2 {
    width: 100%;
    height: 100%;
    flex-direction: column;
}

#text1 {
    height: 7%;
    width: 100%;
    text-align: center;
    letter-spacing: 7px;
    font-weight: 600;
    opacity: 0.36;
    background-color: #7c7979;
}

#div3 {
    width: 100%;
    height: 93%;
    flex-direction: column;
}

#div4 {
    width: 100%;
    height: 50px;
    background-color: #ebe9e9;
}

#text2 {
    height: 100%;
    width: 60%;
}

#button1 {
    width: 40%;
    height: 100%;
    font-weight: 500;
    font-size: 24px;
    max-width: 0;
    icon-width: 0;
    radius: 0;
}

#div5 {
    width: 100%;
    height: 50px;
    background-color: #ebe9e9;
}

#text3 {
    height: 100%;
    width: 50%;
    left: 25px;
}

#text4 {
    width: 50%;
    height: 100%;
    text-align: center;
}

#div6 {
    width: 100%;
    height: 50px;
    background-color: #ebe9e9;
}

#text5 {
    height: 100%;
    width: 50%;
    left: 25px;
}

#text6 {
    height: 100%;
    width: 50%;
    text-align: center;
    font-size: 24px;
}

#div7 {
    width: 100%;
    height: 50px;
    background-color: #ebe9e9;
}

#text7 {
    height: 100px;
    width: 50%;
    left: 25px;
}

#text8 {
    height: 100%;
    width: 50%;
    text-align: center;
    font-size: 24px;
}

#div8 {
    width: 100%;
    height: 50px;
    background-color: #ebe9e9;
}

#text9 {
    height: 100%;
    width: 50%;
    left: 25px;
}

#text10 {
    height: 100%;
    width: 50%;
    text-align: center;
    font-size: 24px;
}

#div9 {
    height: 50px;
    background-color: #ebe9e9;
}

#text11 {
    height: 100%;
    width: 50%;
    left: 25px;
}

#text12 {
    height: 100%;
    width: 50%;
    text-align: center;
    font-size: 24px;
}

#div12 {
    width: 100%;
    height: 50%;
}

#text13 {
    height: 100%;
    width: 100%;
}

import router from '@system.router';
import fetch from '@system.fetch';
import qs from 'querystring';

export default {
    data:{
        winfo:"" ,//定义winfo用于存放后端反馈数据
        detail:[{ //初始化
                    name:"aaa",
                    sex:"男",
                    age:66,
                    phone:"18575286137",
                    income:5000
                },
                {
                    name:"bbb"
                }
        ]
    },
    onClick(){
        fetch.fetch({
            url:`http://127.0.0.1:8000/app01/GetData/`, //后端路径，一定不能错，用的是反单引号
            data: qs.stringify({'patientname':'aaa'}),//验证，将字符串转发给后端，后端会受到这个请求
            responseType:"json",//请求的参数类型
            method: "POST",
            success:(resp)=>
            {
                var getdata
                //将JSON字符串转换为JSON对象
                getdata = JSON.parse(resp.data)
                this.detail[0].name=getdata[0].name
                this.detail[0].sex=getdata[0].sex
                this.detail[0].age=getdata[0].age
                this.detail[0].phone=getdata[0].phone
                this.detail[0].income=getdata[0].income
                this.winfo = resp.data;//令获取到的后端数据赋给winfo
                console.log("返回的数据："+this.winfo);//打印出数据
                console.log("a"+typeof(getdata));
            },
            fail:(resp)=>
            {
                console.log("获取数据失败："+this.detail)//打印出数据
            }
        });
    }
}

后端：

设置路由

path('app01/', include(app01_urls, namespace='app01')),  #一级路由

path('GetData/', GetData.as_view())  #二级路由

在models.py里建表

class datatable(models.Model): #建表，定义一个类data，包含Name，Sex，Age，Phone，Income信息
    Name = models.CharField(max_length=64, default="")
    Sex = models.CharField(max_length=64, default="")
    Age = models.CharField(max_length=64, default="")
    Phone = models.CharField(max_length=64, default="")
    Income = models.CharField(max_length=64, default="")

进行表的迁移

python manage.py makemigrations

python manage.py migrate

在views.py里写方法

class GetData(APIView):  # GetData类视图
    def post(self,request):  # 创建post方法
        try:
            patientname = request.data.get('patientname')  # 获取前端发送的patientname
            print(patientname)  # 打印patientname
            result = models.datatable.objects.filter(Name=patientname).last()
            # 使用filter方法查询数据表中Name=patientname的数据，last方法为查询最新，加last后为字典
            name = result.Name  # 获取result中的name
            age = result.Age  # 获取result中的age
            sex = result.Sex  # 获取result中的sex
            phone = result.Phone  # 获取result中的phone
            income = result.Income  # 获取result中的income
            alldata = []  # 创建空列表
            alldata.append({  # 写入如下字典，“键”要和前端对应
                'name': name, 'sex': sex, 'age': age, 'phone': phone,
                'income': income,
            })
            alldata_json = json.dumps(alldata, ensure_ascii=False)  # 使中文正确显示
            return HttpResponse(alldata_json)
        except datatable.DoesNotExist as e:
            print('刷新失败')
        else:
            return HttpResponse("请求失败")

最终结果：

刷新前：

刷新后：