快速开发

需求

• 创建一个项目管理app；
• 字段包含：项目名称、项目编码、项目状态；
• 功能：包含项目管理的增删改查、导出。

后端

1. 创建App

• 通过命令创建App python manage.py startapp demo

2. 在fuadmin/setting.py里添加我们的app

DEBUG = locals().get('DEBUG', True)
ALLOWED_HOSTS = locals().get('ALLOWED_HOSTS', ['*'])
DEMO = locals().get('DEMO', False)

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_celery_beat',
    'django_celery_results',
    'system',
    'demo',
]

3. 创建 models 模型

• 编写项目管理模型内容 demo/models.py，如下：

from django.db import models
from utils.models import CoreModel


class Demo(CoreModel):
    name = models.CharField(null=False, max_length=64, verbose_name="项目名称", help_text="项目名称")
    code = models.CharField(max_length=32, verbose_name="项目编码", help_text="项目编码")
    status = models.CharField(max_length=64, verbose_name="项目状态", help_text="项目状态")

    class Meta:
        db_table = "Demo"
        verbose_name = '项目演示'
        verbose_name_plural = verbose_name
        ordering = ('-create_datetime',)

4. 迁移数据库文件

• 执行迁移命令：
  • python3 manage.py makemigrations demo
  • python3 manage.py migrate demo
• 迁移成功后，通过数据库可查看到

5. 创建api、路由接口

• 创建api.py

from typing import List
from ninja import Router, ModelSchema, Query, Field
from ninja.pagination import paginate

from demo.models import Demo
from utils.fu_crud import create, delete, update, retrieve, ImportSchema, export_data, import_data
from utils.fu_ninga import MyPagination, FuFilters

router = Router()


# 设置过滤字段
class Filters(FuFilters):
    name: str = Field(None, alias="name")
    code: str = Field(None, alias="code")
    status: int = Field(None, alias="status")
    id: str = Field(None, alias="demo_id")


# 设置请求接收字段
class DemoSchemaIn(ModelSchema):
    class Config:
        model = Demo
        model_fields = ['name', 'code', 'sort', 'status']


# 设置响应字段
class DemoSchemaOut(ModelSchema):
    class Config:
        model = Demo
        model_fields = "__all__"


# 创建Demo
@router.post("/demo", response=DemoSchemaOut)
def create_demo(request, data: DemoSchemaIn):
    demo = create(request, data, Demo)
    return demo


# 删除Demo
@router.delete("/demo/{demo_id}")
def delete_demo(request, demo_id: int):
    delete(demo_id, Demo)
    return {"success": True}


# 更新Demo
@router.put("/demo/{demo_id}", response=DemoSchemaOut)
def update_demo(request, demo_id: int, data: DemoSchemaIn):
    demo = update(request, demo_id, data, Demo)
    return demo


# 获取Demo
@router.get("/demo", response=List[DemoSchemaOut])
@paginate(MyPagination)
def list_demo(request, filters: Filters = Query(...)):
    qs = retrieve(request, Demo, filters)
    return qs


# 导入
@router.get("/demo/all/export")
def export_demo(request):
    title_dict = {
        'name': '名称',
        'code': '编码',
        'status': '状态',
        'sort': '排序',
    }
    return export_data(request, Demo, DemoSchemaOut, title_dict)


# 导出
@router.post("/demo/all/import")
def import_demo(request, data: ImportSchema):
    title_dict = {
        '名称': 'name',
        '编码': 'code',
        '状态': 'status',
        '排序': 'sort',
    }
    return import_data(request, Demo, DemoSchemaIn, data, title_dict)

• 创建router.py

from ninja import Router
from demo.api import router

demo_router = Router()
demo_router.add_router('/', router, tags=["Demo"])

6. 在 fuadmin/api.py中添加刚才创建的router

api.add_router('/system/', system_router)
api.add_router('/demo/', demo_router)

7. 功能接口已完成，文档查看： http://127.0.0.1:8000/api/docs

前端

1. 创建 api 文件

• 在目录web/src/views/demo/下创建api.js： 代码如下：

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

enum DeptApi {
  prefix = '/api/demo/demo',
}

export const getList = (params) => {
  return defHttp.get({ url: DeptApi.prefix, params });
};

/**
 * 保存或更新
 */

export const createOrUpdate = (params, isUpdate) => {
  if (isUpdate) {
    return defHttp.put({ url: DeptApi.prefix + '/' + params.id, params });
  } else {
    return defHttp.post({ url: DeptApi.prefix, params });
  }
};

export const importData = (params) => {
  return defHttp.post({ url: DeptApi.prefix + '/all/import', params });
};

export const exportData = () => {
  return defHttp.get(
          { url: DeptApi.prefix + '/all/export', responseType: 'blob' },
          { isReturnNativeResponse: true },
  );
};

/**
 * 删除
 */

export const deleteItem = (id) => {
  return defHttp.delete({ url: DeptApi.prefix + '/' + id });
};

2. 创建 data 文件

• 在目录web/src/views/demo/下创建data.js： 代码如下：

import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';

