梅科尔工作室-django web应用（四）（后端数据库数据展示到前端）

<div class="container">
    <div class="body">
        <div class="title">
            <div class="txt">
                <text>个人信息</text>
            </div>
        </div>
        <div class="name">
            <div class="txt">
                <text>姓名：{
   
   {information[0].name}}</text>
            </div>

        </div>
        <div class="age">
            <div class="txt">
                <text>年龄：{
   
   {information[0].age}}</text>
            </div>
        </div>
        <div class="tel">
            <div class="txt">
                <text>电话：{
   
   {information[0].tel}}</text>
            </div>
        </div>
        <div class="refresh" onclick="OnClick">
            <div class="txt">
                <text>刷新</text>
            </div>
        </div>
    </div>
</div>

2.2.页面效果

2.3.后端js逻辑

import fetch from '@system.fetch';
import qs from "querystring"
export default {
    data: {
        myText:"",
        //用来向前端展示数据
        information:[
            {name:"abc",age:'13',tel:'15900000000'},
            {name:"",age:'',tel:''}
        ]
    },
    OnClick: function(){
        fetch.fetch({
            url:'http://127.0.0.1:8000/resp/',//后端所在服务器地址
            data:qs.stringify({'uid':'1'}),//请求验证信息
            responseType:"json",
            method:"POST",
            success:(resp)=>{
                var myData
                myData = JSON.parse(resp.data)//将string转换为js对象
                this.information[0].name = myData[0].name
                this.information[0].age = myData[0].age
                this.information[0].tel = myData[0].tel
                console.log(typeof(myData))
            },
            fail:(resp)=> {
                this.myText = resp.data
                console.log("获取数据失败：" + this.myText)
            }
        })
    }
}

这里对数据库操作使用的是ORM模型

需要注意的是后端传的数据是字符型，前端要使用的话需要转换一下，JSON.parse可以将JSON格式的字符串(不是则不能用）转换为js对象（普通的字符串不能用），之后方便操作（如果你仅仅想要打印后端传的字符串，那就不用转换）。

3.后端

3.1.数据库内容

3.2.关键代码

import json
import requests
from .models import Person

from django.http import HttpResponse

from rest_framework.views import APIView


class Appresp(APIView):
    def post(self, request):
        db = Person.objects.filter(name='lili').last()
        uid = request.data.get("uid")
        arr = []
        content = {'name': db.name, 'age': db.age, 'tel': db.tel}
        arr.append(content)
        arr = json.dumps(arr,ensure_ascii=False)
        return HttpResponse(arr)

后端代码用来取数据库中名字是‘lili’的最后一条数据。如果去掉filter或者去掉filter中的内容，那么取的数据就是数据库最后一条数据。json.dumps用来将python对象转换为json格式的字符串。

4.前端展示

（1）filter内有筛选条件lili，由于名叫lili的只有一个，所以只有那一个在前端展示否则会展示最后一个‘lili’

（2）没有filter，展示数据库最后一个成员

梅科尔工作室-django web应用（四）（后端数据库数据展示到前端）

1.写在前面

1.1.需要准备的软件

1.2.需要了解的知识

2.前端