DevEco + Django 前后端数据连接实验四

1.涉及相关知识点

2.实验内容

2.1 实验目标

前端点击按钮，执行对应的方法，使得后端的数据传回前端

2.2相关代码

css文件没有写

<!--request.hml-->
<div class="container">
    <div class="title">
        <text class="txt">Welcome</text>
    </div>
    <div class="login">
        <button class="btn" onclick="onClick">请求响应</button>
    </div>
    <div class="back">
        <text>{{winfo}}</text>
    </div>
</div>

//request.js
import fetch from '@system.fetch';
import router from '@system.router';
import qs from 'qs';

export default{
    data:{
        winfo:"",
    },
    //点击请求响应，会实现对应的方法
    onClick(){
        //1.发起网络请求
        fetch.fetch({
            url:`http://127.0.0.1:8001/train/AppReq1/`,
            //路径,AppReq1是在Pycharm里写的
            //注意，这里是反引号

            data:qs.stringify({'id':'1'}),
            //id为key，与后端接收的参数对应
            //验证，转为字符串发给后台

            responseType:"json",//前端请求从后端？接收的参数类型，待会要显示出来
            method:"POST",

            //resp.data是什么？
            success:(resp)=>{
                this.winfo = resp.data;//令获取到的数据赋给winfo
                console.log("返回的数据："+this.winfo);//打印出数据
            },

            fail:(resp)=>{
                this.winfo = resp.data;
                console.log("获取数据失败："+this.winfo)
            }
        });
    },
}

# models.py
from django.db import models

class Person(models.Model):
    # Sno = models.IntegerField()
    # Sname = models.CharField(max_length=12)
    Name = models.CharField(max_length=12)
    Age = models.IntegerField()
    Sex = models.CharField(max_length=12)
    Card = models.IntegerField()
    Address = models.CharField(max_length=40)
    Temperature = models.CharField(max_length=12)

class Meta:
    permissions = ()

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

from train import models
from train.models import Person,Save

class AppReq1(APIView):
    def post(self, request):
        # 通过过滤，只接收在train_person表里面 Name一栏值为Song的那一行数据
        result = Person.objects.filter(Name='Song')
        arr = []
        # 因为result接收到的数据是一个对象列表[{}{}]，所以可以对其进行for
        for i in result:
            content = {'姓名': i.Name, '年龄': i.Age, '性别':i.Sex,
                       '身份证': i.Card, '地址': i.Address, '体温': i.Temperature}
            arr.append(content) # 把对象赋给
        print(arr)
        print(type(arr))
        # 上面这些还是在和数据库打交道
        # 'id'对应前端发过来的那个'id':'1'
        ID = request.data.get('id');
        print(ID) # 显示的是后端发过来的那个id，为1，用来测试后端是否正确接收了前端的数据
        return HttpResponse(arr)
        # 利用HttpResponse()将数据返回到前端

2.3操作流程

首先要完成pymysql和Django的数据库连接，步骤略有省略

配置项目下的setting.py文件
在Pycharm中创建Django项目djangoProject1，通过python manage.py startapp train 创建app train。
request.js中选择用8001作为前后端连接的端口，所以在执行数据库的迁移之前要先执行

python manage.py runserver 0.0.0.0:8001
通过 python manage.py makemigrations
python manage.py migrate
两个命令，完成表的迁移，在settings.py对应的连接中就出现了数据库train_person
（迁移数据库之前，要先在models.py中写对应的内容），对train_person数据进行修改

2.4 实现效果

点击按钮后
传过来