我最近做了一个react的后台管理系统,用于快速创建后台项目模板
react-ant-admin
此框架使用与二次开发,前端框架使用react,UI框架使用ant-design,全局数据状态管理使用redux,ajax使用库为axios。用于快速搭建中后台页面。欢迎各位提issue
预览地址
特性
- 菜单配置:扁平化数据组织,方便编写,存库,页面菜单,标题,侧边栏,顶部导航栏同步
- 页面懒加载:使用@loadable/component来解决首次打开页面过慢的问题.
- Ajax请求:restful规范,自动错误提示,提示可配置;自动打断未完成的请求;
- 权限控制: 根据不用角色的功能类型显示菜单,路由页面拦截.
系统提供了一些基础的页面
- 登录页
- 详情页
- 表单页
- 列表页
- 权限管理
- 结果页
快速使用
- 下载本项目到本地
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 //码云地址 快
- 安装依赖
// npm 慢
npm i
// cnpm 国内镜像 快
cnpm i
- 启动
npm run "start mock" // 启动本地mock数据 (暂时没有后台接口,请用此模式预览项目)
npm run start // 启动本地API接口来获取数据
浏览器打开 http://localhost:3000 即可
创建一个新的页面
- 在src/pages文件夹下创建一个test.js文件,代码如下
// 函数组件
import React from "react";
export default function Test() {
return <div>test页面</div>;
}
// 类组件
import React from "react";
export default class Test extends React.Component {
render() {
return <div>test页面</div>;
}
}
- 在``src/router/route/index.js`文件里追加路由信息.代码如下
import loadable from "@loadable/component";
import { Redirect } from "react-router-dom";
// .....
const Test = loadable(() => import("@pages/test")); // 支持路由懒加载
// 路由列表
const routerList = [
{
path: "/",
key: "index",
to: "/details/person",
components: Redirect,
},
// ....
{
path: "/test", // 对应的路由
key: "test",// 必要
title: "test页面",// 标题
components: Test,
},
];
export default routerList;
创建一个菜单
该添加方式适用于 npm run "start mock" 启动的项目
- 在
src/mock/index.js
找到menu
变量,往里添加一条菜单信息.代码如下所示
import dayjs from "dayjs";
let menu = [
{
title: "详情页",
path: "/details",
key: "details",
parentKey: "",
icon: "icon_edit",
type: "1,0",
},
{
title: "个人中心",
path: "/person",
key: "detailsPerson",
parentKey: "details",
icon: "icon_infopersonal",
type: "0,1",
},
// .... 开始添加菜单信息 ....
{
title: "test",
path: "/test",
key: "test",
parentKey: "",// 空表示 为主菜单而非子菜单
icon: "icon_infopersonal",// 菜单图标
type: "0,1", // 访问权限,自定义,当前项目 0为管理员,1为普通用户.原始数据为字符串形式,会中途进行转化为数组形式["0","1"]
}
// .....
]
- 由于菜单会走本地会话存储
window.sessionStorage
,所以保存代码后需要关闭当前窗口,重新打开地址 http://localhost:3000/react-ant-admin
打开之后,会发现菜单会多出一个
test
栏目,点击会打开之前我们创建的test页面.这样就完成了菜单和页面的编写.
文档地址
还在努力创建中....
更多建议欢迎骚扰~
项目截图
- 登录
- 详情页
- 列表
- 权限管理
- 结果页
企鹅号:1369501150
邮箱:1369501150@qq.com
欢迎各位提出建议与问题!
我最近做了一个react的后台管理系统,用于快速创建后台项目模板的更多相关文章
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(4)-构建项目解决方案 创建EF DataBase Frist模式
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(4)-构建项目解决方案 创建EF DataBase Frist模式 进行本次文章之前,我们可能需要补充一些 ...
- 一个基于 Beego 的,能快速创建个人博客,cms 的系统
学习beego时候开发的一个博客系统,在持续完善,有不足之处,望大佬们多多体谅,并且指出.感谢! Go Blog 一个基于Beego的,能快速创建个人博客,cms 的系统 包含功能 查看 Go Blo ...
- android studio: 一个Android studio 3.3.2 无法创建新项目的问题
记录一个AS无法创建新项目的问题. 今天想写一个测试Demo,点击上面的“Start a new Android Studio Project” ,填写完包名和项目路径后,点“Finish”, AS无 ...
- Svelte Ui Admin后台管理系统|svelte3+svelteUI中后台前端解决方案
基于svelte3.x+svelteKit+svelte-ui网页后台管理系统SvelteAdmin. Svelte-Ui-Admin 基于svelte3.x+svelteKit+vite3+echa ...
- 简单后台管理系统框架--HTML练手项目2【Frameset】
[本文为原创,转载请注明出处] 技术[HTML] 布局[Frameset] 无步骤 <!DOCTYPE html> <html lang="en"> & ...
- 【后台管理系统】—— Ant Design Pro 项目爬坑(一)
1.表单rule中可以分对象处理不同规则 <FormItem label="类型名称" {...formLayout}> { form.getFieldDecorato ...
- 026 SSM综合练习02--数据后台管理系统--数据库表创建及SSM环境搭建
1.数据库准备 本项目我们Oracle数据库,Oracle 为每个项目创建单独user,oracle数据表存放在表空间下,每个用户有独立表空间. (1)采用数据库管理员账号:SYSTEM,再配合数据库 ...
- 使用react全家桶制作博客后台管理系统
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...
- 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入
使用react全家桶制作博客后台管理系统 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...
随机推荐
- Redis 日志篇:系统高可用的杀手锏
特立独行是对的,融入圈子也是对的,重点是要想清楚自己向往怎样的生活,为此愿意付出怎样的代价. 我们通常将 Redis 作为缓存使用,提高读取响应性能,一旦 Redis 宕机,内存中的数据全部丢失,假如 ...
- 对Map进行复合操作(读写)且并发执行时,无法保证业务的行为是正确的,对读写操作进行同步则可以解决。
ConcurrentHashMap通常只被看做并发效率更高的Map,用来替换其他线程安全的Map容器,比如 Hashtable和Collections.synchronizedMap.线程安全的容器, ...
- Spring IoC总结
Spring 复习 1.Spring IoC 1.1 基本概念 1.1.1 DIP(Dependency Inversion Principle) 字面意思依赖反转原则,即调用某个类的构造器创建对象时 ...
- 树的遍历c/c++
先序遍历(递归) 1 void preOrderTraverase(TreeNode * r) 2 { 3 if(r) 4 { 5 printf("%d\t",r->_dat ...
- Ext.Net一般处理程序上传文件
引言 最近公司项目全部转向前端化,故所有aspx页面业务逻辑尽可能的转到用户控件前台页面完成.以方便每次发布项目时只是替换前端页面不会影响客户体验. 既然转到前台逻辑,那么必须走后台的业务也就单独封装 ...
- SpringCloud里面切换数据源无效的问题
问题描述: 调用链:controller1的接口A->service1的方法A->service2的方法B 方法A开启了事务,且指定了数据库A的数据源 方法B也开启了事务,使用了默认的事务 ...
- NoSQL安装与操作
redis操作: redis的启动与关闭:注意:(需要关闭防火墙) redis的启动:redis-server redis.conf redis的登录:redis-cli -a pass redis的 ...
- vue 实现页面嵌套pdf之vue-pdf插件
近期vue移动端项目中遇到了页面内,嵌套展示pdf内容.实现方法很多种,可以用iframe嵌套,但不利于引擎优化seo.所以在网上找到了vue-pdf这个插件,这个插件非常好用,其中封装的方法也很多, ...
- java知识汇总
文章目录 Java基础知识 基本类型 类别及其对应包装类 1. byte---Byte 2. char---Character 3. short---Short 4. int---Integer 5. ...
- python使用try...except语句处理异常
try....except语句语法格式: try: <语句> except(异常名称): <语句> 注意在except语句中的括号中的异常名称是可以省略的,当省略时就是全捕捉 ...