别人写的平台再垃圾，也是用来淘汰你的。

代码更新地址：https://github.com/ahu965/api-automator.git

Python环境没有的，请自行安装，本教程采用的是python 3.9。

Django官网 https://www.djangoproject.com/

Node环境没有的，请自行安装，本教程采用的是node v17.6.0。

Vue.js官网 https://cn.vuejs.org/

菜单栏LOGO

上节预留的LOGO位置还未填充，这节先来填充LOGO位，在菜单栏展开和收起时，分别是两个不同大小的div，因此也需要两张不同大小的图片来填充。

• 首先根据预留的div位置大小，自行找到两张与div大小相同的图片，过大或者过小都可能会导致图片变形。
• 然后将找到的图片拷贝到src/public/images目录下

• 接着在HomeView中，将图片设置为预留div的背景，如下：

  .logo_big {
    width: 200px;
    height: 60px;
    background-image: url("./public/images/logo_big.png");
    background-size: 200px 60px;
  }

  .logo_small {
    width: 80px;
    height: 60px;
    background-image: url("./public/images/logo_small.png");
    background-size: 80px 60px;
  }

• 最后重启项目，刷新页面就可以看到效果了。

项目管理模块开发（一）

本节开始正式开发平台业务功能模块。首先是项目管理模块，他是用来存放不同项目的接口用例，功能主要是简单的增删改查。

定义表结构

项目表本身只需要两个字段，项目名、项目说明，然后通用字段id、创建人、创建时间、更新时间。

• 打开项目，使用命令python manage.py startapp main床架一个main应用，用来主要平台主要业务功能代码。

• 然后在main目录下的models.py文件中定义项目表Projects的结构，id字段会自动生成可以不定义，如下：

# Create your models here.
class Projects(models.Model):
    name = models.CharField(max_length=30, verbose_name="项目名称")
    desc = models.CharField(max_length=500, blank=True, null=True, verbose_name="项目描述")
    created_by = models.ForeignKey(User, null=True, verbose_name="创建人", on_delete=models.DO_NOTHING)
    created_at = models.DateTimeField(default=datetime.now, verbose_name="创建时间")
    updated_at = models.DateTimeField(default=datetime.now, verbose_name="更新时间")

    class Meta:
        verbose_name = "项目"
        verbose_name_plural = verbose_name

• 先将main添加到配置文件settings.py文件中，然后使用命令python manage.py makemigrations，可以看到main/migrations/下新增了0001_initial.py，这个就是用来初始化数据库表结构。

• 最后执行命令python manage.py migrate执行初始化数据库表结构文件，将改动应用到数据库。执行后可以看到数据库新增了一张表main_projects。

将main应用注册到Admin

之前给大家介绍了Django自带了管理后台Admin，为了可以直接在Admin管理后台操作projects表，需要先将projects表所在的应用注册到Admin。

在main下的admins.py中进行注册：

from django.contrib import admin

# Register your models here.
from main.models import Projects


class BaseAdmin(admin.ModelAdmin):
    list_per_page = 20


class ProjectsAdmin(BaseAdmin):
    list_display = ('name', 'desc', 'created_by', 'created_at')


admin.site.register(Projects, ProjectsAdmin)

再次启动后端项目，访问admin管理后台，可以看到新增了Main/项目目录，并且列表展示了对应的字段，Admin后台增删改查功能都已经有了。但是是仅针对projects单表的操作，是不完善的，所以需要我们自己去开发更适合平台上使用的能力。但是Admin可以用来进行测试或者操作数据库，所以还是建议将自己创建的model注册到Admin。

项目列表展示和查询

首先需要在后端项目中定义出项目列表接口，并且支持查询功能。查询功能可以使用DRF提供的GenericViewSet和ListModelMixin快速开发。

• 首先在main下创建serializers.py，主要功能是将数据库查询的数据转换给接口的响应数据，即DO转换为VO。

from rest_framework.serializers import ModelSerializer

from main.models import Projects


class ProjectsSerializer(ModelSerializer):
    class Meta:
        model = Projects
        fields = ['id', 'name', 'desc', 'created_by', 'created_at']

• 然后在main/view.py定义项目列表View并使用ProjectsSerializer

from rest_framework import mixins, viewsets

from main.models import Projects
from main.serializer import ProjectsSerializer


class ProjectsViewSet(mixins.ListModelMixin,
                     viewsets.GenericViewSet):
    queryset = Projects.objects.filter()
    serializer_class = ProjectsSerializer

• 接着在main下创建urls.py，主要功能是定义路由。

from django.urls import re_path, include
from rest_framework.routers import DefaultRouter

from main.views import ProjectsViewSet

router = DefaultRouter()
router.register(r'projects', ProjectsViewSet, basename="projects")

urlpatterns = [
    re_path(r'^', include(router.urls)),
]

• 最后，为了使自定义的路由生效，需要将自定义的路由配置到项目路由配置文件中

• 使用postman验证接口是否返回正常，以下是在Admin后台手动新增了两条记录，项目列表查询的结果。

篇幅限制，本节结束啦，下节将在前端项目中对接项目列表接口。敬请期待～