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

心之所向，我之所望

已于 2022-07-21 17:35:07 修改

阅读量339

点赞数

分类专栏： Django 文章标签： django python 后端前端

于 2022-07-21 17:33:24 首次发布

本文链接：https://blog.csdn.net/qq_62058931/article/details/125916823

版权

Django 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.前端实现

1.1hml页面代码

<div class="container">
    <div class="box">
        <text class="title">个人信息</text>
    </div>
    <div class="box1">
        <text class="text1">姓名：</text>
        <text class="text1">{{data[0].name}}</text>
    </div>
    <div class="box1">
        <text class="text1">年龄：</text>
        <text class="text1">{{data[0].age}}</text>
    </div>
    <div class="box1">
        <text class="text1">身高：</text>
        <text class="text1">{{data[0].height}}</text>
    </div>
    <div class="box1">
        <text class="text1">体重：</text>
        <text class="text1">{{data[0].weight}}</text>
    </div>
    <div class="box1">
        <text class="text1">爱好：</text>
        <text class="text1">{{data[0].hobby}}</text>
    </div>
    <button class="button1" onclick="shuaxin">刷新</button>
    <div style=" flex-direction: column;">
        <text class="text1">刷新内容：</text>
        <text>{{winfo}}</text>
    </div>
</div>

1.2css代码页面

.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
}

1.3js代码页面

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)
            }
        })
    }
}

1.4效果展示

2.后端实现

2.1一级路由代码

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')),
]

2.2二级路由代码

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

app_name = 'liqing'

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

2.3数据表创建和迁移

2.3.1数据表创建

# 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)

2.3.2数据表迁移

在终端中输入如下代码

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

2.3.3数据表数据创建

2.4views.py页面代码

# 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("刷新失败")