vue-day06----过渡&动画（transition）、axios、axios以post方式请求数据、axios常用的配置项、axios拦截器、qs处理数据、vue中async和await的使用
### vue过渡&动画 transition标签
1、在vue中如果需要使用动画的时候必须要给动画的元素/组件包裹一个transition内置组件
2、transition内置组件身上有一个name属性，值为动画的名称
3、vue中应用动画的元素必须经历显示和隐藏的操作（v-if v-show）
4、vue为动画提供了6个类名：
.[name]-enter
.[name]-enter-active 一般用来设置动画类型和动画时间
.[name]-enter-to
.[name]-leave
.[name]-leave-active 一般用来设置动画类型和动画时间
.[name]-leave-to
注意：
1、动画执行完后动画提供的类名会消失，所以当前元素bottom设置为最终要显示的样式。
2、当多个元素进行动画的时候要将transition组件改为transition-group组件，另外切记子元素必须要加上key值。
3、.[name]-enter-to和.[name]-leave一般是默认时的样式，不写也行。
步骤：
（1）模仿mint-ui的active sheet
①用transition标签将需要动画的 .left 盒子包裹，设置name属性
<transition name="leftBox">
<div class="left" v-show="state"></div>
</transition>
②设置 .left 样式和leftBox的动画效果
/* 动画元素的初始布局就是正常的元素显示时布局 */
.left{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100%;
blue;
}
.leftBox-enter,.leftBox-leave-to{
left:-100px;
}
.leftBox-enter-active,.leftBox-leave-active{
transition: left .3s ease-out;
}
此时，点击按钮时会进行动画的滑入滑出。
（2）帧动画
①设置name属性
<transition name="move">
<div class="box" v-show="state"></div>
</transition>
②帧动画函数
@keyframes move {
0%{
transform: translate(0,0);
}
25%{
transform: translate(200px,0);
}
50%{
transform: translate(200px,200px);
}
75%{
transform: translate(0,200px);
}
100%{
transform: translate(0,0);
}
}
.move-enter-active{
animation: move 3s;
}
（3）配置animate.css使用：
①引入animate.css：
第一种方式：在所需要的组件中引入：@import "../src/assets/animate.min.css";
第二种方式：在main.js中引入：import "../src/assets/animate.min.css";
第三种方式：在index.html中引入：<link rel="stylesheet" href="../src/assets/animate.min.css">
②给transition标签添加enter-active-class和leave-active-class类名，其中animated是必须要写的属性值，后面跟需要使用的动画名
<transition enter-active-class="animated lightSpeedIn" leave-active-class="animated lightSpeedOut">
<div class="box" v-show="state"></div>
</transition>
### axios
概念：axios是前后端交互的一个插件，是基于promise的http库。
好处：
从浏览器中创建XMLHTTPRequest
从node.js中创建http请求
支持PromiseAPI
拦截请求和响应
取消请求
自动转换JSON数据
客户端支持防御 XSRF
如何使用：
①安装：npm install axios -S
②使用：
get简写：
axios.get("url",{
params:{id:123},
headers:{}
}).then().catch();
post简写：
axios.post("url",{
id:123,
name:"aaa"
}).then().catch();
综合写法：
axios({
method:请求方式,
url:请求地址,
data:post请求时需要传递的数据（只有post请求时才有此参数）,
params:get请求时需要传递的数据（只有get请求时才有此参数）,
headers:{}
});
axios可以执行多个并发请求（Promise可以解决回调地狱问题，可以执行并发请求）：
function getUserAccount(){
return axios.get("/user/12345");
}
function getUserPermissions(){
return axios.get("/user/12345/permissions");
}
axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(acct,perms){
// 两个请求现在都执行完成
}));
----all()表示并行
步骤：（axios请求 http://m.maoyan.com&cityId=10 ）
①下载插件：npm install axios -S
②在需要axios请求的组件中引入插件：import axios from 'axios';
③created中做请求操作：
let url="http://m.maoyan.com/ajax/cinemaList";
axios.get(url,{params:{
cityId:10
}}).then((data)=>{
console.log(data);
});
④处理跨域（DevServer中设置proxy属性）：
devServer: {
port: 9000,
proxy: {
"/maoyan": {
target: "http://m.maoyan.com",// 目标服务器路径
changeOrigin: true,
pathRewrite: {
"^/maoyan": ""
}
}
}
}
重启后，用 /maoyan 替换url中的 http://m.maoyan.com。
⑤因为axios在项目中会经常用到，所以尽量在main.js中做全局的引入，这样就不用在组件中再进行单独的引用：
import axios from "axios";
Vue.prototype.$axios=axios;
此后，axios.get().then();可以替换为this.$axios.get().then();
### axios以post方式请求数据
express创建服务：
①新建expressExample文件夹，cmd下初始化：（npm init -y），下载express、body-parser插件（npm i express body-parser -S）
②expressExample下新建index.js文件和router/user.js文件：
index.js：
const express = require("express");
const bodyParser = require('body-parser');
const app = express();
const userRouter = require("./router/user");
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use("/user",userRouter);
app.listen(6666);
user.js：
const express = require("express");
const router = express.Router();
router.post("/login",(req,res)=>{
const {username,password} = req.body;
console.log(username,password);
res.json({
code:200,
data:{
msg:"post方式请求得到的消息"
}
});
});
router.get("/register",(req,res)=>{
const {username,password}=req.query;
console.log(username,password)
res.json({
code:200,
data:{
msg:"get方式请求得到的消息"
}
});
});
module.exports = router;
③package.json中scripts中添加：
"dev":"supervisor index"
④启动服务：终端中npm run dev
⑤dev.config.js中给proxy对象添加 "user" 代理（192.168.43.185是本机用的ip地址【终端中用ipconfig打开，拿到IPv4】，端口号和index.js中一样）：
"/user":{
target:"http://192.168.43.185:6666",
changeOrigin: true
}
⑥重启项目服务：npm run dev
⑦任意组件中通过post方式请求数据：
let url="/user/login";
axios.post(url,{
username:"wql",
password:"123456"
}).then((data)=>{
console.log(data)
});
### axios常用的配置项
baseUrl：判断是开发环境还是生产环境：
baseURL: process.env.NODE_ENV == 'development'?'https://some-domain.com/api/':"....."
method
url
data
params
headers----token
timeout----设置请求的最长时间，一般设置成5秒
baseUrl
withCredentials----跨域请求时是否需要凭证，默认为false，设置为true时可以将cookie带过去
重新配置axios的配置项的两种方法：
①创建一个新的axios，重新配置配置项
axios.create({
timeout:5000,
withCredentials:true
});
②通过axios.default：
axios.default.baseUrl="";
### axios拦截器
数据在发送到服务端之前以及数据响应到客户端之前的一个拦截。
请求拦截：loading 处理token
响应拦截：数据处理 axios默认会返回一堆数据，一堆数据中做筛选然后只返回data中的数据，实际可以根据需要做不同的处理。
步骤：
①安装插件：npm install axios qs -S
②utils下新建http.js：
import axios from "axios";
import qs from "qs";
const server=axios.create({
timeout:5000,
withCredentials:true
});
server.defaults.headers["content-type"]="application/json";// 默认请求的是json格式的，如果是get请求这句写不写都行，如果是post请求，不要写这句。如果是x-www格式的，需要设置请求头的content-type
// server.defaults.headers["content-type"]="application/x-www-from-urlencoded";
// 请求拦截
server.interceptors.request.use((config)=>{
console.log(config,"utils")
config.headers["authToken"]="xxxxx";// 请求头中添加token值
config.data=qs.stringify(config.data);// 用qs将data数据转成查询字符串（key=value&key=value）
return config;
});
// 响应拦截
server.interceptors.response.use((config)=>{
console.log(config,"utils----response")
switch(config.status){
case 200:
return config.data;
default:
break;
}
});
export default server;
③引入：
将 import axios from "axios"; 改为 import axios from "./utils/http.js";
### qs处理数据
将数据转换成查询字符串 key=value&key=value
安装：npm install qs
使用：
import qs from "qs";
qs.stringify();
### vue中async和await的使用
如果是脚手架可以直接使用async和await，自己配置的webpack中需要借助两个插件：
@babel/plugin-transform-runtime
@babel/runtime
步骤：
①安装插件：
npm i @babel/plugin-transform-runtime --save-dev
npm i @babel/runtime --save
②在目录的.babelrc中添加如下配置：
"plugins":["@babel/plugin-transform-runtime"]
③添加async和await：
created() {
let url="/maoyan/ajax/cinemaList";
axios.get(url,{params:{
cityId:10
}}).then((data)=>{
console.log(data)
});
}
改为：
async created() {
let url="/maoyan/ajax/cinemaList";
let data=await axios.get(url,{params:{
cityId:10
}});
console.log(data)
}
### 路由
前端路由：
根据用户请求不同的url来展示不同的页面或者数据，前端路由是不会涉及到后端请求的，以及页面不会进行刷新。用户体验比较好，一般用来做单页面开发（SPA）。前端路由底层原理：hashchange和H5的history API中的popState和replaceState来实现。
后端路由：
根据用户请求的路径来返回不同的数据或页面，后端路由一般情况下都是用来做接口的，通过ajax请求的路径来返回对应的数据。
使用流程：
①安装路由：npm install vue-router -S
②创建router/index.js文件（将vue和vue-router引入，组件引入，创建路由实例，将路由表routes【数组】和每个页面配置好）：
import Vue from "vue";
import VueRouter from "vue-router";
import Movie from "../pages/movie";
import Cinema from "../pages/cinema";
import Mine from "../pages/mine";
Vue.use(VueRouter);
let router=new VueRouter({
mode:"hash",
routes:[
{
path:"/movie",
component:Movie
},
{
path:"/cinema",
component:Cinema
},
{
path:"/mine",
component:Mine
}
]
});
export default router;
③main.js中将抛出的router引入，并挂载到vue实例中：
import router from "./router";
new Vue({
router,
render:h=>h(App)
}).$mount("#app");
④路由显示：在根组件App.vue中用<router-view></router-view>开辟一块空间用来显示不同的组件。此时在地址栏地址后面输入地址可以进入到对应的页面
⑤路由跳转：新建components/tabBar/index.vue，用<router-link></router-link> to属性将路径赋予到每个按钮
<router-link v-for="(item,index) in tabs" :key="index" :to="item.path">
<i class="iconfont" v-html="item.icon"></i>
<span>{{item.text}}</span>
</router-link>
### 路由常用的配置项
mode----路由的形式，默认是hash，另一种是history
routes----路由表（数组）
path----匹配路由的路径
components----路由匹配成功后显示对应的组件
### vue路由的内置组件
当我们将VueRouter挂载到vm实例身上时会多出2个内置组件
router-view----渲染路由匹配的组件
router-link----路由的跳转（底层原理是a标签，它属于内置组件自身会有一个to属性，这个属性是跳转的地址）
### vue中路由跳转的方式有哪些
1、<a></a>
2、router-link
3、编程式导航
好记性不如写博客
