管理后台脚手架

使用说明

npx epig-create-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（存放全局的model）
│   │   ├── index.tsx
│   │   └── package.json
│   └── util  工具库
│       └── package.json
├── .epigrc.js  @epig/af-build-dev配置
├── .webpackrc.js  webpack配置
├── tsconfig.json  typescript配置
└── tslint.json  tslint配置

管理后台项目开发说明

主要开发集中在 containers 和 models 里面，通常一个页面由一个容器和一个model组成。model 采用自动注册的方式注入到容器，查看使用说明。

渲染层（containers）

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

路由：

/system/users

容器目录：

└── containers
    └── System
        └── Users
            ├── EditUser /system/user的子页面
            │   ├── index.tsx
            │   └── models.ts
            ├── index.tsx
            └── model.ts

/System/Users/index.tsx 示例：

import * as React from 'react';
import BasicComponent from '@epig/admin-tools/lib/components/BasicComponent';
import model, { UserState } from 'models/system/users';

export interface UserProps {
  users: UserState;
  usersActions: typeof model.actions;
}

class User extends BasicComponent<UserProps, any> {
  render() {
    return (
      <div>
        User
      </div>
    );
  }
}

数据层（models）

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

npx epig-admin-tools model /system/users/model -- --modelName users

users model 示例：

import { createModel } from '@epig/admin-tools-lib/model';

export interface UsersState {
  loading: boolean;
}

const model = createModel({
  modelName: 'users',
  action: {
    simple: {},
    api: {
      users: {
        path: '/system/users',
      },
    },
  },
  reducer: ({ apiActionNames, createReducer }) => {
    return createReducer<UsersState, any>({
      [apiActionNames.users.request](state, action) {
        return {
          ...state,
          loading: true,
        };
      },
      [apiActionNames.users.success](state, action) {
        return {
          ...state,
          loading: false,
        };
      },
      [apiActionNames.users.error](state, action) {
        return {
          ...state,
          loading: false,
        };
      },
    }, {
      loading: false,
    });
  },
  sagas: () => {
    return [];
  },
});

export default model;

辅助工具

• 代码块 vscode-react-typescript
• 代码块 vscode-admin
• model创建工具 @epig/admin-tools