Python Django脚手架fu-admin教程：快速开发（前后端模板代码）

谁借莪１个温暖的怀抱￠ 2024-02-26 06:26 5阅读 0赞

## 效果展示 ##

![在这里插入图片描述][7e352fbab8ba432dab0ef71bed6367a1.png]  
![在这里插入图片描述][8e2934d578ca48a78279915c95f58839.png]  
![在这里插入图片描述][7c0953b3868e451fad6fb01b1d9c3deb.png]

## 快速开发 ##

### [\#][Link 1]需求 ###

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

### [\#][Link 2]后端 ###

#### [\#][Link 3]1. 创建App ####

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

#### [\#][Link 4]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',
    ]

#### [\#][Link 5]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',)

#### [\#][Link 6]4. 迁移数据库文件 ####

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

#### [\#][Link 7]5. 创建api、路由接口 ####

*  创建`api.py`

> `fu_ninga`应该为`fu_ninja`

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_ninja 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"])

#### [\#][Link 8]6. 在 `fuadmin/api.py`中添加刚才创建的router ####

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

#### [\#][Link 9]7. 功能接口已完成，文档查看： [http://127.0.0.1:8000/api/docs(opens new window)][http_127.0.0.1_8000_api_docs_opens new window] ####

### [\#][Link 10]前端 ###

#### [\#][Link 11]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 });
    };

#### [\#][Link 12]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,
      },
    ];

#### [\#][Link 13]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>

#### [\#][Link 14]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>

#### [\#][Link 15]5. 在菜单中添加demo ####

![img][]

![img][img 1]

#### [\#][Link 16]6. 在菜单中添加按钮权限 ####

![img][img 2]

### [\#][Link 17]完成 ###

*  刷新页面打开 项目演示，则是一个简单完整的 CRUD 完成。

[7e352fbab8ba432dab0ef71bed6367a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/26/25b9b95ef8114f53a2b2580a6ba9e960.png
[8e2934d578ca48a78279915c95f58839.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/26/5b74d590eb5d4d69a2c164bffcea8b6a.png
[7c0953b3868e451fad6fb01b1d9c3deb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/26/4def2be625384ed1b843b9d80fbf252c.png
[Link 1]: http://124.222.210.96/document/crud.html#%E9%9C%80%E6%B1%82
[Link 2]: http://124.222.210.96/document/crud.html#%E5%90%8E%E7%AB%AF
[Link 3]: http://124.222.210.96/document/crud.html#_1-%E5%88%9B%E5%BB%BAapp
[Link 4]: http://124.222.210.96/document/crud.html#_2-%E5%9C%A8fuadmin-setting-py%E9%87%8C%E6%B7%BB%E5%8A%A0%E6%88%91%E4%BB%AC%E7%9A%84app
[Link 5]: http://124.222.210.96/document/crud.html#_3-%E5%88%9B%E5%BB%BA-models-%E6%A8%A1%E5%9E%8B
[Link 6]: http://124.222.210.96/document/crud.html#_4-%E8%BF%81%E7%A7%BB%E6%95%B0%E6%8D%AE%E5%BA%93%E6%96%87%E4%BB%B6
[Link 7]: http://124.222.210.96/document/crud.html#_5-%E5%88%9B%E5%BB%BAapi%E3%80%81%E8%B7%AF%E7%94%B1%E6%8E%A5%E5%8F%A3
[Link 8]: http://124.222.210.96/document/crud.html#_6-%E5%9C%A8-fuadmin-api-py%E4%B8%AD%E6%B7%BB%E5%8A%A0%E5%88%9A%E6%89%8D%E5%88%9B%E5%BB%BA%E7%9A%84router
[Link 9]: http://124.222.210.96/document/crud.html#_7-%E5%8A%9F%E8%83%BD%E6%8E%A5%E5%8F%A3%E5%B7%B2%E5%AE%8C%E6%88%90-%E6%96%87%E6%A1%A3%E6%9F%A5%E7%9C%8B-http-127-0-0-1-8000-api-docs
[http_127.0.0.1_8000_api_docs_opens new window]: http://127.0.0.1:8000/api/docs
[Link 10]: http://124.222.210.96/document/crud.html#%E5%89%8D%E7%AB%AF
[Link 11]: http://124.222.210.96/document/crud.html#_1-%E5%88%9B%E5%BB%BA-api-%E6%96%87%E4%BB%B6
[Link 12]: http://124.222.210.96/document/crud.html#_2-%E5%88%9B%E5%BB%BA-data-%E6%96%87%E4%BB%B6
[Link 13]: http://124.222.210.96/document/crud.html#_3-%E5%88%9B%E5%BB%BA-index-%E6%96%87%E4%BB%B6
[Link 14]: http://124.222.210.96/document/crud.html#_4-%E5%88%9B%E5%BB%BA-demo-%E6%96%87%E4%BB%B6
[Link 15]: http://124.222.210.96/document/crud.html#_5-%E5%9C%A8%E8%8F%9C%E5%8D%95%E4%B8%AD%E6%B7%BB%E5%8A%A0demo
[img]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/26/35923363562d44f0a091dfdeb4b0596c.png
[img 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/26/980e57a141bc4fc99a34b310414e8523.png
[Link 16]: http://124.222.210.96/document/crud.html#_6-%E5%9C%A8%E8%8F%9C%E5%8D%95%E4%B8%AD%E6%B7%BB%E5%8A%A0%E6%8C%89%E9%92%AE%E6%9D%83%E9%99%90
[img 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/26/78cec963e68447309c3f44c8db7886ab.png
[Link 17]: http://124.222.210.96/document/crud.html#%E5%AE%8C%E6%88%90