React + Antd 实现后台管理系统

时间 2020-03-06

标签 react antd 实现后台管理系统栏目 React 繁體版

原文原文链接

React 介绍

Facebook 开源的一个 JavaScript 库
React 结合生态库构成一个 MV* 框架
React 特色:
- 声明式编码 (只须要声明在哪里作什么，而无需关心如何实现，好比数组原型上的那些高阶函数。编程式实现：须要以具体代码表达在哪里作什么，如何实现，好比 for 循环之类的。)
- Component-Based (组件化编码)
- 高效 (高效的 DOM Diff 算法，最小化页面重绘)
- 单向数据流
生态介绍
- React-Router (Vue-Router)
- Redux (Vuex)
- Axios
- Babel
- Webpack

React 生命周期

getDefaultProps
getInitialState
componentWillMount
render (必须)
componentDidMount
componentWillReceiveProps
shouldComponentUpdate (<--- this.setState())
componentWillUpdate (<--- this.forceUpdate())
componentDidUpdate
componentWillUnmount

import React, { Component } from 'react';

class Child extends Component {
	// 如下生命周期按顺序执行
	// 首次会执行 componentWillMount、render、componentDidMount
	// mount 钩子只会在组件中调用一次，其余的调用屡次

	componentWillReceiveProps(newProps) {
		console.log('will use newProps', newProps);
	}

	shouldComponentUpdate(newProps) {
		// 接受新的 props，若是返回 false, 就不会再调用 render 生命周期了

		console.log('should update', newProps);
		return newProps.value === 3 ? false : true;
	}

	componentWillUpdate(newProps) {
		console.log('will update', newProps);
	}

	componentWillMount() {
		console.log('will mount');
	}

	render() {
		console.log('render');
		return (
			<div>Child</div>
		);
	}

	componentDidMount() {
		console.log('did mount');
	}

	componentDidUpdate(oldProps) {
		// 接收老的 props
		// 好比父组件设置了 state 里面的值，这里的 oldProps 里面的值就是 state 以前的值

		console.log('did update', oldProps);
	}
}

export default Child;
复制代码

项目依赖安装

axios
antd (使用的 less，能够修改属于本身的主题，之因此咱们能够引入 antd.css，是由于 less 文件已经被编译打包了，可是 antd 实际上是采用 less 的方式来编写样式的!)
react-router-dom
redux
less (安装less)
less-loader (须要暴露出 webpack 配置: yarn eject)
babel-plugin-import (按需加载组件代码和样式，好比咱们引入了一个 Button 组件，那么相应的也只会引入 Button 的样式文件)

配置 lesscss

// 暴露出 webpack 配置，编辑 webpack.config.js
// 编辑完以后重启服务便可
// 记住：use 采用从后到前来进行解析，loader 不要写反了

{
  test: /\.less$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1
      }
    }, {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss',
        plugins: () => [
          require.resolve('postcss-flexbugs-fixes')
        ]
      }
    }, {
      loader: require.resolve('less-loader')
    }
  ]
},
复制代码

配置按需加载 (安装 babel-plugin-import)react

// 打开 webpack.config.js 文件

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    // 添加以下配置便可
    // 项目打包就只会打包你引入了的组件和样式
    plugins: [
      ['import', {
        libraryName: "antd",
        // 若是指定是 "css", 那么它就会引入 "antd/lib/button/style/css"
        // 不过，你修改按钮的主题色的时候，就没法修改了，由于咱们修改主题是经过改变 less 变量
        // 而 css 文件是已经编译打包好了的
        // style: "css"
        
        // 指定为 true,它就会加载 "antd/lib/button/style"下的 less 模块
        // 并将全部 less 模块进行动态编译成 css 文件
        style: true, 
      }]
  },
},
复制代码

修改 Antd 的主题色webpack

{
  loader: require.resolve('less-loader'),
  options: {
    modules: false,
    modifyVars: {
      // 修改 antd 的主题色
      "@primary-color": "#f9c700"
    }
  }
}
复制代码

项目路由配置

项目的首页与登陆页是同一层级的路由，因此配置的时候须要提早想好
定义一个 router.js 文件，放置第一层级路由
经过 this.props.children 获取组件内部的路由配置

// router.js

<Router>
    <Route path='/login' component={Login} />
    <Route path='/admin' render={(props) =>
        <Admin>
            <Route path={`${props.match.path}/home`} component={Home} />
            <Route path={`${props.match.path}/ui/buttons`} component={Buttons} />
        </Admin>
    } />
</Router>

// Admin.js (用来对Home页面的一个布局)

class Admin extends Component {
    render() {
        return (
            <Row className="container">
                <Col span={4} className="nav-left">
	                <NavLeft />
                </Col>
                <Col span={20} className="main">
                    <Header />
                    <Row className="content">
                        // 渲染 Admin 组件内部的 Route
                    	{this.props.children}
                    </Row>
                    <Footer />
                </Col>
            </Row>
        );
    }
}
复制代码

Mock 数据以及接口请求封装

easy mock (编写在线的接口)
mock (配置须要接口返回的数据)
axios (请求接口)

// 封装接口请求
import axios from 'axios';
import { Modal } from 'antd';

const baseURL = 'https://....';

class Axios {
    static ajax(options) {
        return new Promise((resolve. reject) => {
            axios({
                method: 'get',
                url: options.url,
                baseURL: baseURL,
                timeout: 5000,
                params: (options.data && options.data.params) || ''
            }).then((response) => {
                if (response.status === '200') {
                    const res = response.data;
                    if (res.code === 0) {
                        resolve(res);
                    } else {
                        // 接口数据报错
                        Modal.info({
                            title: '提示',
                            content: res.data.msg
                        });
                    }
                } else {
                    // 接口报错
                    reject(response.data);
                }
            })
        })
    }
}
复制代码

封装axios请求以及配置代理

使用 create-react-app 建立的项目能够直接在 package.json中配置 proxyios

"proxy": "http://xx.x.x.xx:port", // 服务器地址
复制代码

定制 axiosweb

import axios from "axios";
import { Modal } from "antd";
const service = axios.create({
    timeout: 10000
})

// 请求拦截
service.interceptors.request.use(config => {
    console.log("config", config);
    config.headers["Authorization"] = "token"; // 通常接口请求的话须要带上token
    return config;
}, error => {
    console.log("请求拦截error", error);
    Promise.reject(error);
})

service.interceptors.response.use(response => {
    let { data, statusText, status } = response;
    return {
    	statusText,
    	status,
    	data: JSON.parse(data) // 若是后端返回的数据是json序列化以后的数据须要解析
    }
}, error => {
    Modal.warning({
    	title: error.response.status,
    	content: error.response.statusText
    })
    Promise.reject(error);
})

export default service;

复制代码

如何请求 (能够封装请求方法，好比 get 请求)ajax

import service from '../utils/request';
import { Modal } from 'antd';

export function ApiGet(url, params) {
    return new Promise((resolve, reject) => {
    	service.get(url, params)
    	    .then(res => {
            	if (res.status === 200) {
                    Modal.success({
                        title: res.status,
                        content: "请求成功!"
                    });
                    resolve(res);
            	} else {
                    Modal.warning({
                    	title: res.status,
                    	content: res.statusText
                    });
                    reject(res);
            	}
            })
            .catch(err => {
                console.log("err", err)
                Modal.warning({
                    title: "Error",
                    content: "请求错误!"
                })
                reject(err);
            });
    });
}
复制代码

调用就很简单了算法

ApiGet("接口").then(res => {
    console.log(res);
}, err => {

})
复制代码