fantastic-admin前端+django后端，初始化全流程记录

news2024/9/24 5:30:20

fantastic-admin前端是我目前看到最完善的前端框架，只需要简单的设置就可以快速开始项目。

但是我本人的能力有限，对前端知识一知半解，之前废了九牛二虎之力才跑通了前后端流程，由于新的项目需要，有了开发新后台的想法，正好fantastic-admin发布了4.11.0，我就想重新走一遍初始化流程，一个是把之前一知半解的东西再搞搞，另外就是记录下前后端对接的流程，也许以后还用的上，也少走弯路。

废话不说，先看效果，我只是把前后端流程跑通，没有增加任何功能在里面。

居中布局

左侧布局

右侧布局

新版本重新做了登录界面，支持左，中，右的布局，个人感觉非常专业，尤其是将图片换成视频以后，更是显得高大上，这块源文件里没有提供示例，简单修改一下即可。

---------- 下面开始前后端对接流程 ----------

1、fantastic前端的启动方法

1.1、下载前端的源代码，选择核心不带示例程序的那个（带示例的没法打包）；

1.2、拷贝到指定目录，然后在 fantastic 目录下执行 pnpm install ,安装基础依赖包；

1.3、运行 pnpm run build，查看打包的状态，看看有没有出错；

1.4、运行 pnpm run dev，打开应用界面，查看是否可以正常运行；

1.5、按照示例要求修改路由，将路由的内容改为我希望的内容，位置在 /src/router

由里的 name 值不能重复，否则会报错，或者出现页面 404 的情况，这个在复制一个路由文件的时候经常出现；
路由的具体实现方法，请参考fantastic-admin的帮助文档

1.6、调整根目录下的 .env.development 文件

修改 VITE_APP_TITLE 为产品名称；
修改 VITE_APP_API_BASEURL 为后台地址，如果对应本地的 django 就是 http://127.0.0.1:8000/
生产环境暂不考虑；
这是页面还能正常显示，因为请求还没有切换到后台。

---------- 前端不改动代码部分完成，后续为个性化设置 ----------

我的后端使用的是 django，主要是前后端分离，用django可以省很多时间

2、django 后端启动方法

2.1、准备新建一个django程序在当前目录键入命令建立一个项目叫 all_in_one;

django-admin startproject all_in_one

2.2、新建一个应用，如crm 键入；

cd all_in_one;
python3 manage.py startapp crm

这样就新建了一个应用，可以以此类推新建多个应用；

2.3、将系统的默认配置写入数据库，默认为sqlite；

python3 manage.py migrate

2.4、启动程序，现实下面信息即表示启动成功；

 python3 manage.py runserver

2.5、修改 /all_in_one/setting.py 文件，这里的设置实际上只是看下默认页面的效果，对实际使用没有影响

2.6、修改 /all_in_one/urls.py 文件，内容如下：

2.7、将 urls.py 文件拷贝到 crm policy pricelist 目录下，内容为：

2.8、在相应文件的 /crm/views.py 中添加函数，如下：

def default_api(request: HttpRequest) -> str :

	# 从POST请求的body中获取JSON数据
	response_data = {}
	response_data['status'] = 'OK'
	return JsonResponse(response_data, status=200)

这个函数不是完整版，有些不明白的后面会有所说明

2.9、在浏览器访问这个链接 http://127.0.0.1:8000/crm/default 在 django 控制台上能看到响应，浏览器上看到返回的 json 即表示配置成功；

3、前后端联调。

3.1、后端安装 django 的 cors插件

pip3 install django-cors-headers

安装完后在setting.py中添加中间件及跨域许可

        MIDDLEWARE = [
            ...
            # cors 中间件
            'corsheaders.middleware.CorsMiddleware',
            'django.middleware.common.CommonMiddleware',
        ]
        # 设置允许跨域请求的来源
        CORS_ORIGIN_WHITELIST = [
            'http://localhost:9000',  # 允许来自 localhost:9000 的请求
            'http://127.0.0.1:9000',  # 可以同时指定 http 和 https 协议
            # 如果需要允许任意来源，可以使用下面的设置
            # 'http://*',
            # 'https://*',
        ]

3.2、修改后端函数代码，将之间只是简单的看效果的函数修改为响应需求的函数

from django.shortcuts import render

# Create your views here.
import json
from django.http import JsonResponse, HttpResponse
from django.views.decorators.csrf import csrf_exempt  
from django.views.decorators.http import require_http_methods
from django.http import HttpRequest, JsonResponse

@csrf_exempt
@require_http_methods(["POST"])  # 确保这个视图只接受POST请求
def default_api(request: HttpRequest) -> str :

	# 从POST请求的body中获取JSON数据
	body_unicode = request.body.decode('utf-8')  # 将bytes类型的body转换为unicode
	data = json.loads(body_unicode)  # 将unicode转换为Python字典
	account = data.get('account', '')
	password = data.get('password', '')
	print(account)
	print(password)

	response_data = {}
	response_data['status'] = '1'
	response_data['error'] = ''
	response_data['data'] = {}
	response_data['data']['account'] ='admin'
	response_data['data']['token'] = '12345'
	response_data['data']['avatar'] = ''
	print(response_data)
	return JsonResponse(response_data, status=200)

解释一下这个函数的作用

@csrf_exempt

@require_http_methods(["POST"]) # 确保这个视图只接受POST请求

后面response_data的格式是前端规定好的，在官方帮助文档在/src/api/index.ts的拦截器里有说明

    /**
     * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
     * 假设返回数据格式为：{ status: 1, error: '', data: '' }
     * 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录
     * 请求出错时 error 会返回错误信息
     */

在 /src/store/modules/user.ts 里，如下图，需要从返回信息里获取account，token，avatar三个值，其中avatar是头像，返回空链接的话系统会替换上一个默认头像

* 这里的 account ，token，avatar 信息很重要，如果不是这个格式，即使用户信息验证正确，系统会默认跳转到登录页。