梅科尔工作室-李庆浩 HarmonyOS+Django数据刷新案例实现

    
        个人信息
    
    
        姓名：
        {{data[0].name}}
    
    
        年龄：
        {{data[0].age}}
    
    
        身高：
        {{data[0].height}}
    
    
        体重：
        {{data[0].weight}}
    
    
        爱好：
        {{data[0].hobby}}
    
    刷新
    
        刷新内容：
        {{winfo}}
    

.container{
    width: 100%;
    flex-direction: column;
    height: 100%;
    align-items: center;
}

.title{
    font-size:30px;
}
.text1{
    font-size:25px;
}
.box{
    height:100px;
}
.box1{
    height:50px;
}
.button1{
    background-color:#11D6BB;
    width:100px;
    height:50px
}

import fetch from '@system.fetch';
import router from '@system.router';
import qs from 'querystring';
export default {
    data: {
        winfo:"",
        //设置各数据的默认值
        data:[
            {
                name:"御坂美琴",
                age:"16",
                height:"170",
                weight:"90",
                hobby:"超电磁炮"
            }
        ]
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    shuaxin(){
        fetch.fetch({
            //后端的接口,liqing为创建的app的名称，refresh为views中的类名
            url:'http://127.0.0.1:8000/liqing/refresh/',
            //将要发送的数据通过qs转为url的格式并向后端发送
            data:qs.stringify({'name':'白井黑子'}),
            //接受数据的类型
            responseType:"json",
            //发送请求的方法
            method:"POST",
            //接口成功调用的函数，resp.data为返回的数据
            success:(resp)=>
            {
                // 创建一个变量用来接收json化的数据
                var jsondata;
                //用json.parse方法让将字符串类型华为对象类型
                jsondata = JSON.parse(resp.data)
                // 将各种值赋值给js中的各个数据，刷新各数据
                this.data[0].name = jsondata[0].name;
                this.data[0].age = jsondata[0].age;
                this.data[0].height = jsondata[0].height;
                this.data[0].weight = jsondata[0].weight;
                this.data[0].hobby = jsondata[0].hobby;
                this.winfo = resp.data;
                //打印获取成功的数据
                console.log("获取成功")
                console.log("返回的数据："+this.winfo)
            },
            //接口调用失败则获取失败原因
            fail:(resp)=>
            {
                //打印失败原因
                this.winfo = resp.data;
                console.log("获取失败")
                console.log("失败原因："+this.winfo)
            }
        })
    }
}

from django.contrib import admin
from django.urls import path,include
from liqing import urls as liqing_urls

urlpatterns = [
    path('admin/', admin.site.urls),
    path('liqing/',include(liqing_urls,namespace='liqing')),
]

from django.urls import path
from liqing.views import refresh

app_name = 'liqing'

urlpatterns = [
    path('refresh/', refresh.as_view()),
]

# Create your models here.
from django.db import models

class xinxi(models.Model):
    name = models.CharField(max_length=20)
    age = models.IntegerField()
    height = models.IntegerField()
    weight = models.IntegerField()
    hobby = models.CharField(max_length=20)

在终端中输入如下代码

python manage.py makemigrations  # 让 Django 知道我们在我们的模型有一些变更
python manage.py migrate   # 创建表结构

# Create your views here.
import pymysql
from django.http import HttpResponse
from rest_framework.utils import json
from rest_framework.views import APIView

from liqing import models
from liqing.models import student,xinxi


class refresh(APIView):
    # post函数进行数据的接收及后端接口作用的书写
    def post(self, request):
        try:
            #接收前端传来的数据
            aname = request.data.get('name')
            # 在终端中打印前端传来的数据
            print(aname)
            #接收数据库查询到的数据
            result = models.xinxi.objects.filter(name=aname).last()
            #将查询到的数据一一赋值给各数据量
            dname = result.name
            age = result.age
            height = result.height
            weight = result.weight
            hobby = result.hobby
            #创建一个数组变量
            alldata = []
            #在数组中添加后端查询到的数据
            alldata.append({
                'name':dname,'age':age,'height':height,'weight':weight,'hobby':hobby
            })
            # 将数组中的数据进行json化并赋值给alldata_json
            alldata_json = json.dumps(alldata,ensure_ascii=False)
            #打印json化的数据，即打印后端传来的数据
            print(alldata_json)
            # 向前端返回查询到的数据
            return HttpResponse(alldata_json)
        # 查询失败则向前端返回刷新失败的结果
        except xinxi.DoesNotExist as e:
            print("刷新失败")

因为我们从后端传来的数据是字符串类型的，所以不能采用对象的方法将各个数据进行刷新赋值，所以采用json.parse方法，将字符串数据转化为对象，然后可以将各个数据进行刷新赋值。

我们在进行后端数据传输时，有时会出现乱码的情况，为了防止出现这种情况，我们将传输的数据json化，这样可以避免出现乱码的情况。