All Projects → kongyijilafumi → react-ant-admin

kongyijilafumi / react-ant-admin

Licence: MIT license
此框架使用与二次开发,前端框架使用react,UI框架使用ant-design,全局数据状态管理使用redux,ajax使用库为axios。用于快速搭建中后台页面。

Programming Languages

javascript
184084 projects - #8 most used programming language
Less
1899 projects
HTML
75241 projects

Projects that are alternatives of or similar to react-ant-admin

Awesome Uikit
Collect JS Frameworks, Web components library and Admin Template.
Stars: ✭ 1,136 (+2084.62%)
Mutual labels:  ant-design, react-admin
vue-iview-admin-template
Vue 2.0 admin template based on View UI
Stars: ✭ 43 (-17.31%)
Mutual labels:  axios, ant-design
Ant Back
🚀 react后台,后台管理系统
Stars: ✭ 90 (+73.08%)
Mutual labels:  ant-design, react-admin
vue-admin-better
🚀🚀🚀vue admin,vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus,vue admin plus,vue admin pro
Stars: ✭ 12,962 (+24826.92%)
Mutual labels:  axios, ant-design
Placeline Nextjs
HyperTrack Placeline web application sample using NextJS, Ant-Design, Styled-Components, and Heroku
Stars: ✭ 88 (+69.23%)
Mutual labels:  axios, ant-design
React Admin
✨ react-admin system solution : react 后台管理系统解决方案
Stars: ✭ 5,975 (+11390.38%)
Mutual labels:  ant-design, react-admin
admin-antd-vue
Vue3.x + Ant Design Admin template (vite/webpack)
Stars: ✭ 111 (+113.46%)
Mutual labels:  axios, ant-design
React Admin
基于 Ant Design React 的管理系统架构
Stars: ✭ 376 (+623.08%)
Mutual labels:  ant-design, react-admin
Vue Admin Beautiful
🚀🚀🚀vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
Stars: ✭ 10,968 (+20992.31%)
Mutual labels:  axios, ant-design
3yadmin
基于react全家桶+antd构建的专注通用权限控制与表单的后台管理系统模板
Stars: ✭ 381 (+632.69%)
Mutual labels:  axios, react-admin
react-admin-nest
React和Ant Design和 Nest.js 和 Mysql 构建的后台通用管理系统。持续更新。
Stars: ✭ 123 (+136.54%)
Mutual labels:  axios, react-admin
Vue Admin
基于and-design-vue的vue后台管理系统模板
Stars: ✭ 226 (+334.62%)
Mutual labels:  axios, ant-design
React Ant Admin
使用 ant-design react react-hook ts 开发的类 ant-design-pro 管理后台,具有完整的权限系统和配套的node + ts 的 api
Stars: ✭ 199 (+282.69%)
Mutual labels:  axios, ant-design
electron-admin-antd-vue
Electron Vue3.x Ant Design Admin template
Stars: ✭ 21 (-59.62%)
Mutual labels:  axios, ant-design
best-of-react
🏆 A ranked list of awesome React open-source libraries and tools. Updated weekly.
Stars: ✭ 364 (+600%)
Mutual labels:  ant-design
shop-native
基于weex(vuejs),同时使用了vuex, vue-router, axios,包含异步(async)语法糖在安卓端不兼容的解决方案
Stars: ✭ 15 (-71.15%)
Mutual labels:  axios
react-admin
基于React + ant-design的用作后台管理项目的脚手架
Stars: ✭ 96 (+84.62%)
Mutual labels:  ant-design
todo-list
A simple todo list application with React and mobx and antd
Stars: ✭ 25 (-51.92%)
Mutual labels:  ant-design
project-3-crm
⭐crm 客户关系管理系统模板⭐一个不错的后台管理种子项目,拥有自由设置角色自由分配权限🔑的权限管理功能,三员管理多员管理均可,前端antd vue admin后端spring-boot-api-seedling 拥有完善的功能。文档包含需求文档,设计文档和测试文档等。同时配置了travis,拥有集成测试和自动构建的功能。
Stars: ✭ 128 (+146.15%)
Mutual labels:  axios
tiny-qiniu-request
tiny-qiniu for rc-upload or antd upload component `customRequest` property
Stars: ✭ 13 (-75%)
Mutual labels:  ant-design

react-ant-admin

GitHub star GitHub fork Gitee star Gitee fork

TypeScript 版GitHub(国外地址) | TypeScript 版码云(国内镜像)

JavaScript 版GitHub(国外地址) | JavaScript 版码云(国内镜像)

此框架使用与二次开发,前端框架使用 react,UI 框架使用 ant-design,全局数据状态管理使用 redux,ajax 使用库为 axios。用于快速搭建中后台页面。欢迎各位提issue

预览地址

react-ant-admin

nodejs 后台 web 服务:react-ant-admin-server

关于此框架二次开发

视频讲解地址下载(百度云),提取码e7n1

视频讲解地址下载(阿里云)

文档地址

react-ant-admin 文档地址

更多建议欢迎骚扰~

qq 交流群:532948540

qrcode

欢迎各位提出建议与问题!

接口文档地址

特性

  • 菜单配置:扁平化数据组织,方便编写,存库,页面菜单,标题,侧边栏,顶部导航栏同步
  • 页面懒加载:使用@loadable/component来解决首次打开页面过慢的问题.
  • Ajax 请求:restful 规范,自动错误提示,提示可配置;自动打断未完成的请求;
  • 权限控制: 根据不用角色的功能类型显示菜单,路由页面拦截.
  • 自定义主题,可以自己定义界面颜色。
  • 代理转发,解决前端请求跨域问题。
  • 路由自动生成,去中心化。

系统提供了一些基础的页面

  • 登录页
  • 详情页
  • 表单页
  • 列表页
  • 权限管理
  • 结果页

切换 Vite 版本

  1. 切换分支
D:\react-ant-admin>git checkout vite
  1. 安装依赖
D:\react-ant-admin>cnpm i
  1. 启动
D:\react-ant-admin>npm run dev

快速使用

  1. 下载本项目到本地
D:> git clone https://github.com/kongyijilafumi/react-ant-admin.git #github地址 慢
D:> git clone https://gitee.com/kong_yiji_and_lavmi/react-ant-admin.git #码云地址 快
  1. 安装依赖
# npm 慢
npm i
# cnpm 国内镜像 快
cnpm i
  1. 启动
npm run "start:mock" # 启动本地mock数据 (暂时没有后台接口,请用此模式预览项目)
npm run start # 启动本地API接口来获取数据

浏览器打开 http://localhost:3000 即可

创建一个新的页面

  1. 在 src/pages 文件夹下创建一个 test.js 文件,代码如下
// 函数组件
import React from "react";

export default function Test() {
  return <div>test页面</div>;
}

// 类组件
export default class Test extends React.Component {
  render() {
    return <div>test页面</div>;
  }
}

/**
 * MENU_* 开头信息在package.json 文件中找到
 * 给 pages 组件追加路由信息
 * export default 组件的原型上添加route信息,或者向外暴露一个 route
 * 会被webpack的webpack-router-generator插件捕获信息
 */

// 1.被捕获 export default 原型上的route
Test.route={
  [MENU_TITLE] : "test页面",
  [MENU_KEY] : "test",
  [MENU_PATH]: "/test"
}

// 2.被捕获 暴露的route信息  优先级比上面高
export const route = {
  [MENU_TITLE] : "test页面",
  [MENU_KEY] : "test",
  [MENU_PATH]: "/test"
}
  1. 浏览器访问 http://localhost:3000/react-ant-admin/test 即可

创建一个菜单

该添加方式适用于 npm run "start:mock"启动的项目

  1. src/mock/index.js 找到menu变量,往里添加一条菜单信息.代码如下所示
let menu = [
  {
    menu_id: 9,
    [MENU_TITLE]: "列表页",
    [MENU_PATH]: "/list",
    [MENU_KEY]: "list",
    [MENU_PARENTKEY]: "",
    [MENU_ICON]: "icon_list",
    [MENU_KEEPALIVE]: "false",
    [MENU_LAYOUT]:"FULLSCREEN" // 页面内容主题全屏显示 布局
    order: 1,
  },
  {
    menu_id: 10,
    [MENU_TITLE]: "卡片列表",
    [MENU_PATH]: "/card",
    [MENU_KEY]: "listCard",
    [MENU_PARENTKEY]: "list",
    [MENU_ICON]: "",
    [MENU_LAYOUT]:"TWO_COLUMN" // 拥有侧边栏的 布局 此属性默认可以不填 在 src/layout/index.js defualt 项导出一个默认布局
    [MENU_KEEPALIVE]: "false",
    order: 5485,
  },
  // .... 开始添加菜单信息 ....
  {
    menu_id: 11, // 菜单id 用于关联权限
    [MENU_TITLE]: "test", // 标题
    [MENU_PATH]: "/test", // 访问路径
    [MENU_KEY]: "test", // 唯一key
    [MENU_PARENTKEY]: "", // 空表示 为主菜单而非子菜单
    [MENU_ICON]: "icon_infopersonal", // 菜单图标
    order: 1, // 菜单排序 越小越靠前
    [MENU_KEEPALIVE]: "true", //  页面保持状态
  },
  // .....
];
  1. 由于菜单会走本地会话存储window.sessionStorage,所以保存代码后需要关闭当前窗口,重新打开地址 http://localhost:3000/react-ant-admin

打开之后,会发现菜单会多出一个test栏目,点击会打开之前我们创建的 test 页面.这样就完成了菜单和页面的编写.

脚本启动

在完成依赖安装之后,有以下几种启动方式。

  • npm run start

请求接口数据,通过后台返回数据显示项目信息

  • npm run "start:color"

请求接口数据,通过后台返回数据显示项目信息,并且开启主题色配置。

  • npm run "start:mock"

本地模拟数据,假数据来显示项目信息

  • npm run "start:mock_color"

本地模拟数据,假数据来显示项目信息,并且开启主题色配置。

  • npm run build

普通打包模式。

  • npm run "build:color"

打包主题色。项目体积会有所增加。

vscode 快速启动项目

使用vscode 编辑器下载地址

把此项目文件夹拖入vscode编辑器,找到左下角npm 脚本栏目选择快速启动,免命令。 免命令示例图

项目截图

  • 登录

登录

  • 详情页

详情页

  • 列表

表格

  • 权限管理

权限管理

  • 结果页

结果页

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].