7 Star 69 Fork 29

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

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

react-ant-admin(TypeScript 版)

GitHub start GitHub fork star fork

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

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

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

预览地址

react-ant-admin

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

二次开发视频讲解地址

文档地址

react-ant-admin 文档地址

接口文档地址

更多建议欢迎骚扰~

qq 交流群:532948540

qrcode

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

特性

  • 菜单配置:扁平化数据组织,方便编写,存库,页面菜单,标题,侧边栏,顶部导航栏同步
  • 页面懒加载:使用@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. 安装依赖
# 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] :  22,
  [MENU_PATH]: "/test"
}

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

创建一个菜单

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

  1. src/mock/index.js 找到menu变量,往里添加一条菜单信息.代码如下所示
let menu = [
  {
    [MENU_TITLE]: "列表页",
    [MENU_PATH]: "/list",
    [MENU_KEY]: 9,
    [MENU_PARENTKEY]: null,
    [MENU_ICON]: "icon_list",
    [MENU_KEEPALIVE]: "false",
    [MENU_ORDER]: 1,
  },
  {
    menu_id: 10,
    [MENU_TITLE]: "卡片列表",
    [MENU_PATH]: "/card",
    [MENU_KEY]: 10,
    [MENU_PARENTKEY]: 9,
    [MENU_ICON]: null,
    [MENU_KEEPALIVE]: "false",
    [MENU_ORDER]: 5485,
  },
  // .... 开始添加菜单信息 ....
  {
    [MENU_TITLE]: "test", // 标题
    [MENU_PATH]: "/test", // 访问路径
    [MENU_KEY]: 22, // 唯一标识
    [MENU_PARENTKEY]: null, // 父级菜单唯一表示 空表示 为主菜单而非子菜单 
    [MENU_ICON]: "icon_infopersonal", // 菜单图标
    [MENU_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 脚本栏目选择快速启动,免命令。 免命令示例图

项目截图

  • 登录

登录

  • 详情页

详情页

  • 列表

表格

  • 权限管理

权限管理

  • 结果页

结果页

MIT License Copyright (c) 2021 azhen 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.

简介

使用TypeScript开发的admin管理系统。采用前后端分离,使用react,and-design,axios,redux等技术实现。 展开 收起
TypeScript 等 4 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

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

搜索帮助