create-dfxk-admin-app

管理后台脚手架

使用说明

npx create-dfxk-admin-app my-app
cd my-app
npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:8000 to see your app. When you’re ready to deploy to production, create a minified bundle with npm run build.

管理后台项目结构说明

├── Dockerfile  docker镜像构建文件
├── README.md
├── docker-compose.yml  docker-compose配置示例
├── pm2.json  生产环境pm2配置
├── proxy.config.js  开发环境api代理配置
├── public
│   └── index.html
├── server  生成环境前端代理服务
│   ├── package.json
│   └── server.js
├── src  源代码
│   ├── app.less  公共样式
│   ├── components  组件库
│   ├── containers  容器（渲染层）
│   │   └── package.json
│   ├── custom.d.ts  自定义typescript定义文件
│   ├── entry.config.ts  入口配置
│   ├── models  model（数据层）
│   │   ├── index.tsx  在这里加载非异步的model
│   │   └── package.json
│   └── util  工具库
│       └── package.json
├── .adminrc.js  dfxk-admin-build-dev配置
├── .webpackrc.js  webpack配置
├── .gitlab-ci.yml  gitlab ci配置
├── tsconfig.json  typescript配置
└── tslint.json  tslint配置

管理后台项目开发说明

主要开发集中在 containers 和 models 里面，通常一个页面由一个容器和一个model组成。

渲染层（containers）

containers 下的文件结构要跟路由一致

路由：

/system/user

容器目录：

├── containers
│   └── System
│       └── User
│           ├── EditUser  /system/user的子页面
│           │   └── index.tsx
└──         └── index.tsx

/System/User/index.tsx 示例：

import * as React from 'react';
import BasicComponent from 'dfxk-admin-tools/lib/components/BasicComponent';
import { injectNormal } from 'dfxk-admin-tools/lib/util/inject';
import model, { UserState } from 'models/system/user';

export interface UserProps {
  data: UserState;
  dataActions: typeof model.actions;
  dataApiActions: typeof model.apiActions;
}

class User extends BasicComponent<UserProps, any> {
  render() {
    return (
      <div>
        User
      </div>
    );
  }
}
export default injectNormal(User, {
  data: require('models/system/user'),
});

数据层（models）

model 是action、saga和reducer的集合，使用 tt-admin-tools 提供的工具快速创建。

npx tt-admin-tools model /system/user

user model 示例：

import model{ ApiConfig } from '@dfxk/luna/model';

export let keys = {
  changeName: 'changeName',
};

export let apis = {
  getName: 'getName',
};

export let apiConfigs: ApiConfig[] = [{
  path: '/getName',
  actionName: apis.getName,
}];

export interface UserState {
  loading: boolean;
}

const userModel = model<typeof keys, typeof apis>({
  modelName: 'user',
  actionKeys: keys,
  api: {
    basePath: '/api',
    config: apiConfigs,
  },
  reducer: ({ apiActionNames, createReducer }) => {
    return createReducer<UserState, any>({
      [apiActionNames.getName.request](state, action) {
        return {
          ...state,
          loading: true,
        };
      },
      [apiActionNames.getName.success](state, action) {
        return {
          ...state,
          loading: false,
        };
      },
      [apiActionNames.getName.error](state, action) {
        return {
          ...state,
          loading: false,
        };
      },
    }, {
      loading: false,
    });
  },
  sagas: (m) => {
    return [];
  },
});

export default userModel;

辅助工具

• 代码块 vscode-react-typescript
• 代码块 vscode-admin
• model创建工具 tt-admin-tools