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.csdn.net/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.csdn.net/download/yoonerloop/16725861
8、效果图