目录

前言

一、Django后端

1.创建相应models

迁移数据库

2.后端查询功能实现

注意：不要忘了在urls中添加路径

二、DevEco Studio前端

1.设计页面（.hml）

2.逻辑功能实现（.js）

注意：要在config.json对页面进行配置

三、效果展示

前言

在前端中的文本框输入内容，后端查询（数据库内容）并返回数据

一、Django后端

1.创建相应models

class Save(models.Model):
    userName = models.CharField(max_length=64)
    Name = models.CharField(max_length=64)
    Age = models.CharField(max_length=64)
    Weight = models.CharField(max_length=64)
    Height = models.CharField(max_length=64)
    DiseasedSite = models.CharField(max_length=64)

迁移数据库

在控制台输入以下代码

python manage.py makemigrations
 
python manage.py migrate

2.后端查询功能实现

class DocGetData(APIView):
    def post(self,request):
        try:
            patientname = request.data.get('patientname')#获取前端发来的数据
            print(patientname)
            result = models.Save.objects.filter(Name=patientname).last()#在数据库中查询并导出最新数据
            name = result.Name#将获得的数据赋值给后端变量
            age = result.Age#将获得的数据赋值给后端变量
            weight = result.Weight#将获得的数据赋值给后端变量
            height = result.Height#将获得的数据赋值给后端变量
            diseaserSite = result.DiseasedSite#将获得的数据赋值给后端变量
            alldata = []
            alldata.append({
                'name':name,'age':age,'weight':weight,'height':height,
                'DiseasedSite':diseaserSite
            })#将数据存入字典
            alldata_json = json.dumps(alldata,ensure_ascii=False)#保证dumps之后的结果里所有的字符都能够被ascii表示
            return HttpResponse(alldata_json)#将数据返回
        except Save.DoesNotExist as e:
            print('刷新失败')
        else:
            return HttpResponse('请求失败')

注意：不要忘了在urls中添加路径

二、DevEco Studio前端

1.设计页面（.hml）

<div class="container">
    <div>
        <text>
            姓名：
        </text>
        <text>{{detail[0].name}}</text>
    </div>
    <div>
        <text>
            年龄：
        </text>
        <text>{{detail[0].age}}</text>
    </div>
    <div>
        <text>
            身高：
        </text>
        <text>{{detail[0].high}}</text>
    </div>
    <div>
        <text>
            体重：
        </text>
        <text>{{detail[0].weight}}</text>
    </div>
    <div>
        <text>
            患病部位：
        </text>
        <text>{{detail[0].DiseasedSite}}</text>
    </div>
    <div>
        <text>{{winfo}}</text>
    </div>
    <button onclick="onClick">刷新</button>
</div>

2.逻辑功能实现（.js）

import fetch from '@system.fetch';
import router from '@system.router';
import qs from 'querystring';
export default{
    data:{
        winfo:"",
        detail:[{
            name:'111',//设置默认数据
            age:67,
            high:177,
            weight:65,
            DiseasedSite:'下肢'
                },
                {
                    name:'bbb',
                    age:33,
                }
        ]
    },
    onClick(){
        fetch.fetch({
            url:'http://127.0.0.1:8000/Person/DocGetData/',//连接网址，也可以在网上找返回json的网址，可以直接返回数据
            data:qs.stringify({'patientname':'aaa'}),//给后端发送数据，实机演示可以输入，此处设置为静态
            responseType:"json",
            method:"POST",//传输方式，GET和POST区别
            success:(resp)=>
            {
                var getdata
                getdata = JSON.parse(resp.data)//从后端获取数据
                this.detail[0].name = getdata[0].name//用获取的数据替换原始数据
                this.detail[0].age = getdata[0].age//用获取的数据替换原始数据
                this.detail[0].high = getdata[0].height//用获取的数据替换原始数据
                this.detail[0].weight = getdata[0].weight//用获取的数据替换原始数据
                this.detail[0].DiseasedSite = getdata[0].DiseasedSite//用获取的数据替换原始数据

                this.winfo = resp.data
                console.log("返回的数据"+this.winfo)
                console.log("c:"+typeof(getdata))

            },
            fail:(resp)=>
            {
                console.log("获取数据失败："+this.detail)
            }
        });
    }
}

注意：要在config.json对页面进行配置

三、效果展示

。