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 实现效果
点击按钮后
传过来