vue中数据请求的详细过程、stylus预处理器

一.数据请求

1.axios定义

名称:爱可信,爱可信基金会

axios是基于Promise的ajax模块.通过http发起客户端请求.

2.安装

npm i axios --save

3.配置代理(跨域)

方式一:

config/index.js

// 设置跨域请求
    proxyTable: {
      "/api":{
        target:"http://localhost:3000",
        changeOrigin:true,//是否跨域,
        pathRewrite:{
          "^/api":"http://localhost:3000"
        }
      }
    },
重启项目:npm run dev

方式二:

//设置跨域
axios.defaults.baseURL = "http://localhost:3000"

条件:  后端允许跨域才能使用
后端设置跨域

//设置跨域
app.use(cors({
    origin:"*",
    credentials:true   //每次登陆都验证跨域请求,要不会每次报跨域错误
}));

4.axios语法

axios({
	method:'post',//请求的方式
	url:'',//请求的地址
	data:''
}).then(res=>{
	//做请求成功时候的操作,有数据操作数,没有数据操作页面
})

axios({
	method:'get',//请求的方式
	url:'',//请求的地址
	params:''
}).then(res=>{
	//做请求成功时候的操作,有数据操作数,没有数据操作页面
})

5.axios封装

utils/request.js

import axios from 'axios';

// 设置跨域请求
// axios.defaults.baseURL = "http://localhost:3000"


// 设置登录请求
export const getLogin = (data)=>{
 return  axios({
    method:'post',
    url:'/api/login',//http://localhost:3000/login
    data:data
  })
}


// 获取电影列表
export const getMovie = ()=>{
  return axios({
    method:'get',
    url:'/api/movie'
  })
}


// 获取电影详情
export const getMovieDetail = (params)=>{
  return axios({
    method:'get',
    url:'/api/getMovieDetail',
    params:params
  })
}

6.登录的请求方式

// 设置登录请求  没有文件的普通形式传参
export const getLogin = (data)=>{
  console.log(qs.stringify(data));//将我们的数据转化成后端需要的拼接的形式
 return  axios({
    method:'post',
    url:baseUrl+'/login',//http://localhost:3000/login
    data:qs.stringify(data)
  })
}


// 有文件的普通形式传参
export const getLogin = (data)=>{
  var form = new FormData();
  form.append({'name':'root'})
  form.append({'pass':'123'})
 return  axios({
    method:'post',
    url:baseUrl+'/login',//http://localhost:3000/login
    data:form
  })
}

7.拦截器

• 响应拦截器

// 响应拦截器, 后端返回给前端的数据在此处拦截处理
axios.interceptors.response.use(res=>{
  console.group('==响应拦截器==')
  if(!res.data.isok){
    alert(res.data.info)
    return
  }
  console.log(res);
  return res;
})

• 请求拦截器

// 请求拦截器  发起请求时需要带着一个令牌进行访问,如果没有该令牌,则拦截,如果有该令牌则放行,向后端发起请求/
axios.interceptors.request.use(config=>{
  console.group("==请求拦截器==")
  if(config.method.toUpperCase() === 'GET'){
      // 设置一个令牌
      // config.params.token = {}
      // config.params.token = {id:1};
  }
  // console.log(config);
  return config
})

二.stylus

1.定义

定义:是css预处理器

2.安装

cnpm i stylus stylus-loader@3.0.2 --save

3.使用

<style lang="stylus">
@import './stylus/index.styl'
.h1
  color $primary-color
.h2
  color $danger-color
.btn
  color $warning-color

</style>