antd pro v5与django前后端项目开发前准备内容

最新推荐文章于 2023-03-26 08:30:52 发布

disabled_csdN

最新推荐文章于 2023-03-26 08:30:52 发布

阅读量1.9k

点赞数 1

分类专栏： # 4.1. react

0.0

本文链接：https://blog.csdn.net/qq_33997198/article/details/108525139

版权

4.1. react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

参考资料【极其推荐】：ant design pro v4(typescript)视频

1.如何代理到后端服务器？

配置proxy.ts
在这里插入图片描述

不走 mock 数据
npm run start:no-mock
在这里插入图片描述
django后端日志

Not Found: /api/login/
[11/Sep/2020 14:17:16] "POST /api/login/ HTTP/1.1" 404 2090

在这里插入图片描述
后端路由修改成匹配前端的

url(r'^api/login/', login_view, name='login'),

django后端日志

Forbidden (CSRF cookie not set.): /api/login/
[11/Sep/2020 14:18:50] "POST /api/login/ HTTP/1.1" 403 2837

需要处理CSRF
前端处理

res.setHeader('Access-Control-Allow-Origin', '*');  // CSRF暂时处理方案

在这里插入图片描述
后端处理
settings导入了csrf中间件

'django.middleware.csrf.CsrfViewMiddleware',

在这里插入图片描述
方法上添加CSRF注解

@csrf_exempt
def login_view(request):
    print('触发后端登录函数')
    return HttpResponse("<h1>触发后端登录函数!</h1>")

在这里插入图片描述

可以触发了：

触发后端登录函数
[11/Sep/2020 14:38:10] "POST /api/login/ HTTP/1.1" 200 34

然后因为ant design pro登录要求传参，我们需要对后端的视图函数进行修改，先在后端写一个死数据，将前端的mock数据取过来：

@csrf_exempt
def login_view(request):
    print('触发后端登录函数')
    print(request)
    res = {
        'name': 'Admin',
        'avatar': 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
        'userid': '00000001',
        'email': 'antdesign@alipay.com',
        'signature': '海纳百川，有容乃大',
        'title': '交互专家',
        'group': '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
        'tags': [
          {'key': '0',
           'label': '很有想法的',
           },
            {'key': '1',
             'label': '专注设计',
             },
            {'key': '2',
              'label': '辣~',
             },
            {'key': '3',
              'label': '大长腿',
             },
            {'key': '4',
              'label': '川妹子',
             },
            {'key': '5',
              'label': '海纳百川',
             },
        ],
        'notifyCount': 12,
        'unreadCount': 11,
        'country': 'China',
        'access': 'admin',          # 权限角色
        'geographic': {
            'province': {
                'label': '浙江省',
                'key': '330000',
            },
            'city': {
                'label': '杭州市',
                'key': '330100',
            },
        },
        'address': '西湖区工专路 77 号',
        'phone': '0752-268888888',
    }
    return JsonResponse({"result": res, "code": 200, "message": ""})

请求发成功了，数据返回了
在这里插入图片描述
currentUser登录验证时候此方法也需要满足数据验证通过【暂时没去整理这个方法的作用】

django后端补上这个方法和url，返回的数据先做成和login的一样，但是还没通过，确认一下要什么数据才能通过：

找到原因啦！！
login和currentUser的方法参数我给反了：
后端改成如下：

from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login, logout
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse
import json

# Create your views here.


@csrf_exempt
def login_view(request):
    if request.method == 'POST':
        req_data = json.loads(request.body)
        username = req_data.get("username")
        password = req_data.get("password")
        type = req_data.get("type")
        print(username, password, type)
        user = authenticate(username=username, password=password)
        if user:
            print('后端登录')
            login(request, user)        # 后端登录
            res = {'name': 'admin',
                   'password': 'admin',
                   'status': 'ok',
                   'type': 'account'}
        else:       # 数据库校验失败
            res = {'status': 'error',
                   'type': '', }
        return JsonResponse(res)
    else:       # 请求出问题
        res = {'status': 'error',
               'type': ''}
        return JsonResponse(res)


@csrf_exempt
def currentUser(request):
    '''暂时用户表没拓展这么多属性，先不做权限
    '''
    if request.method == 'GET':
        res = {
            'name': 'HAHAadmin',
            'avatar': 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
            'userid': '00000001',
            'email': 'antdesign@alipay.com',
            'signature': '海纳百川，有容乃大',
            'title': '交互专家',
            'group': '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
            'tags': [
                {'key': '0',
                 'label': '很有想法的',
                 },
                {'key': '1',
                 'label': '专注设计',
                 },
                {'key': '2',
                 'label': '辣~',
                 },
                {'key': '3',
                 'label': '大长腿',
                 },
                {'key': '4',
                 'label': '川妹子',
                 },
                {'key': '5',
                 'label': '海纳百川',
                 },
            ],
            'notifyCount': 12,
            'unreadCount': 11,
            'country': 'China',
            'access': 'admin',          # 权限角色
            'geographic': {
                'province': {
                    'label': '浙江省',
                    'key': '330000',
                },
                'city': {
                    'label': '杭州市',
                    'key': '330100',
                },
            },
            'address': '西湖区工专路 77 号',
            'phone': '0752-268888888',
        }
        return JsonResponse(res)
    else:
        res = {}
        return JsonResponse(res)