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)