梅科尔工作室-django web应用(二)(前后端交互pycharm与HarmonyOS)

目录

 

1.写在前面

1.1.需要准备的软件

1.2.需要了解的知识

2.前端

2.1.页面设计

 2.2.与后端交互逻辑设计

2.2.1.需要准备的库

2.2.2.js逻辑编辑

3.后端

3.1.路由配置

3.2.完成响应函数填写

3.2.1.完成库的引入

3.2.2.类的编辑

3.3.如果提示403错误


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.页面设计

d61e8bed295a44cb995d8a5c69430292.png

 2.2.与后端交互逻辑设计

9a5d9c52e6e94baf9fb6e4cc499ae4e0.png

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(一级路由)

2d48ea02a378460990954b1b926f2409.png

 不写一级路由,但是有include会自动跳转到app下的urls文件(二级路由)

f3d56c49403140f1a7369d744327c3a7.png

        在这里能够实现在地址后添加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.类的编辑

df23a99b82174505b8871d045749a60c.png

        类继承APIView,post接受请求,并获得请求的数据.

        函数前五行用来从数据库提取数据并保存在数组中(json格式的数组),第六行打印从前端传来的验证信息。最后一行向前端返回数据。

3.3.如果提示403错误

Django的POST请求报403,及四种解决方法 - 腾讯云开发者社区-腾讯云 (tencent.com)

猜你喜欢

转载自blog.csdn.net/qq_59744114/article/details/125751732
今日推荐