export const columns: BasicColumn[] = [
  {
    title: '项目名称',
    dataIndex: 'name',
    width: 200,
  },
  {
    title: '项目编码',
    dataIndex: 'code',
    width: 180,
  },
  {
    title: '项目排序',
    dataIndex: 'sort',
    width: 100,
  },
  {
    title: '项目状态',
    dataIndex: 'status',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'create_datetime',
    width: 180,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '项目名称',
    component: 'Input',
    colProps: { span: 6 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'id',
    label: 'id',
    component: 'Input',
    show: false,
  },
  {
    field: 'name',
    label: '项目名称',
    required: true,
    component: 'Input',
  },
  {
    field: 'code',
    label: '项目编码',
    required: true,
    component: 'Input',
  },
  {
    field: 'status',
    component: 'DictSelect',
    label: '项目状态',
    componentProps: {
      dictCode: 'project_status',
    },
  },
  {
    field: 'sort',
    label: '岗位排序',
    component: 'InputNumber',
    required: true,
  },
];

3. 创建 index 文件

• 在目录web/src/views/demo/下创建index.vue： 代码如下：

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <Space style="height: 40px">
          <a-button
                  type="primary"
                  v-auth="['demo:add']"
                  preIcon="ant-design:plus-outlined"
                  @click="handleCreate"
          >
            新增
          </a-button>
          <a-button
                  type="error"
                  v-auth="['demo:delete']"
                  preIcon="ant-design:delete-outlined"
                  @click="handleBulkDelete"
          >
            删除
          </a-button>
          <BasicUpload
                  :maxSize="20"
                  :maxNumber="1"
                  @change="handleChange"
                  class="my-5"
                  type="warning"
                  text="导入"
                  v-auth="['demo:update']"
          />
          <a-button
                  type="success"
                  v-auth="['demo:update']"
                  preIcon="carbon:cloud-download"
                  @click="handleExportData"
          >
            导出
          </a-button>
        </Space>
      </template>
      <template #action="{ record }">
        <TableAction
                :actions="[
            {
              type: 'button',
              icon: 'clarity:note-edit-line',
              color: 'primary',
              auth: ['demo:update'],
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              type: 'button',
              color: 'error',
              placement: 'left',
              auth: ['demo:delete'],
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record.id),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <DemoDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { usePermission } from '/@/hooks/web/usePermission';
import { useDrawer } from '/@/components/Drawer';
import DemoDrawer from './Drawer.vue';
import { Space } from 'ant-design-vue';
import { BasicUpload } from '/@/components/Upload';
import { deleteItem, getList, exportData, importData } from './api';
import { columns, searchFormSchema } from './data';
import { message } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { downloadByData } from '/@/utils/file/download';
export default defineComponent({
  name: 'Demo',
  components: { BasicTable, DemoDrawer, TableAction, BasicUpload, Space },
  setup() {
    const [registerDrawer, { openDrawer }] = useDrawer();
    const { createConfirm } = useMessage();
    const { hasPermission } = usePermission();
    const [registerTable, { reload, getSelectRows }] = useTable({
      api: getList,
      columns,
      formConfig: {
        labelWidth: 80,
        schemas: searchFormSchema,
      },
      useSearchForm: true,
      showTableSetting: true,
      tableSetting: { fullScreen: true },
      bordered: true,
      showIndexColumn: false,
      rowSelection: {
        type: 'checkbox',
      },
      actionColumn: {
        width: 150,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: undefined,
      },
    });

    function handleCreate() {
      openDrawer(true, {
        isUpdate: false,
      });
    }

    function handleEdit(record: Recordable) {
      openDrawer(true, {
        record,
        isUpdate: true,
      });
    }

    async function handleDelete(id: number) {
      await deleteItem(id);
      message.success('删除成功');
      await reload();
    }

    function handleBulkDelete() {
      if (getSelectRows().length == 0) {
        message.warning('请选择一个选项');
      } else {
        createConfirm({
          iconType: 'warning',
          title: '提示',
          content: '是否确认删除？',
          async onOk() {
            for (const item of getSelectRows()) {
              await deleteItem(item.id);
            }
            message.success('删除成功');
            await reload();
          },
        });
      }
    }

    async function handleChange(list: string[]) {
      console.log(list[0]);
      await importData({ path: list[0] });
      message.success(`导入成功`);
      await reload();
    }

    async function handleExportData() {
      const response = await exportData();
      await downloadByData(response.data, '项目数据.xlsx');
    }

    function handleSuccess() {
      message.success('请求成功');
      reload();
    }

    return {
      registerTable,
      registerDrawer,
      handleCreate,
      handleEdit,
      handleDelete,
      handleSuccess,
      hasPermission,
      handleBulkDelete,
      getSelectRows,
      handleExportData,
      handleChange,
    };
  },
});
</script>

4. 创建 demo 文件

• 在目录web/src/views/demo/下创建Drawer.vue： 代码如下：

<template>
  <BasicDrawer
          v-bind="$attrs"
          @register="registerDrawer"
          showFooter
          :title="getTitle"
          width="50%"
          @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" />
  </BasicDrawer>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { createOrUpdate } from './api';
import { formSchema } from './data';

export default defineComponent({
  name: 'ButtonDrawer',
  components: { BasicDrawer, BasicForm },
  emits: ['success', 'register'],
  setup(_, { emit }) {
    const isUpdate = ref(true);

    const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
      labelWidth: 100,
      schemas: formSchema,
      showActionButtonGroup: false,
      baseColProps: { lg: 12, md: 24 },
    });

    const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
      await resetFields();
      setDrawerProps({ confirmLoading: false });
      isUpdate.value = !!data?.isUpdate;

      if (unref(isUpdate)) {
        await setFieldsValue({
          ...data.record,
        });
      }
    });

    const getTitle = computed(() => (!unref(isUpdate) ? '新增项目' : '编辑项目'));

    async function handleSubmit() {
      try {
        const values = await validate();
        setDrawerProps({ confirmLoading: true });
        await createOrUpdate(values, unref(isUpdate));
        closeDrawer();
        emit('success');
      } finally {
        setDrawerProps({ confirmLoading: false });
      }
    }

    return {
      registerDrawer,
      registerForm,
      getTitle,
      handleSubmit,
    };
  },
});
</script>

5. 在菜单中添加demo

6. 在菜单中添加按钮权限

完成

• 刷新页面打开 项目演示，则是一个简单完整的 CRUD 完成。
• 如有问题可参考：demo 代码。