[development part] build react background management system template in 10 minutes

mind_ programmonkey 2020-11-13 04:19:14
development build react background management


React Background management system template

github

I'm back again !!! After learning the front end react, Learn again spring, Write this week or next spring Relevant !!!
 Insert picture description here

One 、 Get ready React

1. establish react application

npx create-react-app react_management_system_template
cd react_management_system_template

Also on react Apply to organize , It is arranged as shown in the figure below

stay terminal Input in yarn start, Enter... In the explorer http://localhost:3000 You can get the following figure :

2. Basic plug-in installation

The plug-in needed this time

  • react-router-dom
  • less less-loader
  • axios
  • jsonp
  • antd

yarn add react-router-dom axios less less-loader@4.0.1 antd

3. expose webpack

  • yarn eject

4. Project use Less

In the above exposure webpack On the basis of , find config/webpack.config.js file .

Add these two sentences

And then I found getStyleLoaders Method , Add code as shown in the figure

Finally find the following code , add to less Support

// add to 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'
),
},

Then create a new one in the project App.less File test less Whether the file is available for normal use .

And in App.js Introduction in App.less after yarn start Start project , You can see that the background is normally set to red , Set up the success !

Come to the home page development , Let's enjoy the journey of study together .
 Insert picture description here

Two 、 Project homepage development

1. Project home page settings

Take blog management system as an example . The following is the definition of the page structure of the management system :

  • Page structure definition
    • left List module
    • On the right side
      • Head module
      • Content page
      • Tail module

2. Home page simple configuration

The home page uses Antd Of Grid grid (https://ant.design/components/grid-cn/)

Remember in index.js Introduction in antd.css, Otherwise it doesn't work , namely import 'antd/dist/antd.css';

  • newly build Admin.js, And build a simple framework
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">
Sidebar
</Col>
<Col span={
20} className="Main">
<Row>
Head area
</Row>
<Row>
Content area
</Row>
<Row>
Tail area
</Row>
</Col>
</Row>
);
}
}
export default Admin;

3. Set up the sidebar

Reference resources Antd Of Menu Navigation menu (https://ant.design/components/menu-cn/#header)

stay 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> Blog background management system </h1>
</div>
<Menu theme="dark" defaultOpenKeys={
['sub3']} mode="inline">
<Menu.Item key="1"> home page </Menu.Item>
<Menu.Item key="1"> Article release </Menu.Item>
<SubMenu key="sub3" title={
" Blog management "}>
<Menu.Item key="1"> Article management </Menu.Item>
<Menu.Item key="2"> Comment management </Menu.Item>
<Menu.Item key="3"> Category column </Menu.Item>
<Menu.Item key="4"> Subscription column </Menu.Item>
<Menu.Item key="5"> Blog move </Menu.Item>
<Menu.Item key="6"> Blog reward </Menu.Item>
<Menu.Item key="7"> Blog settings </Menu.Item>
<Menu.Item key="8"> Blogger's card </Menu.Item>
</SubMenu>
<Menu.Item key="1"> Data statistics </Menu.Item>
<Menu.Item key="1"> Download Management </Menu.Item>
<Menu.Item key="1"> Creative activities </Menu.Item>
<Menu.Item key="1"> User center </Menu.Item>
</Menu>
</div>
);
}
}
export default index;

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

The effect is :

This will be revised later , use config File to load sidebar

stay src/config/menuConfig.js file

const menuList = [
{

title: " home page ",
key: '/admin/home'
},
{

title:" Article release ",
key: "/admin/publish_articles"
},
{

title:" Blog management ",
key: "/admin/manage_blog",
children:[
{

title:" Article management ",
key:"/admin/manage_articles"
},
{

title:" Comment management ",
key:"/admin/manage_comment"
},
{

title:" Category column ",
key:"/admin/manage_column"
},
{

title:" Subscription column ",
key:"/admin/subscribe_column"
},
{

title:" Blog move ",
key:"/admin/move_blog"
},
{

title:" Blog reward ",
key:"/admin/reward_blog"
},
{

title:" Blog settings ",
key:"/admin/setting_blog"
},
{

title:" Blog card ",
key:"/admin/card"
}
]
},
{

title:" Data statistics ",
key:"/admin/statistics"
},
{

title:" Download Management ",
key:"/admin/manage_download"
},
{

title:" Creative activities ",
key:"/admin/activities"
},
{

title:" User center ",
key:"/admin/user_info"
},
];
export default menuList;

Yes, before NavLeft/index.js

import React from 'react';
import {
 Menu } from 'antd';
import './index.less';
// Introduce sidebar configuration 
import MenuConfig from '../../config/menuConfig';
const {
 SubMenu } = Menu;
