Tushan首頁、文檔和下載- 後台管理應用前端框架- 程式开发

Tushan 是一個自由度極高的,基於React的,開箱即用的後台管理應用前端框架。

作為開發者, 你可以像是調用庫一樣快速創建一個可用的後台管理框架

一個簡單的Tushan 應用大概會長成以下樣子:


import {
  createTextField,
  createEmailField,
  createUrlField,
  jsonServerProvider,
  ListTable,
  Resource,
  Tushan,
} from 'tushan';

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

function App() {
  return (
    <Tushan
      basename="/admin"
      dataProvider={dataProvider}
    >
      <Resource
        name="users"
        label="User"
        list={
          <ListTable
            fields={[
              createTextField('id', {
                label: 'ID',
              }),
              createTextField('name', {
                label: 'Name',
                list: {
                  sort: true,
                },
              }),
              createEmailField('email', {
                label: 'Email',
              }),
              createUrlField('website', {
                label: 'Website',
              }),
            ]}
            action={{ create: true, detail: true, edit: true, delete: true }}
          />
        }
      />
    </Tushan>
  );
}

export default App;

我們可以通過指定字段的類型來決定數據表格的表現形式,並且內置實現了常規的增刪改查等操作。幫助開發者快速產出一個後端應用的MVP。

預覽效果如下:

Tushan 的api 設計受到 react-admin 很大的啟發,兩者的接口協議是完全兼容的,這意味著react-admin現成的後端接口生態方案可以完全無縫被Tushan 使用。如果對material-ui 設計的後台方案感興趣的話可以選擇react-admin 作為替代

另外,Tushan 還包括一些常用的前端依賴項,如 styled-components arco-design 等,可以幫助您更快地搭建前端界面。

在CodeSandbox 中快速示例

訪問 CodeSandbox 快速獲得無後台版本的示例程序。

UI框架

Tushan 的UI組件庫是基於字節跳動的 arco-design。你可以在這裡訪問arco-design的官方文檔

所有的組件都已經被導出且可以通過tushan直接引入

#Tushan首頁文檔和下載 #後台管理應用前端框架 #程式开发

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *