17 Star 487 Fork 162

孔乙己拉夫米 / react-ant-admin

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

react-ant-admin

GitHub star GitHub fork Gitee star Gitee fork

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

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

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

node版本推荐

D:>node
# 14.*

预览地址

react-ant-admin

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

二次开发视频讲解地址

文档地址

react-ant-admin 文档地址

更多建议欢迎骚扰~

qq 交流群:564048130

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

接口文档地址

特性

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

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

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

快速使用

  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. 切换 vite 分支
D:\react-ant-admin>git checkout vite
  1. 安装依赖
# npm 慢
npm i
# cnpm 国内镜像 快
cnpm i
  1. 启动
npm run dev # 默认走代理请求线上接口 https://z3web.cn

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

切换 webpack 版本

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

创建一个新的页面

  1. 在 src/pages 文件夹下创建一个 test.tsx 文件,代码如下
// 函数组件
export default function Test() {
  return <div>test页面</div>;
}

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

// 1.被捕获 export default 原型上的route
Test.route={
  [MENU_TITLE] : "test页面",
  [MENU_KEY] : "test",
  [MENU_PATH]: "/test",
  [MENU_LAYOUT]:"FULLSCREEN" // 该页面全屏显示 默认可以不填
}

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

脚本启动

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

  • npm run dev

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

  • npm run "dev:mock"

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

  • npm run build

普通打包模式。

  • npm run preview

打包后的产物,开启本地预览。

项目截图

  • 登录

登录

  • 详情页

详情页

  • 列表

表格

  • 权限管理

权限管理

  • 结果页

结果页

MIT License Copyright (c) 2022 孔乙己拉夫米 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

react-admin适用于快速搭建中后台页面,管理系统架构。react全家桶。admin管理系统 展开 收起
取消

发行版 (7)

全部

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/kong_yiji_and_lavmi/react-ant-admin.git
git@gitee.com:kong_yiji_and_lavmi/react-ant-admin.git
kong_yiji_and_lavmi
react-ant-admin
react-ant-admin
vite

搜索帮助