目录

 

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

如何将前端后端整合到一个springboot_django

 2.2.与后端交互逻辑设计

如何将前端后端整合到一个springboot_python_02

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

如何将前端后端整合到一个springboot_前端_03

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

如何将前端后端整合到一个springboot_django_04

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

如何将前端后端整合到一个springboot_华为_05

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

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

 

3.3.如果提示403错误

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