VbenAdmin+Django前后端逻辑梳理

VbenAdmin+Django前后端逻辑梳理

首先Vben Admin中有个环境变量需要设置一下，测试环境在.env.development中：

VITE_GLOB_API_URL=http://localhost:8000/api

因为后端的Django的接口默认在8000端口，api关键字是Django中定义的。

如：前端发送的请求会默认转去后端这个接口。

前端源码：

前端源码在src/views目录下。

如：src/views/home/index.vue下

<script lang="ts" setup>
  import { getProjectList } from '/@/api/demo';
  ...

接口定义在src/api/demo.ts文件下

import { defHttp } from '/@/utils/http/axios';
import { useGlobSetting } from '/@/hooks/setting';

const Api = {
  demo: '/demo/projects/',
};
export function getDataList(params) {
  return defHttp.get({ url: Api.demo, params: params });
}

Django后端：

前端的请求都是走到Django后端的view.py中进行处理的。至于serializers，它就是封装了数据序列化的。

Django project settins.py同级目录下有一个urls.py：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('apps.system.urls')),
    path('api/demo/', include('apps.demo.urls')),
]

app/demo下的url里面可以写：

router = routers.DefaultRouter()
router.register(r'projects', views.ProjectViewSet)

urlpatterns = [
    path('', include(router.urls)),
]

app/demo下的views.py这样写：

from rest_framework.viewsets import ModelViewSet

class ProjectViewSet(ModelViewSet):
    queryset = Project.objects.order_by('-id')
    serializer_class = ProjectSerializer

app/demo下的serializers.py这样写：

from rest_framework import serializers

class ProjectSerializer(serializers.ModelSerializer):
    class Meta:
        model = Project
        fields = '__all__'      

app/demo下的models.py这样写：

import os
from django.db import models

# Create your models here.
class Project(models.Model):
    """
    The table class of Project
    """
    project = models.CharField(max_length=100)

这个包含了serializers的一套写法是djangorestframework自带的封装效果。这样的ViewSet里面包含了get，post，update方法。

当然也可以自己定义view，在views.py中，可以用Django自带的一些数据库query的方法，这个方法没有测过，供参考。

views.py:

from .models import Project

class ProjectViewSet(ViewSet):

    @action(detail=False, methods=['get'])
    def get_projects(self, request, *args, **kwargs):
        month = 4
        projects = Project.objects.filter(month=month)
        return Response(jira_projects)