HarmonyOS+Django前后端交互案例_harmonyos怎么做前后端交互

目录

前端代码

hml页面代码编写：

后端代码

urls.py

models.py

views.py

---

前端代码

HML文件

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

JS文件

在js文件中编写逻辑代码，以及各个部分默认的数据。onClick用于向后端发送数据，获取数据由于priviewer中的输入框无法读取键盘输入，只能采用固定的输入数据，这里我们使用的是“id:1”。

onClick1用于修改后端的数据

import router from '@ohos.router';
import qs from "querystring";
import fetch from '@system.fetch';
 
export default {
    data: {
        winfo: "llll",
        detail:[{
                    name:"null",
                    age:"null",
                    high:"null",
                    weight:"null",
                    DiseasedSite:"null"
                }]
    },
    onClick(){
        // 发送网络请求
        fetch.fetch({
            url: `http://127.0.0.1:8000/login/GetData/`, // 网络请求的路径
            data: qs.stringify({'id': "1"}), //将数据转化为字符串，向后端发送的数据
 
            responseType:"json", //请求的参数类型
            method: "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].high
                this.detail[0].weight = getdata[0].weight
                this.detail[0].DiseasedSite = getdata[0].diseasedSite
            },
            fail:(resp)=> // 发送失败后进行的操作
            {
                console.log("获取数据失败："+this.detail) //在日志中打印
            }
        })
    },
    onClick1(){
        fetch.fetch({
            url: `http://127.0.0.1:8000/login/test/`,
            data: qs.stringify({"id": "1","name": "lqc40"}),
 
            responseType: "json",
            method: "POST",
            success:(resp)=>
            {
                console.log("成功")
            },
            fail:(resp)=>
            {
                console.log("失败")
            }
        })
    }
}
 
 
 

后端代码

urls.py

在url中写入路径

from django.urls import path
 
from login.views import GetData, test
 
app_name = "login"
 
urlpatterns = [
    path('GetData/', GetData.as_view()),
    path('test/', test.as_view())
]

models.py

创建一个数据库的表，其中包含的数据有以下几种

class Save(models.Model):
    Name = models.CharField('用户名', max_length=30, unique=True)
    Age = models.IntegerField('年龄')
    High = models.IntegerField('身高')
    Weight = models.IntegerField('体重')
    DiseasedSite = models.CharField('位置', max_length=10)

views.py

GetData接受前端数据，并将后端数据发送到前端

test接受前端数据，确认那条数据之后对数据进行修改

class GetData(APIView):
    def post(self, request):
        try:
            id = request.data.get('id')
            print(id)
            result = models.Save.objects.filter(id=id).last()
            name = result.Name
            age = result.Age
            high = result.High
            weight = result.Weight
            diseasedSite = result.DiseasedSite
            alldata = []
            alldata.append({
                'name': name, 'age': age, 'high': high, 'weight': weight, 'diseasedSite': diseasedSite
            })
            alldata_json = json.dumps(alldata, ensure_ascii=False)
            return HttpResponse(alldata_json)
        except models.Save.DoesNotExist as e:
            print('刷新失败')
        else:
            return HttpResponse('请求失败')
 
 
class test(APIView):
    def post(self, request):
        id = request.data.get('id')
        print(id)
        wname = request.data.get('name')
        result = models.Save.objects.filter(id=1).last()
        models.Save.objects.filter(id=id).update(Name=wname)
        name = wname
        age = result.Age
        high = result.High
        weight = result.Weight
        diseasedSite = result.DiseasedSite
        alldata = []
        alldata.append({
            'name': name, 'age': age, 'high': high, 'weight': weight, 'diseasedSite': diseasedSite
        })
        alldata_json = json.dumps(alldata, ensure_ascii=False)
        return HttpResponse(alldata_json)