An excellent front-end solution for enterprise applications built upon Ant Design and UmiJS

Last update: Aug 5, 2022

antd-admin

AntD Admin

An excellent front-end solution for enterprise applications.

antd umi GitHub issues MIT Travis (.org) PRs Welcome Gitter

English | 简体中文

Features

  • Internationalization, extracting translation fields from source code, loading language packs on demand
  • Dynamic permissions, different permissions for different menus
  • Elegant and beautiful, Ant Design system
  • Mock data, local data debugging

Usage

  1. Clone project code.
git clone https://github.com/zuiidea/antd-admin.git my-project
cd my-project
  1. Installation dependence.
yarn install

Or

npm install
  1. Start local server.
npm run start
  1. After the startup is complete, open a browser and visit http://localhost:7000, If you need to change the startup port, you can configure it in the .env file.

More instructions at documentation

Browsers support

Modern browsers.

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

Contributing

We very much welcome your contribution, you can build together with us in the following ways 😃

  • Use Ant Design Pro in your daily work.
  • Submit GitHub issuess to report bugs or ask questions.
  • Propose Pull Request to improve our code.

GitHub

https://github.com/zuiidea/antd-admin
Comments
  • 1. 项目部署

    因为项目中使用到了browserHistory,所以build之后需要部署到服务器上

    nginx配置示例:

    server
    	{
    		listen       666;
    		server_name 47.92.30.98;
    		root  /home/www/antd-admin/dist;
    
    		location /api {
    			 proxy_pass http://localhost:8000/api;
    		}
    
    		location / {
    				index  index.html;
    				try_files $uri $uri/ /index.html;
    		}
    	}
    

    演示地址:http://47.92.30.98:666

    Reviewed by zuiidea at 2017-05-09 10:02
  • 2. dist生成的文件不放在根目录的问题

    我根目录打算这样/manage/dist/... 我修改了index.html

    /manage/dist/index.css 修改了roadhogrc.js svgSpriteLoaderDirs: svgSpriteDirs, "publicPath": "/manage/dist/", 但是还是不行 不知道怎么修改了

    Reviewed by dangyanglim at 2017-05-09 12:21
  • 3. Refact/migrate to umi

    Close #769

    好处

    1. 大量配置和 package.json 依赖减少
    2. 无需手动注册 models
    3. 无需 router.js,以及手动处理 model 和 route component 按需加载等
    4. duck 模式的目录结构,更清晰写
    5. query-string 无需引入和使用
    6. PWA 等性能优化方案

    前后对比

    1. 启动时间,umi 启动并自动打开 dashboard 32s(开 dll 16s),关闭按需编译并自动打开 dashboard 41s(开 dll 21s),roadhog 版本启动 42s,开 dll 17s
    2. 构建时间,umi 105.90s,开 eslint 校验 108.49s, roadhog 96.21s
    3. 构建产物,js + css 部分,umi 6.32M, roadhog 6.67M
    4. 构建产物文件数,umi 25 个,多了几个动态加载的 model,roadhog 23 个

    其他调整

    1. 把一些 dependencies 和 devDependencies 调整了位置,devDependencies 是工具,dependencies 是运行时依赖,比如 less-vars-to-js,dva-model-extend、cross-env
    2. version 的发布机制换成 hash
    3. alias 配在 .babelrc,这样 test 也可以用
    4. /src/public -> /public,框架自动会 copy
    5. /src/mock -> /mock,/mock 才会自动 reload
    6. babel-polyfill -> @babel/polyfill
    7. 全局 layout 放 layouts/index.js,基于约定
    8. routers/error -> pages/404.js,基于约定
    9. polyfill 放在 global.js,基于约定
    10. test 随着文件走,比如 a.js,那么建个 a.test.js 做测试,而不要单独建一个 test 文件夹
    Reviewed by sorrycc at 2018-03-26 09:22
  • 4. 关于mock

    • mock的优点在于可以在后端未开发接口时,前端可以模拟数据接口进行开发。

    • roadhog为我们提供了一个完善的mock功能,在本项目中的接口均为mock的

    • 在开发过程中,后端部分接口已经开发完成,我们怎么使用别人的接口呢?如果需要同时请求多个同事的电脑或者多台服务器上的接口呢?我是这样做的,roadhog的配置中有接口代理的功能(.roadhogrc.js), 自己mock的接口加上前缀‘/api/v1’,A同事的接口加上前缀‘/api/v2’,C同事的接口加上前缀‘/api/v3’,利用roadhog分别匹配‘/api/v2’,‘/api/v3’并代理到A、B同事的电脑上。这样就可以不跨域的情况下愉快的开发啦。

    • 当发布到正式环境后,利用nginx或者其他工具,将‘/api/v1’,‘/api/v2’,‘/api/v3’分别代理到指定的端口或者服务器,也可以正常运行啦

    可参考 https://github.com/zuiidea/antd-admin/blob/master/src/utils/config.js https://github.com/zuiidea/antd-admin/blob/master/.roadhogrc.js

    Reviewed by zuiidea at 2017-06-13 12:51
  • 5. 打包后 国际化问题比较多 部分地方显示异常, 传参失败 甚至影响到了布局

    请酌情提供细节,并保持issue精简便于查阅

    1. 功能需求 => 详细说明 需要对国际化中变量传参
    2. Bug反馈
      没有传递成功, 2.1 简单描述下报错
      没有报错 2.2 你期望什么结果
      希望传参数成功 2.3 如何操作导致的
      目前不清楚啥原因 2.4 可提供运行环境信息
    3. 代码求助 => 可以提,未必及时答复

    image

    Reviewed by zmm2tysu at 2021-12-17 05:13
  • 6. npm run dev报错

    ⚠️ ⚠️ ⚠️ It's not recommended to use webpack.config.js, since roadhog's major or minor version upgrades may result in incompatibility. If you insist on doing so, please be careful of the compatibility after upgrading roadhog.

    Failed to compile.

    ./src/svg/cute/congratulations.svg Module build failed: TypeError: Cannot read property 'join' of undefined From previous event: at Promise ()

    Reviewed by miaozilong at 2017-08-06 11:36
  • 7. 最新版的代码在PropTypes 和RouterContext 处会抛错?

    直接clone 代码,安装完npm packages 后运行 npm run dev,控制台会抛以下warning,貌似是因为react 官方不再推荐这种用法?

    Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
    

    qq 20170419173513

    Warning: RouterContext: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
    

    qq 20170419173523

    Reviewed by IssaTan1990 at 2017-04-19 09:36
  • 8. 修改登陆后跳转页面

    其他都正常,去掉 menu的dashboard选项,其他相应的与dashboard相关的也去掉了,只是当我登录成功后或者链接http://0.0.0.0:8000/ 打开项目时,内容部分是not found,面包屑是user/NOT FOUND,只有当点击左侧列表项时才会显示所点击列表项的内容,现在就是想让项目在用户登录成功或者输入http://0.0.0.0:8000/ 时,直接默认跳至user页,跟以前dashboard一样,不知道在哪改,改什么,怎么改。。。希望能得到解答,谢谢🙏

    Reviewed by pickdebug at 2018-06-05 07:45
  • 9. Preview is broken

    Accessing from US.

    [Error] Failed to load resource: the server responded with a status of 502 (Bad Gateway) (dashboard, line 0)
    [Error] uncaught at _callee3 – "at _callee3 ↵ at _callee7 ↵ at takeEvery ↵ at _callee ↵ at _callee ↵ @↵@↵[email protected][email protected][email protected][email protected][email protected][email protected]↵end…"
    "at _callee3 
     at _callee7 
     at takeEvery 
     at _callee 
     at _callee 
     @
    @
    [email protected]
    [email protected]
    [email protected]
    [email protected]
    [email protected]
    [email protected]
    [email protected]
    [email protected]
    @
    [email protected]
    [email protected]
    [email protected][native code]"
    	utils_log (index.esm.js_+_26_modules:284)
    	logError (index.esm.js_+_26_modules:1164)
    	end (index.esm.js_+_26_modules:1303)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	end (index.esm.js_+_26_modules:1310)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	end (index.esm.js_+_26_modules:1310)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	end (index.esm.js_+_26_modules:1310)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	next (index.esm.js_+_26_modules:1282)
    	currCb (index.esm.js_+_26_modules:1342)
    	end (index.esm.js_+_26_modules:1310)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	next (index.esm.js_+_26_modules:1282)
    	currCb (index.esm.js_+_26_modules:1342)
    	end (index.esm.js_+_26_modules:1310)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	next (index.esm.js_+_26_modules:1282)
    	currCb (index.esm.js_+_26_modules:1342)
    	promiseReactionJob
    [Error] Failed to load resource: the server responded with a status of 502 (Bad Gateway) (user, line 0)
    [Error] uncaught at _callee3 – "at _callee3 ↵ at _callee7 ↵ at takeEvery ↵ at _callee ↵ at _callee ↵ @↵@↵[email protected][email protected][email protected][email protected][email protected][email protected]↵end…"
    "at _callee3 
     at _callee7 
     at takeEvery 
     at _callee 
     at _callee 
     @
    @
    [email protected]
    [email protected]
    [email protected]
    [email protected]
    [email protected]
    [email protected]
    [email protected]
    [email protected]
    @
    [email protected]
    [email protected]
    [email protected][native code]"
    	utils_log (index.esm.js_+_26_modules:284)
    	logError (index.esm.js_+_26_modules:1164)
    	end (index.esm.js_+_26_modules:1303)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	end (index.esm.js_+_26_modules:1310)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	end (index.esm.js_+_26_modules:1310)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	end (index.esm.js_+_26_modules:1310)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	next (index.esm.js_+_26_modules:1282)
    	currCb (index.esm.js_+_26_modules:1342)
    	end (index.esm.js_+_26_modules:1310)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	next (index.esm.js_+_26_modules:1282)
    	currCb (index.esm.js_+_26_modules:1342)
    	end (index.esm.js_+_26_modules:1310)
    	abort (index.esm.js_+_26_modules:1033)
    	(anonymous function) (index.esm.js_+_26_modules:1046)
    	next (index.esm.js_+_26_modules:1282)
    	currCb (index.esm.js_+_26_modules:1342)
    	promiseReactionJob
    [Error] Failed to load resource: the server responded with a status of 502 (Bad Gateway) (now.json, line 0)
    [Error] Failed to load resource: the server responded with a status of 403 () (antd.f6c0960b.chunk.css, line 0)
    
    Reviewed by lwhite1 at 2022-06-17 20:09
  • 10. Table Component Custimized Filter Search Not Working onPressEnter

    请酌情提供细节,并保持issue精简便于查阅

    1. 功能需求 => 详细说明
    2. Bug反馈
      2.1 简单描述下报错
      2.2 你期望什么结果
      2.3 如何操作导致的
      2.4 可提供运行环境信息
    3. 代码求助 => 可以提,未必及时答复 onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}table is not updating with the searched input on enter
    Reviewed by javierInspiren at 2022-06-06 19:08
  • 11. type '{ children: Element; tip: string; size: "large"; spinning: boolean; indicator: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes

    tsx使用spin标签报错 <Spin tip={"Loading..."} size={"large"} spinning={!userinfo?.address} indicator={antIcon} >

    type '{ children: Element; tip: string; size: "large"; spinning: boolean; indicator: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes

    Reviewed by lynancy at 2022-05-08 06:00
  • 12. 两个报错 `uncaught at _callee3 at _callee3 ` 和 `Warning: SubMenu should not leave undefined "key"`

    git仓库下来后,出现两个报错 uncaught at _callee3 at _callee3Warning: SubMenu should not leave undefined "key". 两个error均已解决, 第一个解决方法,将src/plugins/onError.js复制到src中,并修改文件名为app.js,报错原因为dvamodel错误未处理,我想知道正确的方法应该如何解决,如何将plugins/onError.js直接引入而非新增app.js。 第二个解决方法,为src/components/layout/Header.js中的两个<SubMenu />组件加上key属性。

    Reviewed by loading-99 at 2022-04-02 11:42
  • 13. model更新问题

    import React, { Component } from 'react' import { Page } from 'components' import './style.less' import { Button, Input, DatePicker, Select } from 'antd' import PropTypes from 'prop-types' import { connect } from 'umi' import ProjectTable from 'components_bus/project/list/table/index' import { history } from 'umi' import UpdateModal from 'components_bus/project/list/updateModal/index'

    @connect(({ admin_project_list, loading }) => ({ admin_project_list, loading })) class ProjectList extends Component { constructor(props) { super(props) this.dispatch = this.props.dispatch this.loading = this.props.loading }

    componentDidMount() { this.dispatch({ type: 'admin_project_list/getList', payload: this.props.admin_project_list.condition, }) }

    // 搜索数据 handleSearch = () => { this.dispatch({ type: 'admin_project_list/updateCondition', payload: { page: 1, num: 10 }, }) }

    // 更新输入框的关键字的值 handleChange = ({ target: { value } }) => { this.dispatch({ type: 'admin_project_list/setCondition', payload: { keyword: value }, }) }

    // 重置 handleReset = () => { this.dispatch({ type: 'admin_project_list/updateCondition', payload: { page: 1, num: 10, order: 'created_at', desc: true, started_at: null, user_id: null, ended_at: null, keyword: null, }, }) }

    // 更改时间 handleChangeTime = (data) => { this.dispatch({ type: 'admin_project_list/updateCondition', payload: data }) }

    // 跳转详情页 handleGetDetails = (data) => { const id = data.id history.push({ pathname: '/project/details', query: { id } }) }

    // 获取更新数据 handleUpdateData = (item) => { const data = { ...item } if (data.ended_at) { data.ended_at = data.ended_at.slice(0, 10) } if (data.started_at) { data.started_at = data.started_at.slice(0, 10) } this.dispatch({ type: 'admin_project_list/setShowUpdateModal', payload: { value: true }, }) this.dispatch({ type: 'admin_project_list/setUpdateData', payload: { data }, }) }

    // 分页 handleChangePagination = (pagination, filters, sorter) => { const { current, pageSize } = pagination const { columnKey, order } = sorter const tempDict = { page: current, num: pageSize, order: columnKey } if (columnKey && order) { tempDict['order'] = columnKey tempDict['desc'] = order === 'descend' } this.dispatch({ type: 'admin_project_list/updateCondition', payload: tempDict, }) }

    // 关闭修改弹窗 handleCancelUpdate = () => { this.dispatch({ type: 'admin_project_list/setShowUpdateModal', payload: { value: false }, }) }

    // 提交更新 handleFinish = (data) => { this.dispatch({ type: 'admin_project_list/updateData', payload: data }) }

    // 获取全部用户 getAllUser = (user) => { this.dispatch({ type: 'admin_project_list/getAllUser', payload: { user } }) }

    // 更改时间 updateTime = (time, dateStrings) => { this.dispatch({ type: 'admin_project_list/updateDataTime', payload: { started_at: dateStrings[0], ended_at: dateStrings[1] }, }) }

    //远程搜索创建用户 handleCreateUserSearch = (value) => { this.dispatch({ type: 'admin_project_list/getAllUser', payload: { user: value }, }) }

    //根据用户id搜索用户 handleUserChange = (value) => { this.dispatch({ type: 'admin_project_list/updateCondition', payload: { user_id: value }, }) }

    get data() { return this.props.admin_project_list }

    render() { return (

    项目名称: <Input placeholder="请输入关键字进行搜索" className="search_input" value={this.data.condition.keyword} onChange={this.handleChange} onPressEnter={this.handleSearch} />
    <span style={{ marginLeft: '32px', marginRight: '8px' }}> 创建人: <Select allowClear style={{ width: '256px' }} showSearch value={this.data.condition.user_id} placeholder="请输入创建人" defaultActiveFirstOption={false} showArrow={false} filterOption={false} onSearch={this.handleCreateUserSearch} onChange={this.handleUserChange} notFoundContent={null} > {this.data.all_user.map((d) => { return ( <Select.Option key={d.id} value={d.id}> {d['real_name']} </Select.Option> ) })}
    开始时间: <DatePicker placeholder="请选择开始时间" onChange={(date, dateString) => { this.handleChangeTime({ started_at: dateString, page: 1, }) }} />
    结束时间: <DatePicker placeholder="请选择结束时间" onChange={(date, dateString) => { this.handleChangeTime({ ended_at: dateString, page: 1 }) }} />
    <Button type="primary" style={{ marginRight: '16px' }} onClick={this.handleSearch} > 查询 <Button onClick={this.handleReset}>重置
    <ProjectTable {...this.data} handleChangePagination={this.handleChangePagination} handleGetDetails={this.handleGetDetails} handleUpdateData={this.handleUpdateData} />
    <UpdateModal visible={this.data.show_update_modal} updateTime={this.updateTime} all_user={this.data.all_user} data={this.data.update_data} getAllUser={this.getAllUser} handleCancel={this.handleCancelUpdate} handleFinish={this.handleFinish} />
    ) } }

    ProjectList.propTypes = { admin_project_list: PropTypes.object, location: PropTypes.object, dispatch: PropTypes.func, loading: PropTypes.object, }

    export default ProjectList

    当我从此页面离开时,页数为2,当我从其它页面重新进入此页面时,页数还是2,证明model在页面销毁时,没有被重置,请问model更新时机以及更新机制是什么样的

    Reviewed by lhc0229 at 2022-01-17 03:25
