Vue_Study07_ 字节宝

Get新知识:

axios 的使用

axios 是一个基于promise 的网络请求库，可以用于浏览器和node.js。

从node.js中创建http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF
浏览器中创建XMLHttpRequests

简单使用

代码语言：javascript复制

<script type="text/javascript" src="../vue_js/axios.min.js"></script>
<script type="text/javascript">
    // data 是axios 提供的api方法，必须通过data 方法获取到接口的具体数据
    axios.get('http://127.0.0.1:5000/api/data/demo').then(function(data){
        console.log(data.data);
    })
    .catch(function (error) {
        console.log(error);
    });
</script>

axios对象调用get方法，.then()成功回调，.catch()失败回调。 get方法也可以把url中的参数提出来单独放到一个对象中。

axios 传递参数

get 传参

注意的是使用params 和 ?id=xxx 传递参数的方式，在后台接受参数时一个是通过 params 来获取一个是通过query 来获取。

delete 传参

delete 的传参跟 get 基本没什么区别。

post 请求

代码语言：javascript复制

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

上面的请求方式是将数据以 json 格式将数据发送到后端，axios 也可以将数据以普通的表单数据提交到后台。

代码语言：javascript复制

var params = new URLSearchParams();
params.append('uanme', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:5000/api/demo', params)
.then(function(ret) {
	console.log(ret.data);
})

通过上面的方式则是将数据以普通表单数据提交到后端。 put 传参跟post 传参以上类似。

拦截器

axiso 提供了请求拦截器即在每个请求发出前都会被请求拦截器捕获并进行一些操作，以及响应拦截器即每个请求的响应在执行then或catch 前拦截并进行一些操作。

代码语言：javascript复制

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 响应拦截器
axios.interceptors.response.use(function(res) {
  // 在响应返回到程序前一些操作
    var data = res.data;
    return data;
}, function(error){
    console.log(error);
});

创建axios 的实例对象

可以使用自定义配置新建一个 axios 实例axios.create([config])

代码语言：javascript复制

//create创建一个新的实例对象
var instance = axios.create({
   url: 'http://jsonplaceholder.typicode.com/users',
   imeout: 3000,
   method: 'post'
});
//即可调用方法，和axios实例同
instance.get('http://jsonplaceholder.typicode.com/users').then(Response=>{
   console.log(Response);
});

全部的配置信息

代码语言：javascript复制

{
  // `url` 是用于请求的服务器 URL
  url: '/user',
  // `method` 是创建请求时使用的方法
  method: 'get', // 默认是 get
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],
  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },
  // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // 默认的
  // `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },
  // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
  // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // 默认的
  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default
  // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
  // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

async/await 语法

使用 async 和 await 可以进行异步的操作，就可以使用async 和 await 进行异步请求。

简单使用

多个异步请求处理。

请求的顺序会按照定义的await 顺序进行执行。

vue-router 的使用

Vue Router 是 vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

vue-router 的使用步骤

vue-router 的简单使用

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo_06</title>
</head>

<body>
    <div id="app">
      	// 添加路由链接，也就是添加router-link 标签，并且为to 属性绑定赋值
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>
				// 添加路由填充位，即定义router-view
        <router-view></router-view>
    </div>
</body>
// 1. 引入相关库文件，注意 vue.js 的引入要先于vue-router.js
// 因为vue-router.js 有些内部需要依赖于vue.js
<script type="text/javascript" src="../vue_js/vue.js"></script>
<script type="text/javascript" src="../vue_js/vue-router.js"></script>
<script type="text/javascript">
  // 定义路由组件，这些组件将被渲染
    const User = {
        template: '<h1>User 组件</h1>'
    };

    const Register = {
        template: '<h1>Register 组件</h1>'
    };
	// 配置路由规则并创建路由实例 即 新建VueRouter 实例对象，并且为routes 属性进行赋值
  // routes 中需要配置全部的路由信息，path 中的值需要和路由链接的to属性值对应保持一致，componment则是组件名
    const router = new VueRouter({
        routes: [{
                path: '/user',
                component: User
            },
            {
                path: '/register',
                component: Register
            }
        ]
    });
	// 将路由挂载到Vue 跟实例上， 将为vue 的router 属性赋值VueRouter 实例对象。
    const vm = new Vue({
        el: "#app",
        data: {},
        router: router
    });
</script>

</html>

路由重定向

重定向，只需要在实例化VueRouter 对象的routes 属性配置新的route 信息，path 选择原始路径，使用redirect 代替componment 指定跳转之后的路径。

嵌套路由

嵌套路由可用于满足嵌套组件的路由解决。

代码语言：javascript复制

    const Register = {
        template: `
        <div>
            <h1>Register 组件</h1>
            <hr/>
            <!-- 子路由链接 -->
            <router-link to="/register/tab1">tab1</router-link>
            <router-link to="/register/tab2">tab2</router-link>

            <router-view></router-view>
        </div>
        `
    };

    const Tab1 = {
        template: "<h3>Tab1 组件</h3>"
    }

    const Tab2 = {
        template: "<h3>Tab2 组件</h3>"
    }

    const router = new VueRouter({
        routes: [{
                path: '/user',
                component: User
            },
            {
                path: '/register',
                component: Register,
                children: [{
                    path: '/register/tab1',
                    component: Tab1
                },
                {
                    path: '/register/tab2',
                    component: Tab2
                }
            ]
            },
            {
                path: '/',
                redircet: '/user'
            }
        ]
    });

嵌套路由主要就是需要先定义好子组件，并且在父组件中定义好子组件的路由链接和路由填充位。然后再配置路由规则时通过父组件的children 的属性来配置子组件的路由规则即可。