目录
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.页面设计
2.2.与后端交互逻辑设计
2.2.1.需要准备的库
(1)qs:将js对象序列化为URL的格式,中间用&连接。通过npm install querystring获取,npm可以由node.js软件自带。
(2)fetch:提供了一些js的接口,可以用于请求与响应。软件自带库,详细信息请看:
使用 Fetch - Web API 接口参考 | MDN (mozilla.org)
2.2.2.js逻辑编辑
点击按钮区域后,执行OnClick()函数,调用fetch。
首先,向后端发送请求,url为请求指向的地址,data为前端向后端发送的用于验证的信息,转换为url格式。之后,判断是否请求成功,请求成功后,接收响应数据,并在页面特定区域展示。
3.后端
3.1.路由配置
在django项目文件的urls文件中配置app文件的urls(一级路由)
不写一级路由,但是有include会自动跳转到app下的urls文件(二级路由)
在这里能够实现在地址后添加resp/跳转到view视图文件,内部写有函数或类,这里用的类的名称是Appresp,后面要加as_view(),括号不能省。
前端写的url要与后端执行请求响应的地址相同。就例如这里,因为项目文件下urls没有写以及路由,是“”根目录,并且app下urls文件“”中写着resp/所以,前端要写,运行服务的地址/resp/。如果你在项目文件下urls的“”中写了地址,那么,前端url就应该写,运行服务的地址/一级地址/resp/。
运行服务要用python manage.py runserver
3.2.完成响应函数填写
3.2.1.完成库的引入
(1)导入APIView接口
首先要有基础的库 pip install djangorestframework。
在view视图中引入APIView(更方便的完成响应)
from rest_framework.views import APIView
(2)导入HttpResponse(用来向前端返回数据,响应)
from django.http import HttpResponse
3.2.2.类的编辑
类继承APIView,post接受请求,并获得请求的数据.
函数前五行用来从数据库提取数据并保存在数组中(json格式的数组),第六行打印从前端传来的验证信息。最后一行向前端返回数据。