前后端分离-登陆接口实现跨域
一、创建login项目
1、创建testBackends项目(如果做过第一章节这里可以跳过)
django-admin startproject testBackends
2、创建login模块应用
(1)cd进入testBackends项目
(2)创建任意项目模块如:login
python3 manage.py startapp login
3、把login应用配置到testBackends–>settings.py里面,(如果看过第一章那么安装Django依赖包这里可以跳过,如果没有看过在这里需要安装依赖包,并且也要配置到settings.py里面)
1、安装rest_framework框架
它是基于Django的,帮助我们快速开发符合restful规范的接口框架,它主要适用于前后端分离项目。
Django中文网:https://www.django.cn/course/show-20.html
Django官方文档:https://www.django-rest-framework.org/api-guide/serializers/
pip3 install djangorestframework
2、安装django-cors-headers依赖
django-cors-headers处理跨域请求,一个为响应添加跨源资源共享(CORS)头的Django应用。这允许从其他源向Django应用程序发出浏览器内请求。
pip3 install django-cors-headers
或者写成下列这样也是可以的:
4、在login模块内添加下列.py文件
login/serializers.py 数据序列化
login/urls.py 添加login的路由
二、创建登陆数据库
1、在login/models.py内编写数据表及名称
from django.db import models
class Login(models.Model):
# 数据库格表字段,用户名及密码
username = models.CharField(max_length=20)
password = models.CharField(max_length=20)
class Meta:
# 数据库名称d_login
db_table = "d_login"
2、login/serializers.py序列化器编写
#!/usr/bin/python3
# -*- coding: utf-8 -*-
# @Date : 2022/1/8
# @Name : ZhouZongXin
"""
序列化器
"""
from rest_framework import serializers
from .models import Login # 引用数据库文件
class LoginSerializer(serializers.HyperlinkedModelSerializer):
class Meta:
# 需要序列化的模型 Login
model = Login
# 需要序列化的字段,"__all__"的意思是所有字段
fields = "__all__"
3、然后在终端进行输入下列命令进行创建数据库
1、迁移模型,创建表结构
python3 manage.py makemigrations
2、创建数据库表
python3 manage.py migrate
这样数据库表就生成了。这个是内置的sqlite。
三、进入login/views.py编写登陆逻辑
from django.shortcuts import render
from django.http import JsonResponse
from login import models # 引用数据库
# 创建登陆API方法,这里必须有一个形参request
def apiLogin(request):
# 简单写一个返回结果
res = {
'code': 0,
'msg': '登录成功'
}
# request.POS获取请求格式为POST
if request.POST:
# request.POST.get获取POST请求参数
username = request.POST.get('username') # 用户名
password = request.POST.get('password') # 密码
Type = request.POST.get('type') # 类型(1=登陆,2=注册)
# 登陆
if Type == "1":
# 查询数据库的所有字段,查询的数据结果是一个数组包含字典
# <QuerySet [{'id': 1, 'username': 'admin', 'password': 'admin'}, {'id': 2, 'username': 'zzx', 'password': 'zzx'}]>
Login = models.Login.objects.values()
# 遍历数据库数据
for i in Login:
if i['username'] == username and i['password'] == password:
# JsonResponse(res)返回json格式
return JsonResponse(res)
res['code'] = 1
res['msg'] = "账号密码不正确"
return JsonResponse(res)
# 注册
elif Type == "2":
if username and password:
# 添加username,password数据到数据库
login_save = models.Login(username=username, password=password)
# 保存数据
login_save.save()
res['msg'] = "账号密码注册成功"
return JsonResponse(res)
res['msg'] = "注册失败"
return JsonResponse(res)
else:
res['msg'] = "类型错误"
return JsonResponse(res)
res['msg'] = "错误的请求方式"
return JsonResponse(res)
四、在配置路由
1、打开login/urls.py 文件进行编写路由
在各自 app 目录下,写自己的 urls.py 文件,最后进行路径跳转
#!/usr/bin/python3
# -*- coding: utf-8 -*-
# @Date : 2022/1/8
# @Name : ZhouZongXin
"""
路由
"""
from django.urls import path
from . import views # 引用视图层
from django.views.decorators.csrf import csrf_exempt # 解决跨域
# 路由list
urlpatterns = {
# "login" 参数表示路径
# csrf_exempt()用来解决前后端分离跨域问题,如果不添加这个那么无法进行跨域
# views.apiLogin 是当前视图层views内的apiLogin方法
# login/urls.py 中给路由起别名,name="路由别名"
path("login", csrf_exempt(views.apiLogin), name='login') # 第一个参数表示路径
}
2、主路由配置跳转到login模块的路由
from django.contrib import admin
from django.urls import path, include # 导入了include函数
urlpatterns = [
path('admin/', admin.site.urls),
# 此时的路由是 api/login
# 存在问题:Django 项目里多个app目录共用一个 urls 容易造成混淆,后期维护也不方便。所以我们用到路由分发(include),使用路由分发(include),让每个app目录都单独拥有自己的 urls
# include("login.urls"),login模块下的urls路由
path('api/', include("login.urls"))
]
五、启动项目,进行前后端联调
python3 manage.py runserver
启动项目后,我们用postman或者VUE进行前后端联调就可以啦
1、postman
2、VUE
在这里我们简单的前后端分离就完成了,具体的业务实现还是要看代码基础以及业务知识哦~~
六、额外小知识
1、HttpResponse与JsonResponse的区别
HttpResponse与JsonResponse都是django中后台给前台返回数据的方法,并且他们最后走的都是http协议。
HttpResponse:需要我们自己前后台进行序列化与反序列化
JsonResponse:则把序列化和反序列化封装了起来,我们直接传入可序列化的字符串,在前台就能收到对应的数据。
总结:主要是针对前端进行序列化与反序列化是否处理的区别。