1 Star 7 Fork 3

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

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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

关于此框架二次开发

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

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

文档地址

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>;
  }
}

/**
 * 给 pages 组件追加路由信息 
 * export default 组件的原型上添加route信息,或者向外暴露一个 route 
 * 会被webpack的webpack-router-generator插件捕获信息
 */

// 1.被捕获 export default 原型上的route
Test.route={
  tile : "test页面",
  key : "test",
  path: "/test"
}

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

创建一个菜单

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

  1. src/mock/index.js 找到menu变量,往里添加一条菜单信息.代码如下所示
import dayjs from "dayjs";
let menu = [
   {
    menu_id: 2,
    title: "详情页",
    path: "/details",
    key: "details",
    parentKey: "",
    icon: "icon_edit",
    order: 1,
    keepAlive: "true",
  },
  {
    menu_id: 1,
    title: "个人中心",
    path: "/person",
    key: "detailsPerson",
    parentKey: "details",
    icon: "icon_infopersonal",
    order: 1,
    keepAlive: "true",
  },
  // .... 开始添加菜单信息 ....
  {
    menu_id: 9, // 菜单id 用于关联权限
    title: "test", // 标题
    path: "/test",// 访问路径
    key: "test", // 唯一key
    parentKey: "",// 空表示 为主菜单而非子菜单
    icon: "icon_infopersonal",// 菜单图标
    order:1,// 菜单排序 越小越靠前
    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 脚本栏目选择快速启动,免命令。 免命令示例图

项目截图

  • 登录

登录

  • 详情页

详情页

  • 列表

表格

  • 权限管理

权限管理

  • 结果页

结果页

Repository Comments ( 0 )

Sign in to post a comment

About

使用TypeScript开发的admin管理系统。采用前后端分离,使用react,and-design,axios,redux等技术手段实现。 expand collapse
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
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

Search

182229 41614e54 1850385 182230 7885ed45 1850385