React开发CMS总结（基础配置）

1、配置less和ant

yarn add webpack@4.44.2：注意版本，高版本出现问题
yarn add less-loader：less解析插件
yarn ejcet：暴露配置信息
yarn add antd

config/webpack.config.js设置参考：https://blog.youkuaiyun.com/yoonerloop/article/details/115361998

2、Promise

是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

    （1）当new Promise()执行之后，promise对象的状态会被初始化为pending，这个状态是初始化状态。new Promise()这行代码，括号里的内容是同步执行的。括号里定义一个function，function有两个参数：resolve和reject。如下：

        如果请求成功了，则执行resolve()，此时，promise的状态会被自动修改为fullfilled。

        如果请求失败了，则执行reject()，此时，promise的状态会被自动修改为rejected

    （2）promise.then()方法，括号里面有两个参数，分别代表两个函数 function1 和 function2：

        如果promise的状态为fullfilled（意思是：如果请求成功），则执行function1里的内容

        如果promise的状态为rejected（意思是，如果请求失败），则执行function2里的内容

另外，resolve()和reject()这两个方法，是可以给promise.then()传递参数的。

	//设置Promise
	let promise = new Promise((resolve, reject) => {
	        if (!err) {
	            resolve(data)
	        } else {
	            reject(err)
	        }
	    })
	})

	//回调Promise
	promise.then((res) => {
	    console.log(JSON.stringify(res)+'----1--')
	},(error)=>{
	    console.log(JSON.stringify(error)+'-----2---')
	}).catch((error) => {
	    console.log(JSON.stringify(error)+'------3---')
	})

其他常用API：

Promise 自带的API提供了如下对象方法。

Promise.all()：并发处理多个异步任务，所有任务都执行成功，才能得到结果。

	Promise.all([promise1, promise2, promise3]).then(result => {
                console.log(result);
    });

Promise.race(): 并发处理多个异步任务，只要有一个任务执行成功，就能得到结果。

	Promise.race([promise1, promise2, promise3]).then(result => {
                console.log(result);
    });

3、配置jsonp

jsonp一般进行二次封装，写成工具类使用。

yarn add jsonp

	import JsonP from 'jsonp'

	export default class request {
	    static jsonp(options) {
	        return new Promise((resolve, reject) => {
	            JsonP(options.url, {
	                param: 'callback',
	            }, (err, data) => {
	                if (!err) {
	                    resolve(data)
	                } else {
	                    reject(err)
	                }
	            })
	        })
	    }
	}

使用：

	import request from "../../request/index";

	getWeather() {
        request.jsonp({
            url: 'http://api.k780.com/?app=weather.today&weaid=1&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json',
        }).then((res) => {
            console.log(JSON.stringify(res)+'----1--')
        },(error)=>{
            console.log(JSON.stringify(error)+'-----2---')
        }).catch((error) => {
            console.log(JSON.stringify(error)+'------3---')
        })
    }

4、时间显示

export default {
    formatDate(time) {
        if (!time) {
            return '';
        }
        let data = new Date(time)
        return data.getFullYear()
            + '-' + (data.getMonth() + 1)
            + '-' + data.getDate()
            + ' ' + data.getHours()
            + ':' + data.getMinutes()
            + ':' + data.getSeconds();
    }
}

componentWillMount() {
    setInterval(() => {
        let systemTime = Util.formatDate(new Date().getTime())
        this.setState({systemTime})
    }, 1000);
}

5、倒三角实现

使用css3伪类选择器实现

.title {
  text-align: center;
  font-size: 18px;
  &:after {
    position: absolute;
    content: '';
    left: 50px;
    border-top: 9px solid red;
    border-left: 12px solid transparent;;
    border-right: 12px solid transparent;;
    top: 39px;
    left: 96px;
  }
 }

6、全局资源设置

定义default.less：

/** 常用色值 **/
@color1: #f9c700;
@color2: #ff5400;

/** 常用字体大小 **/
@font1: 34px;
@font2: 20px;

使用：

@import "../../style/default";

.home {
  height:calc(70vh);
  width: calc(100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: @font2;
  background-color: @color1;
}

7、项目源码

https://download.youkuaiyun.com/download/yoonerloop/16725861

8、效果图