Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@epig/create-admin-app

Package Overview
Dependencies
Maintainers
3
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@epig/create-admin-app

create a admin app

  • 1.0.2
  • latest
  • npm
  • Socket score

Version published
Maintainers
3
Created
Source

管理后台脚手架

使用说明

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配置

管理后台项目开发说明

主要开发集中在 containersmodels 里面,通常一个页面由一个容器和一个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;

辅助工具

FAQs

Package last updated on 08 Mar 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc