梅科尔工作室-Django学习笔记（二次学习）（4）

最新推荐文章于 2023-05-24 11:28:02 发布

冰潔

最新推荐文章于 2023-05-24 11:28:02 发布

阅读量435

点赞数

文章标签：学习 harmonyos django 华为后端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/prtinf48_9/article/details/125952982

版权

今天学习如何从后端获取想要的数据并合理展示到DevEco Stdio当中

目录

一、需要掌握的新知识点

1.var函数（JS语句）：

2.JSON.parse()：

3.filter(blog=blog).first()

4.json.dumps()函数

二、代码实现

2.构建Message数据库

连接数据库并将值写入

一、需要掌握的新知识点

1.var函数（JS语句）：

用于声明一个函数范围或全局范围的变量，并可将其初始化为一个值（可选）

var - JavaScript | MDN (mozilla.org)

2.JSON.parse()：

SON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串，我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。JSON.parse() | 菜鸟教程 (runoob.com)

语法：

JSON.parse(text[, reviver])

3.filter(blog=blog).first()

查询功能，first（）即为第一条数据，last（）即为最后一条数据

django查询中模糊的知识点，filter(blog=blog)，filter(username=username).first()--这两者只需一招让你分清QuerySet对象，和用户字典对象 - 大海一个人听 - 博客园 (cnblogs.com)

4.json.dumps()函数

数据转换功能：Python json.dumps()函数使用解析 | w3c笔记 (w3cschool.cn)

alldata_json = json.dumps(alldata, ensure_ascii=False)  # 数据转换： json.dumps使返回前端的是正确的中文或字符

二、代码实现

1.前端代码

JavaScript：

import fetch from '@system.fetch';
import router from '@system.router';
import qs from 'querystring';
var pressure=[]


export default {
    data:{
        winfo:"",
        detail:[{    //定义初始数据【0】
                    username:"",
                    kind:"痣",
                    dfc:"0",
                    summarize:"",
                    analyse:"",
                },
                {     //定义初始数据【1】
                    username:"111",
                    kind:"黑色素瘤",
                    dfc:"0",
                    summarize:"",
                    analyse:"",
                },
        ]
    },
    onclick(){
        fetch.fetch({
            url:'http://127.0.0.1:8000/person/ShiliuzheGetData/',  //请求路径
            data:qs.stringify({'getusername': "tf"}),  //验证结果：将getusername=tf返回到后端
            responseType:"json",    //请求的参数类型
            method:'POST',
            success:(resp)=>
            {
                var getdata  //var可自动识别对象类型，下面的是JSON对象
                getdata = JSON.parse(resp.data)  //从后端获取的数据，需要用JSON.parse（）将字符串转换成JSON对象
                //便于之后的键值对的操作
                this.detail[0].username=getdata[0].username
                this.detail[0].kind=getdata[0].kind
                this.detail[0].dfc=getdata[0].dfc
                this.detail[0].summarize=getdata[0].summarize
                this.detail[0].analyse=getdata[0].analyse  //获取数据

                this.winfo = resp.data;
                console.log("返回的数据："+this.winfo)  //打印出数据
                console.log("c:"+typeof(getdata));  //打印出数据
            },
            fail:(resp)=>
            {
                console.log("获取数据失败："+this.detail)  //打印出数据
            }
        });
    }

}

hml：

<div class="container">
<!--    </div>-->
    <div class="container_1">
                    <div>
                        <button type="capsule" onclick="onclick">刷新</button>
                    </div>
                    <div id="div1">
                        <text id="text2">{{detail[0].username}}</text>
                    </div>
                    <div id="div3">
                        <div id="div5">
                            <text id="text3">皮肤病病灶\r\n区域拟合图</text>
                        </div>
                        <image id="image2" src="../../common/image_a/1.png"></image>
                    </div>
                    <div class="z1">
                        <image id="image3" src="../../common/image_a/a.bmp"></image>
                        <text id="text4">检测报告</text>
                    </div>
                    <div class="z2">
                        <div class="z3">
                            <text id="text5">
                                类别：{{detail[0].kind}}
                            </text>
                        </div>
                        <div class="z4">
                            <image id="image5" src="../../common/image_a/2.png"></image>
                            <div class="z5">
                                <text id="text6">置信度：{{detail[0].dfc}}</text>
                                <slider id="slider1" value="984.6"></slider>
                            </div>
                        </div>
                        <div class="z6">
                            <image id="image7" src="../../common/images/笔记本.png"></image>
                            <div class="z6_1">
                                <text id="text8">疾病概括</text>
                                <text id="text9">{{detail[0].summarize}}</text>
                            </div>
                        </div>
                        <div class="z7">
                            <image id="image8" src="../../common/images/分析.png"></image>
                            <div class="z7_1">
                                <text id="text10">病因分析</text>
                                <text id="text11" >{{detail[0].analyse}}</text>
                            </div>
                        </div>
                        <div class="z8">
                            <image id="image9" src="../../common/images/紧急.png"></image>
                            <div class="z8_1">
                                <text id="text12">定期观察</text>
                                <text id="text13">如情况恶化及时就医</text>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <text>{{winfo}}</text>
                </div>
