react-ant-admin后台管理系统，用于快速创建后台项目模板
<p><img src="https://img.shields.io/github/stars/kongyijilafumi/react-ant-admin?label=GitHub%20Star"><br><img src="https://img.shields.io/github/forks/kongyijilafumi/react-ant-admin?label=GitHub%20fork"><br>
<img src="https://gitee.com/kong_yiji_and_lavmi/react-ant-admin/badge/star.svg?theme=dark"><br>
<img src="https://gitee.com/kong_yiji_and_lavmi/react-ant-admin/badge/fork.svg?theme=dark"><br>
<img src="https://img.shields.io/github/license/kongyijilafumi/react-ant-admin"></p>
<p>TypeScript 版GitHub(国外地址) |<br>
TypeScript 版码云(国内镜像)</p>
<p>JavaScript 版GitHub(国外地址) |<br>
JavaScript 版码云(国内镜像)</p>
<p>此框架使用与二次开发，前端框架使用 react，UI 框架使用 ant-design，全局数据状态管理使用 redux，ajax 使用库为 axios。用于快速搭建中后台页面。欢迎各位提issue</p>
<ul>
<li>react</li>
<li>react-router-cache-route</li>
<li>ant-design</li>
<li>redux</li>
<li>axios</li>
</ul>
<h2 id="预览地址">预览地址</h2>
<p>react-ant-admin</p>
<p>nodejs 后台 web 服务:react-ant-admin-server</p>
<h2 id="关于此框架二次开发">关于此框架二次开发</h2>
<p>视频讲解地址下载(百度云),提取码<code>e7n1</code></p>
<p>视频讲解地址下载(阿里云)</p>
<h2 id="文档地址">文档地址</h2>
<p>react-ant-admin 文档地址</p>
<p>更多建议欢迎骚扰~</p>
<p>qq 交流群:532948540</p>
<p><img src="https://raw.githubusercontent.com/kongyijilafumi/my-image/master/qq.jpg"></p>
<p>欢迎各位提出建议与问题!</p>
<h2 id="特性">特性</h2>
<ul>
<li>菜单配置:扁平化数据组织,方便编写,存库,页面菜单,标题,侧边栏,顶部导航栏同步</li>
<li>页面懒加载:使用@loadable/component来解决首次打开页面过慢的问题.</li>
<li>Ajax 请求：restful 规范，自动错误提示，提示可配置；自动打断未完成的请求；</li>
<li>权限控制: 根据不用角色的功能类型显示菜单,路由页面拦截.</li>
<li>自定义主题，可以自己定义界面颜色。</li>
<li>代理转发，解决前端请求跨域问题。</li>
<li>路由自动生成，去中心化。</li>
</ul>
<p>系统提供了一些基础的页面</p>
<ul>
<li>登录页</li>
<li>详情页</li>
<li>表单页</li>
<li>列表页</li>
<li>权限管理</li>
<li>结果页</li>
</ul>
<h2 id="快速使用">快速使用</h2>
<ol>
<li>下载本项目到本地</li>
</ol>
<pre><code class="language-bash">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 #码云地址 快
</code></pre>
<ol start="2">
<li>安装依赖</li>
</ol>
<pre><code class="language-bash"># npm 慢
npm i
# cnpm 国内镜像 快
cnpm i
</code></pre>
<ol start="3">
<li>启动</li>
</ol>
<pre><code class="language-bash">npm run "start:mock" # 启动本地mock数据 (暂时没有后台接口,请用此模式预览项目)
npm run start # 启动本地API接口来获取数据
</code></pre>
<p>浏览器打开 <code>http://localhost:3000</code> 即可</p>
<h2 id="创建一个新的页面">创建一个新的页面</h2>
<ol>
<li>在 src/pages 文件夹下创建一个 test.js 文件,代码如下</li>
</ol>
<pre><code class="language-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={
: "test页面",
: "test",
: "/test"
}
// 2.被捕获 暴露的route信息优先级比上面高
export const route = {
: "test页面",
: "test",
: "/test"
}
</code></pre>
<ol start="2">
<li>浏览器访问 <code>http://localhost:3000/react-ant-admin/test</code> 即可</li>
</ol>
<h2 id="创建一个菜单">创建一个菜单</h2>
<p>该添加方式适用于 <code>npm run "start:mock"</code>启动的项目</p>
<ol>
<li>在<code>src/mock/index.js</code> 找到<code>menu</code>变量,往里添加一条菜单信息.代码如下所示</li>
</ol>
<pre><code class="language-js">let menu = [
{
menu_id: 9,
: "列表页",
: "/list",
: "list",
: "",
: "icon_list",
: "false",
order: 1,
},
{
menu_id: 10,
: "卡片列表",
: "/card",
: "listCard",
: "list",
: "",
: "false",
order: 5485,
},
// .... 开始添加菜单信息 ....
{
menu_id: 11, // 菜单id 用于关联权限
: "test", // 标题
: "/test", // 访问路径
: "test", // 唯一key
: "", // 空表示 为主菜单而非子菜单
: "icon_infopersonal", // 菜单图标
order: 1, // 菜单排序 越小越靠前
: "true", //页面保持状态
},
// .....
];
</code></pre>
<ol start="2">
<li>由于菜单会走本地会话存储<code>window.sessionStorage</code>,所以保存代码后需要关闭当前窗口,重新打开地址 <code>http://localhost:3000/react-ant-admin</code></li>
</ol>
<blockquote>
<p>打开之后,会发现菜单会多出一个<code>test</code>栏目,点击会打开之前我们创建的 test 页面.这样就完成了菜单和页面的编写.</p>
</blockquote>
<h2 id="脚本启动">脚本启动</h2>
<p>在完成依赖安装之后,有以下几种启动方式。</p>
<ul>
<li>npm run start</li>
</ul>
<p>请求接口数据，通过后台返回数据显示项目信息</p>
<ul>
<li>npm run "start:color"</li>
</ul>
<p>请求接口数据，通过后台返回数据显示项目信息，并且开启主题色配置。</p>
<ul>
<li>npm run "start:mock"</li>
</ul>
<p>本地模拟数据，假数据来显示项目信息</p>
<ul>
<li>npm run "start:mock_color"</li>
</ul>
<p>本地模拟数据，假数据来显示项目信息，并且开启主题色配置。</p>
<ul>
<li>npm run build</li>
</ul>
<p>普通打包模式。</p>
<ul>
<li>npm run "build:color"</li>
</ul>
<p>打包主题色。项目体积会有所增加。</p>
<h3 id="vscode-快速启动项目">vscode 快速启动项目</h3>
<p>使用vscode 编辑器下载地址</p>
<p>把此项目文件夹拖入<code>vscode编辑器</code>,找到左下角<code>npm 脚本栏目</code>选择快速启动，免命令。<br>
<img src="https://raw.githubusercontent.com/kongyijilafumi/my-image/master/run.png"></p>
<h2 id="项目截图">项目截图</h2>
<ul>
<li>登录</li>
</ul>
<p><img src="https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-doc01.png"></p>
<ul>
<li>详情页</li>
</ul>
<p><img src="https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-detail.png"></p>
<ul>
<li>列表</li>
</ul>
<p><img src="https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-list.png"></p>
<ul>
<li>权限管理</li>
</ul>
<p><img src="https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-power.png"></p>
<ul>
<li>结果页</li>
</ul>
<p><img src="https://raw.githubusercontent.com/kongyijilafumi/my-image/master/react-ant-admin-result1.png"></p><br><br>
来源：https://www.cnblogs.com/kongyijilafumi/p/14695044.html
頁:
[1]