Giter VIP home page Giter VIP logo

kongyijilafumi / react-ant-admin Goto Github PK

View Code? Open in Web Editor NEW
79.0 1.0 19.0 11.42 MB

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

Home Page: http://z3web.cn/react-ant-admin/

License: MIT License

JavaScript 92.16% HTML 1.80% Less 6.05%
react ant-design redux admin axios react-admin admin-web web

react-ant-admin's Introduction

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

二次开发视频讲解地址

文档地址

react-ant-admin 文档地址

更多建议欢迎*扰~ qq 交流群:564048130

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

特性

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

// 2.被捕获 暴露的route信息  优先级比上面高
export const route = {
  [MENU_TITLE] : "test页面",
  [MENU_KEY] : 11,
  [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_LAYOUT]:"FULLSCREEN" // 页面内容主题全屏显示 布局
    [MENU_ORDER]: 1,
  },
  {
    [MENU_TITLE]: "卡片列表",
    [MENU_PATH]: "/card",
    [MENU_KEY]: 10,
    [MENU_PARENTKEY]: 9, // 父菜单的唯一标识 
    [MENU_ICON]: null,
    [MENU_LAYOUT]:"TWO_COLUMN" // 拥有侧边栏的 布局 此属性默认可以不填 在 src/layout/index.js defualt 项导出一个默认布局
    [MENU_KEEPALIVE]: "false",
    [MENU_ORDER]: 5485,
  },
  // .... 开始添加菜单信息 ....
  {
    [MENU_TITLE]: "test", // 标题
    [MENU_PATH]: "/test", // 访问路径
    [MENU_KEY]: 11, // 菜单的唯一标识 
    [MENU_PARENTKEY]: null, // 空表示 为主菜单而非子菜单
    [MENU_ICON]: "icon_infopersonal", // 菜单图标
    [MENU_ORDER]: 1, // 菜单排序 越小越靠前 number
    [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 脚本栏目选择快速启动,免命令。 免命令示例图

项目截图

  • 登录

登录

  • 详情页

详情页

  • 列表

表格

  • 权限管理

权限管理

  • 结果页

结果页

react-ant-admin's People

Contributors

15051107253 avatar kongyijilafumi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

react-ant-admin's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.