This Project Is Deprecated. Use [Ant Design Pro](https://pro.ant.design/) instead.
This Project Is Deprecated. Use [Ant Design Pro](https://pro.ant.design/) instead.

This Project Is Deprecated. Use Ant Design Pro instead. Ant Design Pro is a production-ready solution for admin interfaces. Built on the design princi

Jul 11, 2022
Example repository for integrating Ant Design with ReactPWA project. This repo demonstrates the usage & integration of Ant Design in existing ReactPWA project.

ReactPWA - PawJS & Ant Design Example repository for integrating Ant Design with ReactPWA project. This repo demonstrates the usage & integration of A

Jul 11, 2022
react redux for CMS/Enterprise class App/ERP/Admin with ant-design
react redux for CMS/Enterprise class App/ERP/Admin with ant-design

Feature List hot reloading/browser-sync/redux devtools on dev build minify/chunkhash/trackJS on production build eslint both of terminal and pre-commi

Aug 4, 2022
An out-of-box UI solution for enterprise applications as a React boilerplate.
An out-of-box UI solution for enterprise applications as a React boilerplate.

An out-of-box UI solution for enterprise applications as a React boilerplate.

Jul 4, 2022
An out-of-box UI solution for enterprise applications as a React boilerplate.
An out-of-box UI solution for enterprise applications as a React boilerplate.

An out-of-box UI solution for enterprise applications as a React boilerplate.

Aug 6, 2022
A boilerplate of SPA, built with React.js, Webpack, ES6+, Redux, Router, Babel, Express, Ant Design...

Getting start Clone this repo: $ git clone https://github.com/jovey-zheng/react-start-kit.git Install dependenices: $ npm i Start the project: $ npm

Mar 1, 2022
A React + Redux + Ant-Design frontend boilerplate

react-redux-antd-starter A React + Redux + Ant-Design frontend boilerplate. React Redux Ant-Design React Router React Router Redux Redux Actions Babel

Oct 1, 2021
demo with react,ant-design,redux,react-router,webpack,babel
demo with react,ant-design,redux,react-router,webpack,babel

star-initReact-example A demo with star-initReact-example ##效果截图 首页 列表页 弹框 表格组件 echart 使用技术和实现功能 webpack + React +React-router + React-redux +ES6 + an

Apr 15, 2022
React Redux Isomorphic Webpack 2 Boilerplate based on ant.design

React Redux Isomorphic Webpack 2 Boilerplate based on ant.design About This boilerplate has following feature: Universal React rendering Webpack 2 for

Mar 29, 2022
Create-React-App + TypeScript + Ant-Design (without Eject)
Create-React-App + TypeScript + Ant-Design (without Eject)

This project was bootstrapped with Create React App. Below you will find some information on how to perform common tasks. You can find the most recent

May 7, 2022
Starter Antd 4.0 Admin App Mern( Node.js / React / Redux / Ant Design ) Crud & Auth , Dashboard
Starter Antd 4.0 Admin App  Mern( Node.js / React / Redux / Ant Design ) Crud & Auth , Dashboard

Starter Antd Admin (Crud & auth) Mern App (Express.js / React / Redux / MongoDB) App built for DigitalOcean MongoDB Hackathon CRM Starter Mern Antd Ad

Aug 3, 2022
Create React App boilerplate template with React, Redux Toolkit, React Router, Ant Design, Axios, Redux-Saga, SASS, Authentication, Routes.

Create React App boilerplate template with React, Redux Toolkit, React Router, Ant Design, Axios, Redux-Saga, SASS, Authentication, Routes. No configuration is required, Start building your App.

Jul 9, 2022
🥳 Really simple React + Ant Design + Tailwind CSS + Typescript + Vite + Mobx boilerplate.

?? Really simple React + Ant Design + Tailwind CSS + Typescript + Vite + Mobx boilerplate.

Jul 25, 2022
May 29, 2022
This the front-end part of the billionaires app built with reactJS.
This the front-end part of the billionaires app built with reactJS.

Appointments App (Front-end) This is the React front-end repository for an appointments web-app. We use React for the front-end, and Ruby on Rails for

Jun 20, 2022
CRUD App using MERN Stack, it uses ReactJS for Front-end, NodeJS, Express For the Backend and Mongo DB as database!
CRUD App using MERN Stack, it uses ReactJS for Front-end, NodeJS, Express For the Backend and Mongo DB as database!

Book Collection List ?? Demonstration of the application | Features | Technologies used | Application installation ?? Demonstration of the application

Jul 7, 2022
A front end project using react js, html and CSS to fetch data from the pokemon API.

A front end project using react js, html and CSS to fetch data from the pokemon API. The web application searches for Pokemon characters and displays their stats and images.

Nov 1, 2021
An example to show a full end-to-end app using express and redux.

Sample Express-Redux Application Purpose This is a sample project to help you bootstrap an entire web application from end to end! When trying to buil

Jul 13, 2022
NG-ZORRO admin panel front-end framework (surge mirror https://ng-alain-doc.surge.sh)
NG-ZORRO admin panel front-end framework (surge mirror https://ng-alain-doc.surge.sh)

NG-ALAIN Out-of-box UI solution for enterprise applications, Let developers focus on business. English | 简体中文 Quickstart Getting Started Links Documen

Aug 7, 2022