目录

1.写在前面

1.1.需要准备的软件

1.2.需要了解的知识

2.前端

2.1.页面设计

2.2.页面效果

2.3.后端js逻辑

3.后端

3.1.数据库内容

3.2.关键代码

4.前端展示

1.写在前面

1.1.需要准备的软件

（1）pycharm（用来写后端Django）

（2）DevEco studio（用来写前端）

（3）mysql msi（用来直观的查看数据库，其他修改数据库方式也行）

1.2.需要了解的知识

（1）django基础（app文件的创建，路由配置，连接数据库等）

（2）前端基础（会写一个简单的页面，会简单的逻辑js代码）

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

（4）了解json格式以及相关操作

2.前端

2.1.页面设计

首先设计一个前端页面

    
 
     
  个人信息     
 
 
     
  姓名：{{information[0].name}}     
 
 
     
  年龄：{{information[0].age}}     
 
 
     
  电话：{{information[0].tel}}     
 
 
     
  刷新     
 
    

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 jsonimport requestsfrom .models import Personfrom django.http import HttpResponsefrom rest_framework.views import APIViewclass 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，展示数据库最后一个成员