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的Action 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%;
                background-color: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、编程式导航