React 封装路由组件 管理路由
import nProgress from "nprogress"
/**** 服务器端接口的封装文件 */
// 路由基地址
export let base = 'xxxxxxxxxxxxxxxx'
/**
* 管理员登录
* 接口地址:admin/login
* 请求方式:POST
* 请求主体格式:application/json
* 请求数据说明:
* 名称 必填 类型 说明
* aname 是 string 管理员登录名
* apwd 是 string 管理员登录密码
*/
export let adminLogin = async (aname, apwd) => {
// 1. 构建请求地址
let url = base + 'admin/login'
let options = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ aname, apwd })
}
// 2. 显示"加载中"提示
nProgress.start()
// 3. 异步请求(fetch)
let res = await fetch(url, options)
let data = await res.json()
// 4. 隐藏"加载中"提示
nProgress.done()
// 5. 返回响应消息主体
return data
}
这里使用了 第三方 进度条组件 "nprogress"
npm i nprogress
/* css */
/* 第三方进度条组件 nProgress必须样式 */
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #fb0;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
/* height: 2px; */
height: 4px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #fb0, 0 0 5px #fb0;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #fb0;
border-left-color: #fb0;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}