Vue速成day07--数据请求

数据请求

1、配置代理

config/index.js中

 proxyTable: {
   "/api":{
     target:"http://localhost:3000",
     changeOrigin:true,
     pathRewrite:{
       "^/api":"http://localhost:3000"
     }
   }
 }

注意：配置完代理后要重启项目

2、axios 阿可信 阿可西奥斯河

1、安装

npm i axios --save

2、引入

import axios from "axios"

3、使用

// post请求
axios({
	url:"",
	method:"post",
	data:{}
}).then(res=>{

})
// get请求
axios({
	url:"",
	method:"get",
	params:{}
}).then(res=>{

})

3、axios封装

1、在util/request.js中

import axios from "axios"

// 登录接口
export const movie= () => {
  return axios({
    url: "/api/movieList",
    method: "get"
  })
}

2、在对应组件页面使用

import {movie} from "../util/request"

mounted() {
  movie().then(res=>{
    console.log(res);
    this.movies = res.data.data
  })
}

4、拦截器

// 请求拦截：组件发起请求,配置项先到了请求拦截,请求拦截可以修改请求配置,然后retur n的结果发送给后端
axios.interceptors.request.use( config =>{
  console.log("========此处是请求拦截器=========");
  console.log(config);
  console.log("==========拦截器结束============");

  // 获取身份信息
  var status = sessionStorage.getItem("status")
  if(status){
    config.status = status
  }
  return config
})


// 响应拦截：后端相应数据，先到响应拦截器，拦截器可以处理数据，return的数据就是给组件的数据
axios.interceptors.response.use((res)=>{
  console.log("========此处是响应拦截器=========");
  console.log(res);
  console.log("==========拦截器结束============");
  if(!res.data.isok){
    alert("请检查账号或密码")
  }
  return res
})

5、post请求BUG

post请求：如果后端接收不到你的数据，如果参数中接收不到文件。可以借助qs解决
1、安装

npm i qs --save

2、引入

import qs from "qs"

3、使用
3.1、针对于后端收不到数据

  return axios({
    url: "/api/login",
    method: "post",
    data: qs.stringify(user)
  })

3.2、针对于后端收不到文件

  var form = new FormData()
  for (let i in user) {
    form.append(i, user[i])
  }
  return axios({
    url: "/api/login",
    method: "post",
    data: form
  })

面试题

1. vue-router是什么？它有哪些组件？ 答：Vue Router 是 Vue.js 官方的路由管理器。 组件：router-link router-view 
2. vue-router有哪几种导航钩子？ 他们有哪些参数 
3. 怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 
4. Vue的路由实现：hash模式 和 history模式的区别？ 
5. $route和$router的区别？ $route路由信息 $router用来做路由跳转 
6.如何让css只在当前组件起作用？ 
7.如何实现路由懒加载 
8.在beforeRouteEnter可以使用this对象吗？ 
9.路由拦截如何实现？