社区首页 >专栏 >react-admin+material ui5.0项目的总结

react-admin+material ui5.0项目的总结

爱学习的前端歌谣

发布于 2023-10-18 03:08:57

48900

代码可运行

文章被收录于专栏：前端小歌谣前端小歌谣

运行总次数：0

代码可运行

前言

大家好我是歌谣今天对于自己的项目做个详细的总结

背景

为了更好的进行前后端的设计开发后端目前用postgrest设计数据库 前端直接使用react-admin和material ui 5.0进行开发大大增加开发效率

技术栈

后端 postgrest

前端 react-admin+material ui

页面设计结构

程序的设计分为三个部分 路由 数据呈现页面的设计分为三个大块就是图中的左中右三块

涉及的局部知识点

弹性布局代码

 <Grid style={{ margin: 0, padding: 0, display: "flex" }} >
 <Grid style={{ width: "200px", margin: "24px 0 0 24px" }} >
 xxxx
 </Grid>
      <Grid style={{ flexGrow: "1", margin: "24px 0 0 24px" }} >
      xxxxx
      </Grid>
    </Grid>

以上就是形成弹性布局的核心代码向对应的页面中插入dom节点即可展示

左侧 Rc-tree

安装 yarn add rc-tree 务必引入样式

import "rc-tree/assets/index.css"

数据转换部分

数据需要转换为带有title和key的数据转换的方式有很多种这边简单写一下转换的过程

  dataProviders.getStyleTree('t_prod_category', 't_prod_style').then((res: any) => {
      console.log(res, "resssssssss")
      let arr: any = []
      let arr1: any = [{
        key: 0,
        title: "品类管理",
      }]
      res && res.map((item: any, index: number) => {
        arr.push({ key: item.id, title: item.category_name, children: [] })
        item.t_prod_style && item.t_prod_style.map((item1: any, index1: any) => {
          if (arr.children) {
            arr[index].children = []
          }
          arr[index].children.push({ key: item1.id, title: item1.style_name })
        })
      })
      console.log(arr, "arr")
      arr1[0].children = arr
      setTreeDataList(arr1)
    })

右侧react-admin

利用react-admin自带router属性进行反复嵌套

 <Admin
            dataProvider={dataProvider}
            basename='/categoryman'
            layout={appLayout}
            i18nProvider={i18nProvider}
          >
            <Resource name='t_base_materiel_type' list={MaterialTypeList} recordRepresentation="name" create={MaterialTypeAdd} edit={MaterialTypeEdit} />
            <Resource name='t_prod_category' recordRepresentation="category_name" list={CategoryList} show={CategoryShow} create={CategoryAdd} edit={CategoryEdit} hasEdit />
            <CustomRoutes>
              <Route path="CatagoryTitle" element={
                <CatagoryTitle handleUpdateList={handleUpdateList}></CatagoryTitle>
              } />
            </CustomRoutes>
          </Admin>

目录数据设计上下两层分为两个组件

组件目录设计

小结

增删改查的设计直接利用react-admin即可实现页面得增删改查可以直接通过表名进行数据得增删改查设计

贴出增加修改代码

import * as React from 'react';
import { Create, ReferenceInput, SelectInput, SimpleForm, TextInput } from 'react-admin';
import { useNavigate } from "react-router-dom";
import { UserContext } from '../ProductList/CategoryLayout';
export const MaterialStyleListAdd = (props: any) => {
    const navigate = useNavigate()
    const StyleContext:any=React.useContext(UserContext)
    const onSuccess = (data: any) => {
        navigate(-1)
    };
    return (
        <Create mutationOptions={{ onSuccess }} 
        >
            <SimpleForm>
                <ReferenceInput source="style_id" reference="t_prod_style" >
                    <SelectInput disabled defaultValue={StyleContext.styleId}></SelectInput>
                </ReferenceInput>
                <ReferenceInput filter={{ mat_type: StyleContext.typeId }} source="mat_id" reference="t_base_materiel" >
                    <SelectInput></SelectInput>
                </ReferenceInput>
                <TextInput source="count" />
                <TextInput source="description" />
              
            </SimpleForm>
        </Create>
    )
}

import * as React from 'react';
import { Create, Edit, ReferenceInput, SelectInput, SimpleForm, TextInput } from 'react-admin';
import { useNavigate } from "react-router-dom";
import { UserContext } from '../ProductList/CategoryLayout';
export const MaterialStyleListEdit = (props: any) => {
    const navigate = useNavigate()
    const StyleContext:any=React.useContext(UserContext)
    const onSuccess = (data: any) => {
        navigate(-1)
    };
    return (
        <Edit mutationOptions={{ onSuccess }}
        >
            <SimpleForm>
                <ReferenceInput source="style_id" reference="t_prod_style" >
                    <SelectInput disabled></SelectInput>
                </ReferenceInput>
                <ReferenceInput source="mat_id"  filter={{ mat_type: StyleContext.typeId }} reference="t_base_materiel" >
                <SelectInput></SelectInput>
                </ReferenceInput>
                <TextInput source="count" />
                <TextInput source="description" />
            </SimpleForm>
        </Edit>
    )


}