> 文档中心 > HarmonyOS+Django前后端交互案例

HarmonyOS+Django前后端交互案例

目录

前端代码

hml页面代码编写:

后端代码

urls.py

models.py

views.py


前端代码

HML文件

姓名: {{detail[0].name}}
年龄: {{detail[0].age}}
身高: {{detail[0].high}}
体重: {{detail[0].weight}}
位置: {{detail[0].DiseasedSite}}
{{winfo}}

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 pathfrom login.views import GetData, testapp_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)