</div>

css：

.container {
    margin-top: 10px;
    flex-direction: column;
    margin-left: 3%;
    margin-right: 3%;
}

.listdiv{
    width: 100%;
/*    height: 100%;*/
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000000;
    opacity: 0.9;
    font-size: 28px;
}

.list-item{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5px;
    border-bottom: 1px solid black;
    border-width: 2px;
    border-color: black;
}

.textdiv{
    font-size: 30px;
    font-weight: bold;
}


.imputdiv{
    width: 100%;
    height: 35%;
}
.button1{
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: row;
}
.listG{
    height: 100px;
    border-color: black;
    border-width: 2px;
    z-index: 1;
}
.listItem{
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #DEDEDE;
    align-items: center;
    font-size: 20px;
}
.group{
    width: 96%;
    height: 60px;
    padding-left: 3%;
    margin-left: 2%;
    display: flex;
/*    border-bottom: 1px solid #DEDEDE;*/
    border-width: 1px;
    border-color: black;
    border-radius: 15px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    font-size: 20px;
    font-weight:500;
    z-index: 1;
}
.group1{
    width: 96%;
    height: 60px;
    padding-left: 3%;
    margin-left: 6%;
    z-index:2;
}

.groupValue{
    font-size: 16px;
    width: 95%;
    height: 60px;
    margin-left: 15%;
    border-bottom: 1px solid  #DEDEDE;
}

.head{
    width: 100%;
    height: 50px;
    background-color: #6f7ee9;
}

.head_text{
    align-items: center;
    text-align:center;
    justify-content: center;
    font-size: 25px;
    color: #f8f4f4;
}

.listA{
    height: 800px;
}

.listItem{
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #DEDEDE;
    align-items: center;
    font-size: 20px;
    border-width: 1px;
    border-color: black;
    border-radius: 15px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
}
.groupA{
    width: 96%;
    height: 60px;
    padding-left: 3%;
    margin-left: 6%;
    border-bottom: 1px solid #DEDEDE;
    font-size: 20px;
    font-weight:500;
}
.groupValueA{
    font-size: 16px;
    width: 95%;
    height: 60px;
    margin-left: 15%;
    border-bottom: 1px solid  #DEDEDE;
}

#wrapper {
    width: 100%;
    flex-direction: column;
}

#div1 {
    width: 100%;
    height: 120px;
    background-color: #5768e4;
}

#div_image2{
    flex-direction: row-reverse;
    margin-right: 10px;
}

#image1 {
    width: 40px;
    height: 40px;
    top: 10px;
    right: -10px;
}

#text1 {
    width: 68.62300154718928px;
    height: 43.27488396080454px;
    top: 10px;
    right: -15px;
    color: #f8f4f4;
}

#text2 {
    width: 155px;
    height: 50px;
    top: 10px;
    margin-left: 90px;
    right: 80px;
    font-size: 20px;
    color: #f8f4f4;
}

#div3 {
    width: 89%;
    height: 126px;
    border-width: 1px;
    border-color: #000000;
    border-radius: 20px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    background-color: #ffffff;
    flex-shrink: -1;
    top: -50px;
    right: -20px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

#div5 {
    width: 130px;
    height: 60px;
    border-width: 0.05px;
    border-radius: 50px;
    background-color: #eeebeb;
    left: -5px;
}

#text3 {
    width: 138px;
    height: 53px;
    left: 15px;
    top:2px;
    font-size: 20px;
}

#image2 {
    width: 130px;
    height: 100px;
/*    top:-10px;*/
    left: 5px;
}

#image3 {
    width: 30px;
    height: 28px;
    top:6px;
    left: 5px;
/*    margin-top: 10px;*/
/*    border-width: 2px;*/
/*    border-color: black;*/
}

#text4 {
    width: 133px;
    height: 42px;
    font-size: 20px;
    left: 7px;
/*    margin-top: 12px;*/
/*    border-width: 2px;*/
/*    border-color: black;*/
}

#div6 {
    width: 91%;
    height: 389px;
    border-width: 1px;
    border-color: #000000;
    border-radius: 30px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    top: -140px;
    right: -15px;
}

#text5 {
    height: 45.68849922640536px;
    width: 300px;
    right: -20px;
    font-size: 20px;
}

#text_class{
    font-size: 20px;
}

#text6 {
    width: 180px;
    height: 30px;
    font-size: 18px;
    left: 20px;
}

#image5 {
    width: 88px;
    height: 65px;
    left: 10px;
}

#slider1 {
    width: 150px;
    height: 44px;
    left: -25px;
}

#image7 {
    width: 35px;
    height: 33px;
    top:10px;
    left: 10px;
}

#text8 {
    width: 124px;
    height: 30px;
    font-size: 20px;
    left: 8px;
}