class index extends React.Component {

constructor(props) {

super(props);
this.state = {

};
}
// Refresh mount components 
componentDidMount(){

const menuTreeNode = this.renderMenu(MenuConfig);
this.setState({

menuTreeNode
})
}
// Menu rendering 
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> Blog background management system </h1>
</div>
<Menu theme="dark" defaultOpenKeys={
['/admin/manage_blog']} mode="inline">
{
this.state.menuTreeNode}
</Menu>
</div>
);
}
}
export default index;

4. Head area

The head area is divided into two parts , Part of it is divided into user names ; The other part is about the time and weather .

Format the time in 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();
}
}

For Baidu weather api The request is encapsulated in 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);
}
})
})
}
}

Its head is 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:" Director Lu "
};
}
// Acquisition time 
componentDidMount(){

setInterval(()=>{

let sysTime = Util.formateDate(new Date().getTime());
this.setState({

sysTime
})
},1000)
this.getWeatherApiData();
}
// Get weather 
getWeatherApiData(){

let city = " tianjin ";
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> welcome ,{
this.state.userName}</span>
<a href="#"> sign out </a>
</Col>
</Row>
<Row className="breadcrumb">
<Col span="4" className="breadcrumb-title">
home page
</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;

Its current effect is shown as :

5. Tail area

The tail area is in 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">
( Google Explorer is recommended , You can get a better operating page experience )
</div>
);
}
}
export default index;

The style file is in src/componets/Footer/index.less

.fonter{

padding:40px 0;
text-align: center;
columns: #d7d7d7;
height: 50px;
position: absolute;
bottom: 10px;
left: 40%;
}

6. Home page area

stay 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">
Welcome to the backstage management system !!!
</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;
}

3、 ... and 、 Project add route

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

The specific routing configuration can be seen in React-Router5 Routing tutorial

Four 、 Project add user login Exit function

First of all, refer to Antd The login box in the form in To draw the login interface of the background management system .

stay src/pages/login/index.js Draw the login box in the , And simple form validation for submitted information , And store the information in localstorage in .

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'
};
}
// Get the information of the input box 
onInputChange=(e)=>{

let inputname = e.target.name;
let inputvalue = e.target.value;
this.setState({

[inputname]:inputvalue
})
}
onSubmit=()=>{

// login information 
let logInfo={

username:this.state.username,
password:this.state.password
};
// Form validation 
let checkResult = util.checkInfo(logInfo);
// Judge the form validation results 
if(checkResult === 'success'){

// localstorage access 
util.setStorage('userInfo',logInfo);
// Push to the home page 
this.props.history.push(this.state.redirect);
}else{

alert(" Wrong account and password input ! Please re-enter !");
}
}
render() {

return (
<Row className="login" justify="center" align="middle" >
<Col span={
8}>
<h1> Welcome to the background management system </h1>
<Form className="login-form" initialValues={
{
 remember: true }}>
<Form.Item name="username" rules={
[{
 required: true, message: ' Please enter a user name !!!' }]}>
<Input name="username" prefix={
<UserOutlined className="site-form-item-icon" />} placeholder=" Please enter a user name " onChange={
this.onInputChange} />
</Form.Item>
<Form.Item name="password" rules={
[{
 required: true, message: ' Please input a password !!!' }]}>
<Input name="password" prefix={
<LockOutlined className="site-form-item-icon" />}type="password" placeholder=" Please input a password " onChange={
this.onInputChange} />
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox> Remember the user and password </Checkbox>
</Form.Item>
<a className="login-form-forgot" >
Forget the password
</a>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button" onClick={
this.onSubmit} >
Sign in
</Button>
</Form.Item>
</Form>
</Col>
</Row>
);
}
}
export default withRouter(index);

Specifically about localstorage For access operations, see src/utils/utils

export default{

// Normalized time format 
formateDate(time){

if(!time)
return '';
let date = new Date(time);
return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
},
// Simple check form login 
checkInfo(data){

if(data.username=='admin'&data.password=='admin')
return 'success'
return 'faild'
},
// localstorage Reading data 
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(" This type cannot be used for local storage ");
}
},
// localstorage Take the data 
getStorage(name){

let data = window.localStorage.getItem(name)
if(data){

return JSON.parse(data);
}else{

return '';
}
},
// localstorage Remove data 
removeStorage(name){

window.localStorage.removeItem(name);
}
}


Finally gives github Address :github

that , This time it's over !!!
It's coming soon 10 Month. , This year is really fast !!! 10 After the month, we will start to prepare well for the foundation and brush the questions !!!
 Insert picture description here

版权声明
本文为[mind_ programmonkey]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple