【开发篇】10分钟快速搭建React后台管理系统模板
2024-06-05 18:59:47
React后台管理系统模板
github
我又回来了！！！学完前端react，再学spring，这周或者下周写spring有关的！！！
一、准备React
1.建立react应用
npx create-react-app react_management_system_template
cd react_management_system_template
并对react应用进行整理，整理成如下图所示
在terminal中输入yarn start，在游览器中输入http://localhost:3000即可得到如下图：
2.基础插件安装
本次所需的插件
- react-router-dom
- less less-loader
- axios
- jsonp
- antd
yarn add react-router-dom axios less less-loader@4.0.1 antd
3.暴露webpack
yarn eject
4.项目使用Less
在上述暴露出webpack的基础上，找到config/webpack.config.js文件。
加上这两句
之后找到getStyleLoaders方法，添加代码如图所示
最后找到如下代码处，添加less支持
// 添加less{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction && shouldUseSourceMap,},'less-loader'),sideEffects: true,},{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction && shouldUseSourceMap,modules: {getLocalIdent: getCSSModuleLocalIdent,},},'less-loader'),},
之后在项目中新建App.less文件测试less文件是否可用正常使用。
并在App.js中引入App.less之后yarn start启动项目，可用看到背景正常设置为红色，设置成功！
来到主页开发这里了，让我们一起愉快的进入学习之旅吧。
二、项目主页开发
1.项目主页设置
本次以博客管理系统为例。下面对管理系统页面结构定义：
- 页面结构定义
- 左侧 列表模块
- 右侧
- 头部模块
- 内容页面
- 尾部模块
2.主页简约配置
主页采用Antd的Grid栅格(https://ant.design/components/grid-cn/)
记得在index.js中引入antd.css，否则不起作用，即import 'antd/dist/antd.css';
- 新建
Admin.js,并搭建简约框架
import React from 'react';
import {Col,Row} from 'antd';class Admin extends React.Component {constructor(props) {super(props);this.state = { };}render() {return (<Row className="container"><Col span={4} className="nav-left">侧边栏</Col><Col span={20} className="Main"><Row>头部区域</Row><Row>内容区域</Row><Row>尾部区域</Row></Col></Row>);}
}export default Admin;
3.搭建侧边栏
参考Antd的Menu导航菜单(https://ant.design/components/menu-cn/#header)
在src/componets/Navleft/index.js
import React from 'react';
import { Menu } from 'antd';
import './index.less';const { SubMenu } = Menu;class index extends React.Component {constructor(props) {super(props);this.state = { };}render() {return (<div><div className="logo"><img src="/assets/logo-ant.svg" alt=""/><h1>博客后台管理系统</h1> </div><Menu theme="dark" defaultOpenKeys={['sub3']} mode="inline"><Menu.Item key="1">首页</Menu.Item><Menu.Item key="1">文章发布</Menu.Item><SubMenu key="sub3" title={"博客管理"}><Menu.Item key="1">文章管理</Menu.Item><Menu.Item key="2">评论管理</Menu.Item><Menu.Item key="3">分类专栏</Menu.Item><Menu.Item key="4">订阅专栏</Menu.Item><Menu.Item key="5">博客搬家</Menu.Item><Menu.Item key="6">博客打赏</Menu.Item><Menu.Item key="7">博客设置</Menu.Item><Menu.Item key="8">博主名片</Menu.Item></SubMenu><Menu.Item key="1">数据统计</Menu.Item><Menu.Item key="1">下载管理</Menu.Item><Menu.Item key="1">创造活动</Menu.Item><Menu.Item key="1">用户中心</Menu.Item></Menu></div>);}
}export default index;
在src/componets/Navleft/index.less
.logo{line-height: 100px;padding-left: 20px;background-color: #002140;img{height: 45px;}h1{color: #ffffff;font-size: 25px;display: inline-block;vertical-align: center;margin: 0 0 0 10px;}
}
其效果为：
之后再对此修改，用config文件的方式来加载侧边栏
在src/config/menuConfig.js文件
const menuList = [{title: "首页",key: '/admin/home'},{title:"文章发布",key: "/admin/publish_articles"},{title:"博客管理",key: "/admin/manage_blog",children:[{title:"文章管理",key:"/admin/manage_articles"},{title:"评论管理",key:"/admin/manage_comment"},{title:"分类专栏",key:"/admin/manage_column"},{title:"订阅专栏",key:"/admin/subscribe_column"},{title:"博客搬家",key:"/admin/move_blog"},{title:"博客打赏",key:"/admin/reward_blog"},{title:"博客设置",key:"/admin/setting_blog"},{title:"博客名片",key:"/admin/card"}]},{title:"数据统计",key:"/admin/statistics"},{title:"下载管理",key:"/admin/manage_download"},{title:"创作活动",key:"/admin/activities"},{title:"用户中心",key:"/admin/user_info"},
];export default menuList;
对之前的NavLeft/index.js
import React from 'react';
import { Menu } from 'antd';
import './index.less';
// 引入侧边栏配置
import MenuConfig from '../../config/menuConfig';const { SubMenu } = Menu;class index extends React.Component {constructor(props) {super(props);this.state = { };}// 刷新挂载组件componentDidMount(){const menuTreeNode = this.renderMenu(MenuConfig);this.setState({menuTreeNode})}// 菜单渲染renderMenu=(data)=>{return data.map((item)=>{if(item.children){return(<SubMenu title={item.title} key={item.key}>{this.renderMenu(item.children)}</SubMenu>)}return <Menu.Item title={item.title} key={item.key}>{item.title}</Menu.Item>})}render() {return (<div><div className="logo"><img src="/assets/logo-ant.svg" alt=""/><h1>博客后台管理系统</h1> </div><Menu theme="dark" defaultOpenKeys={['/admin/manage_blog']} mode="inline">{this.state.menuTreeNode}</Menu></div>);}
}export default index;
4.头部区域
头部区域分为两个部分，一部分分为用户名；另外一部分为时间和天气情况。
对时间进行格式化在src/utils/utils.js
export default{formateDate(time){if(!time)return '';let date = new Date(time);return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();}
}
对百度天气api请求的封装在src/axios/index.js
import JsonP from 'jsonp';export default class Axios{static jsonp(options){return new Promise((resolve,reject)=>{JsonP(options.url,{param:'callback'},function(err,response){if(response.status=='success'){resolve(response);}else{reject(response.message);}})})}
}
其头部为src/components/Header/index.js
import React from 'react';
import {Col,Row} from 'antd';
import './index.less'
import Util from '../../utils/utils';
import axios from '../../axios';class index extends React.Component {constructor(props) {super(props);this.state = { userName:"吕厂长"};}// 获取时间componentDidMount(){setInterval(()=>{let sysTime = Util.formateDate(new Date().getTime());this.setState({sysTime})},1000)this.getWeatherApiData();}// 获取天气getWeatherApiData(){let city = "天津";axios.jsonp({url:"http://api.map.baidu.com/telematics/v3/weather?location="+encodeURIComponent(city)+"&output=json&ak=3p49MVra6urFRGOT9s8UBWr2"}).then((res)=>{if(res.status=='success'){let data = res.results[0].weather_data[0];this.setState({dayPictureUrl:data.dayPictureUrl,weather:data.weather})}})}render() {return (<div className="header"><Row className="header-top"><Col span="24"><span>欢迎，{this.state.userName}</span><a href="#">退出</a></Col></Row><Row className="breadcrumb"><Col span="4" className="breadcrumb-title">首页</Col><Col span="20" className="breadcrumb-detail"><span className="date">{this.state.sysTime}</span><span className="weather-img"><img src={this.state.dayPictureUrl} alt=""/></span><span className="weather-detail">{this.state.weather}</span></Col></Row></div>);}
}export default index;
其目前的效果展示为：
5.尾部区域
尾部区域在src/components/Footer/index.js
import React from 'react';
import './index.less';class index extends React.Component {constructor(props) {super(props);this.state = { };}render() {return (<div className="fonter">(推荐使用谷歌游览器，可以获得更佳操作页面体验)</div>);}
}export default index;
样式文件在src/componets/Footer/index.less
.fonter{padding:40px 0;text-align: center;columns: #d7d7d7;height: 50px;position: absolute;bottom: 10px;left: 40%;
}
6.首页区域
在src/pages/home/index.js
import React from 'react';
import './index.less';
import {Row} from 'antd';class index extends React.Component {constructor(props) {super(props);this.state = { };}render() {return (<Row className="home-wrap" justify="center">欢迎来到后台管理系统!!!</Row>);}
}export default index;
src/pages/home/index.less
.home-wrap{height: calc(72vh);width: 95%;position: absolute;margin-top: 25px;background-color: white;align-items: center;justify-content: center;font-size: 20px;
}
三、项目添加路由
在src/IRouter.js
import React from 'react';
import {BrowserRouter,Switch,Route} from 'react-router-dom';
import App from './App';
import Admin from './Admin';
import Home from './pages/home';
import NotMatch from './pages/NotMatch';class IRouter extends React.Component {constructor(props) {super(props);this.state = { };}render() {return (<BrowserRouter><App><Route path="/admin" render={()=><Admin><Switch><Route path="/admin/home"><Home/></Route><Route ><NotMatch/></Route></Switch></Admin>}></Route></App></BrowserRouter>);}
}export default IRouter;
具体路由配置可看React-Router5路由使用教程
四、项目添加用户登录 退出功能
首先参考Antd中表单中的登录框来绘制本次后台管理系统的登录界面。
在src/pages/login/index.js中绘制登录框，并对提交信息进行简单的表单验证，并将信息存入localstorage中。
import React from 'react';
import './index.less';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Row,Col,Form, Input, Button, Checkbox } from 'antd';
import util from '../../utils/utils';
import {withRouter} from 'react-router-dom';class index extends React.Component {constructor(props) {super(props);this.state = { username:'',password:'',redirect:'/admin/home'};}// 获取输入框的信息onInputChange=(e)=>{let inputname = e.target.name;let inputvalue = e.target.value;this.setState({[inputname]:inputvalue})}onSubmit=()=>{// 登录信息let logInfo={username:this.state.username,password:this.state.password};// 表单验证let checkResult = util.checkInfo(logInfo);// 判断表单验证结果if(checkResult === 'success'){// localstorage存取util.setStorage('userInfo',logInfo);// 推往主页this.props.history.push(this.state.redirect);}else{alert("账户和密码输入有误!请重新输入！");}}render() {return (<Row className="login" justify="center" align="middle" ><Col span={8}><h1>欢迎登录后台管理系统</h1><Form className="login-form" initialValues={{ remember: true }}><Form.Item name="username" rules={[{ required: true, message: '请输入用户名!!!' }]}><Input name="username" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" onChange={this.onInputChange} /></Form.Item><Form.Item name="password" rules={[{ required: true, message: '请输入密码!!!' }]}><Input name="password" prefix={<LockOutlined className="site-form-item-icon" />}type="password" placeholder="请输入密码" onChange={this.onInputChange} /></Form.Item><Form.Item><Form.Item name="remember" valuePropName="checked" noStyle><Checkbox>记住用户和密码</Checkbox></Form.Item><a className="login-form-forgot" >忘记密码</a></Form.Item><Form.Item><Button type="primary" htmlType="submit" className="login-form-button" onClick={this.onSubmit} >登录</Button></Form.Item></Form></Col></Row>);}
}export default withRouter(index);
具体的有关localstorage的存取的操作见src/utils/utils
export default{// 规范化时间格式formateDate(time){if(!time)return '';let date = new Date(time);return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();},// 简单的检查表单登录checkInfo(data){if(data.username=='admin'&data.password=='admin')return 'success'return 'faild'},// localstorage读取数据setStorage(name,data){let dataType = typeof data;if (dataType == 'object'){window.localStorage.setItem(name,JSON.stringify(data));}else if(['number','string','boolean'].indexOf(dataType)>=0){window.localStorage.setItem(name,data);}else{alert("该类型不能用于本地存储");}},// localstorage取数据getStorage(name){let data = window.localStorage.getItem(name)if(data){return JSON.parse(data);}else{return '';}},// localstorage移除数据removeStorage(name){window.localStorage.removeItem(name);}}
最后给出github地址：github
那么，这次要结束了！！！
马上就要到10月份了，今年过的是真的很快！！！ 10月份之后就要开始好好准备基础和刷题了！！！
【开发篇】10分钟快速搭建React后台管理系统模板相关推荐
- 【工具篇】10分钟快速学会React图表搭建
10分钟快速学会React图表搭建 本次紧着之前的antd,接着学习有关react图表以及富文本编辑器的搭建. 本次的功能实现基于上次的[工具篇]10分钟学会Ant Design of React用法 ...
- 转载文章-【工具】10分钟快速搭建属于自己的文档网站-来自掘金
掘金 首页 探索掘金 搜索 lvhanghmm的头像 Gopal lv-4 2021年03月09日 阅读 9930 关注 [工具]10分钟快速搭建属于自己的文档网站 前言 很多同学都希望能够拥有自己的 ...
- pythonweb快速开发平台_30分钟快速搭建Web CRUD的管理平台--django神奇魔法
加上你的准备的时间,估计30分钟完全够用了,因为最近在做爬虫管理平台,想着快速开发,没想到python web平台下有这么非常方便的框架,简洁而优雅.将自己的一些坑总结出来,方便给大家的使用. 准备环 ...
- 10分钟快速搭建自己的服务器
快速搭建服务器 1.创建虚拟机 2.CentOS 7的安装 3.CentOS 7 配置 4. Xshell连接 5.Docker的安装 前言:买了个阿里云的服务器,但是由于内存小docker运行几个容 ...
- 10分钟快速搭建实战Web项目：生鲜电商
生鲜电商环境搭建 生鲜电商环境搭建 软件环境准备 登录宝塔 上传源码文件 创建数据库 开放端口 导入数据 修改配置文件 宝塔面板配置网站 登录生鲜电商 权限获取 登录生鲜官网 登录后台 生鲜电商环境搭 ...
- centos6 10分钟快速搭建iscsi存储服务器
1.系统架构 2.安装软件 yum list | grep target yum -y install scsi-target-utils.x86_64 3.修改配置文件 先准备一个硬盘进行分区 /d ...
- React后台管理系统模板搭建
文章目录 前言 一.准备React (一)建立react应用 (二)安装基础插件 (三)暴露webpack (四)使用Less 前言 本次基于React使用环境搭建之系列问题 一.准备React (一 ...
- ESP8266 Non-OS SDK 开发之旅 基础篇① 初识 Non-OS SDK，史上超级详细手把手教小白20分钟快速搭建SDK软件开发环境，完成第一个例子Hello World！
文章目录 1.前言 2. SDK概述 2.1 SDK使用流程 2.2 ESP8266 HDK -- 硬件开发工具 2.3 ESP8266 SDK -- 软件开发工具包 2.3.1 Non-OS SDK ...
- 10分钟快速配置sublime2支持jQuery开发
昨天介绍了javascript的开发工具sublime 2 edit,今天我们将介绍如何10分钟快速配置sublime2支持jQuery开发.希望大家能喜欢着款jQuery开发工具. 相关介绍:使用s ...
最新文章
- python文本去重_Python做文本按行去重的实现方法
- mysql 序列_MySql中序列的应用和总结
- redistemplate hash 过期时间_Redis过期监听——订单超时-取消
- java调用python脚本并向python脚本传递参数
- labview获取窗口句柄_API---如何获得窗口句柄(HWND)
- spss中有关t检验的详细介绍（包含操作过程和结果分析）
- java版b2b2c社交电商spring cloud分布式微服务 （三） 服务消费者（Feign）
- 计算机组装实验硬盘分区方法,硬盘怎么分区和格式化 史上最详细的硬盘分区方法大全 (全文)...
- 逆思维：GAN不能生成什么？Seeing What a GAN Cannot Generate
- 【IoT】STM32 文件系统 fatfs 移植笔记详解
- 澳鹏Appen收购Quadrant：移动定位数据业务进一步增强
- sys.stdout.write()用法
- 英语它在计算机旁边怎么读,计算机的英语怎么读？
- 用pageOffice插件实现 word文档在线填充指定数据
- 更换电脑机械硬盘之后,无需重新安装程序技巧(系统盘为固态),解决D盘程序快捷方式图标白色方块
- 计算机语言词汇量,汉语作为第二语言的词汇量测量工具研究
- 华中科技大学计算机考研书籍,2020年华中科技大学计算机应用技术考研经验分享...
- Barrier (屏障; 障碍; 栅栏; 分界线)
- 图像恢复 SWinIR : 彻底理解论文和源代码 (注释详尽）
- 【Linux】Linux文件之/etc/fstab