#text9 {
    width: 300px;
    height: 60px;
    top:-5px;
    font-size: 15px;
    left: 8px;
}

#image8 {
    width: 35px;
    height: 33px;
    top:10px;
    left: 10px;
}

#text10 {
    width: 124px;
    height: 30px;
    font-size: 20px;
    left: 8px;
}

#text11 {
    width: 300px;
    height: 60px;
    font-size: 15px;
    left: 8px;
}

#image9 {
    width: 35px;
    height: 33px;
    top:10px;
    left: 10px;
}

#text12 {
    width: 300px;
    height: 60px;
    font-size: 15px;
    left: 8px;
}

#text13 {
    width: 300px;
    height: 60px;
    font-size: 15px;
    left: 8px;
    top:-23px;
}

#div7 {
    width: 100%;
    height: 50px;
}

.aaaaaaaaaaa{}

.container_1{
    width: 100%;
    flex-direction: column;
}

.z1{
    width: 100%;
    height: 40px;
    top:-50px;
/*    border-width: 1px;*/
/*    border-color: black;*/
}

.z2{
    flex-direction: column;
    width: 91%;
    height: 389px;
    border-width: 1px;
    border-color: #000000;
    border-radius: 30px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    top:-45px;
    right: -15px;
}

.z3{
    width: 300px;
    height: 50px;
}

.z4{
    flex-direction: row;
    width: 300px;
    height: 90px;
    top:5px;

}

.z5{
    flex-direction: column;
    width: 200px;
    left: 10px;
}

.z6{
    flex-direction: row;
    width: 300px;
    height: 90px;
    top:5px;
}
.z6_1{
    flex-direction:column;
    width: 248px;
    height: 90px;
    left: 10px;
}

.z7{
    flex-direction: row;
    width: 300px;
    height: 100px;
    top:5px;
}
.z7_1{
    flex-direction:column;
    width: 248px;
    height: 100px;
    left: 10px;
}

.z8{
    flex-direction: row;
    width: 300px;
    height: 100px;
    top:5px;
}
.z8_1{
    flex-direction:column;
    width: 248px;
    height: 100px;
    left: 10px;
}

2.构建Message数据库

models文件

from django.db import models

class Message(models.Model):
    username = models.CharField(max_length=32)  # 用户名
    kind = models.CharField(max_length=32)  # 种类
    dfc = models.FloatField(max_length=6)  # 置信度
    summarize = models.CharField(max_length=50)  # 疾病概括
    analyse = models.CharField(max_length=100)  # 病因分析

连接数据库并将值写入

具体操作请移步之前的笔记：(34条消息) 梅科尔工作室-SQL 学习笔记（一）_冰潔的博客-CSDN博客

(34条消息) 梅科尔工作室-Django学习笔记（二次学习）（1）_冰潔的博客-CSDN博客

3.django代码

接着上个笔记的person中的views写

import json

from person import models
import pymysql
from django.shortcuts import HttpResponse
from rest_framework.views import APIView
# from rest_framework.views import json
from person.models import Message


try:
    con = pymysql.connect(host='端口号',
                          port=3306,
                         #  用户名
                          #  密码
                          db='数据库名',
                          charset='utf8')
    print("连接成功")
except pymysql.Error as e:
    print('数据库连接失败' + str(e))

class ShiliuzheGetData(APIView):
    def post(self, request):
        try:
            getusername = request.data.get('getusername')  # 接收前端发送回来的username的值
            print(getusername)  # 打印输出
            result = models.Message.objects.filter(username=getusername).first()  # 用户字典对象
            # 查询功能：username=getsername,Message数据库当中对应的username的值,.first()选中相同数据库中第一条数据
            username = result.username   # 将数据库中的值赋给变量
            kind = result.kind  # 对象.值
            dfc = result.dfc
            summarize = result.summarize
            analyse = result.analyse
            alldata = []  # 定义空列表
            alldata.append({
                'username': username, 'kind': kind, 'dfc': dfc,
                'summarize': summarize, 'analyse': analyse,
            })  # 将获取的值赋给列表
            alldata_json = json.dumps(alldata, ensure_ascii=False)  # 数据转换： json.dumps使返回前端的是正确的中文或字符
            return HttpResponse(alldata_json)
        except Message.DoesNotExist as e:
            print('获取失败')
        else:
            return HttpResponse("请求失败")  # 返回前端的值

三、运行

先启动后端，在终端中输入

python manage.py runserver + 端口号

进入前端，点击预览，没有获取数据前的效果是这样的：

我们点击最上面的刷新按钮，可以看到用户名等一系列信息都被获取到了。

底部栏正常打印数据：

进入后端，点开终端，可以看到从前端返回的“tf”字符串

获取成功！

最后要感谢潘学姐的认真讲解！

感谢各位看官！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
梅科尔工作室-Django学习笔记（二次学习）（4）

今天学习如何从后端获取想要的数据并合理展示到DevEcoStdio当中。
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。