19: vue项目使用整理

时间：2019-06-15 16:52:58 阅读：113 评论：0 收藏：0 [点我收藏+]

1.1 axios 基本用法

　　安装：npm install axios -S # 也可直接下载axios.min.js文件

　　1、axios借助Qs对提交数据进行序列化

　　　　　　axios参考博客：https://www.jianshu.com/p/68d81da4e1ad

　　　　 https://www.cnblogs.com/yiyi17/p/9409249.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
  <button @click="sendGet">GET方式发送AJAX请求</button>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
  window.onload=function(){
    new Vue({
      el:‘#itany‘,
      data:{
        uid:‘‘
      },
      methods:{
        sendGet(){
          // 1、发送get请求
          axios({
            url: ‘http://127.0.0.1:8000/data/‘,                 //1、请求地址
            method: ‘get‘,                                        //2、请求方法
            params: {ids: [1,2,3],type: ‘admin‘},                //3、get请求参数

            paramsSerializer: params => {                          //4、可选函数、序列化`params`
              return Qs.stringify(params, { indices: false })
            },
            responseType: ‘json‘,                                //5、返回默认格式json
            headers: {‘authorization‘: ‘xxxtokenidxxxxx‘},     //6、认证token
          })
          // 2、回调函数
          .then(resp => {
            console.log(resp.data);
          })
          // 3、捕获异常
          .catch(err => {
            console.log(‘请求失败：‘+err.status+‘,‘+err.statusText);
          });
        }

      }
    });
  }
</script>
</body>
</html>

get：axios发送get请求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
  <button @click="sendPost">POST方式发送AJAX请求</button>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
  window.onload=function(){
    new Vue({
      el:‘#itany‘,
      data:{
        uid:‘‘
      },
      methods:{
        sendPost(){
          // 1、发送post请求
          axios({
            url: ‘http://127.0.0.1:8000/data/‘,             //1、请求地址
            method: ‘post‘,                                  // 2、请求方法
            data: Qs.stringify(                               //3、可选函数、序列化`data`
              {ids: [1,2,3],type: ‘admin‘},                  //4、提交数据
              { indices: false }                             // indices: false
            ),
            responseType: ‘json‘,                           //5、返回默认格式json
            headers: {‘authorization‘: ‘xxxtokenidxxxxx‘},//6、身份验证token
        })
        // 2、回调函数
        .then(resp => {
          console.log(resp.data);
        })
        // 3、捕获异常
        .catch(err => {
          console.log(‘请求失败：‘+err.status+‘,‘+err.statusText);
        });
        }
      }
    });
  }
</script>
</body>
</html>

post: axios发送post请求

def data(request):
    if request.method == ‘GET‘:
        token_id = request.META.get(‘HTTP_AUTHORIZATION‘)  # header中的tokenid
        print(request.GET.getlist(‘ids‘))                   # 获取get请求中列表
        data = {
            ‘id‘:1,
            ‘name‘: ‘zhangsan‘
        }
        return HttpResponse(json.dumps(data))
    elif request.method == ‘POST‘:
        token_id = request.META.get(‘HTTP_AUTHORIZATION‘)  # header中的tokenid
        print(request.POST.getlist(‘ids‘))                  # 获取post请求中的列表
        data = {
            ‘id‘:1,
            ‘name‘: ‘zhangsan‘,
            ‘method‘: ‘POST‘
        }
        return HttpResponse(json.dumps(data))

views.py后端测试接口

#1、qs用途：  在 axios中，利用QS包装data数据
#2、安 装:    npm install qs -S
#3、常见用法：
‘‘‘
import Qs from ‘qs‘;
Qs.stringify(data);
Qs.parse(data)
‘‘‘

1.2 封装axios发送请求 & 添加拦截器

　　1、初始化vue项目

# vue init webpack deaxios
# npm install axios -S
# cnpm install vuex -S
# cnpm install vant -S
# cnpm install nprogress -S

　　2、封装axios（创建 src/api 文件夹）

export default {
  // api请求地址
  API_URL: ‘http://127.0.0.1:8000/‘
}

config\urls.js 配置全局url变量

import Qs from ‘qs‘
import instance from ‘./axiosinstance‘  // 导入自定义 axios 实例
// import instance from ‘axios‘           // 也可以直接使用原生 axios 实例，但无法添加拦截器

/* 1. 发送GET请求 */
export function get(url, params){
  return new Promise((resolve, reject) =>{
    // 1、发送get请求
    instance({
      url: url,                     //1、请求地址
      method: ‘get‘,                //2、请求方法
      params: params,                //3、get请求参数
      headers: {
        ‘Content-Type‘: ‘application/json‘
      },
      paramsSerializer: params => {                          //4、可选函数、序列化`params`
        return Qs.stringify(params, { indices: false })
      },
    })
    // 2、回调函数
      .then(res => {
        resolve(res.data);
      })
      // 3、捕获异常
      .catch(err => {
        reject(err.data)
      });

  });
}

/* 2. 发送POST请求 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    instance({
      url: url,             //1、请求地址
      method: ‘post‘,                                  // 2、请求方法
      data: Qs.stringify(                               //3、可选函数、序列化`data`
        params,                  //4、提交数据
        { indices: false }                             // indices: false
      ),
      headers: {
        ‘Content-Type‘: ‘application/x-www-form-urlencoded;charset=UTF-8‘
      },
    })
    // 2、回调函数
      .then(res => {
        resolve(res.data);
      })
      // 3、捕获异常
      .catch(err => {
        reject(err.data)
      })
  });
}

src\api\ajax.js 封装axios请求

import Axios from ‘axios‘
import { Toast } from ‘vant‘;
import URLS from ‘../../config/urls‘

//1、使用自定义配置新建一个 axios 实例
const instance = Axios.create({
  baseURL: URLS.API_URL,
  responseType: ‘json‘,
});

//2、添加请求拦截器：每次发送请求就会调用此拦截器，添加认证token
instance.interceptors.request.use(
  config => {
    //发送请求前添加认证token，
    config.headers.Authorization = sessionStorage.getItem(‘token‘)
    return config
  },
  err => {
    return Promise.reject(err)
  });

// 3、响应拦截器
instance.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是200的情况
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
          router.replace({
            path: ‘/login‘,
            query: { redirect: router.currentRoute.fullPath }
          });
          break;
        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          Toast({
            message: ‘登录过期，请重新登录‘,
            duration: 1000,
            forbidClick: true
          });
          // 清除token
          localStorage.removeItem(‘token‘);
          store.commit(‘loginSuccess‘, null);
          // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
          setTimeout(() => {
            router.replace({
              path: ‘/login‘,
              query: {
                redirect: router.currentRoute.fullPath
              }
            });
          }, 1000);
          break;
        // 404请求不存在
        case 404:
          Toast({
            message: ‘网络请求不存在‘,
            duration: 1500,
            forbidClick: true
          });
          break;
        // 其他错误，直接抛出错误提示
        default:
          Toast({
            message: error.response.data.message,
            duration: 1500,
            forbidClick: true
          });
      }
      return Promise.reject(error.response);
    }
  }
);

export default instance

src\api\axiosinstance.js 自定义axios 实例

import * as api from ‘./api‘

export default api

src\api\index.js 导出api模块

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import NProgress from ‘nprogress‘

Vue.config.productionTip = false

/*  定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数 */
router.afterEach(transition => {
  setTimeout(() => {
    NProgress.done()
  })
})

window.APP_INFO = process.env.APP_INFO

router.beforeEach((to, from, next) => {
  /*
  * to: router即将进入的路由对象
  * from: 当前导航即将离开的路由
  * next: 进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
  * */
  NProgress.start()
  // 使用假数据模拟张三已经登录
  localStorage.setItem(‘user‘, JSON.stringify({‘username‘:‘zhangsan‘}) )
  if (to.path === ‘/login‘) {
    localStorage.removeItem(‘user‘)
  }
  let user = JSON.parse(localStorage.getItem(‘user‘))
  if (!user && to.path !== ‘/login‘) {  // 如果用户没有登录，且访问url不是 ‘/login‘ 调整到登录页
    next({ path: ‘/login‘ })
  } else {
    next()
  }
})
/*  拦截器介绍位置 */


/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

main.js 使用钩子函数进行路由控制

　　3、使用封装的axios发送请求

import URLS from ‘../../config/urls‘
import { get, post } from ‘./ajax‘
let base = URLS.API_URL

// 用户相关
export const postLogin = p => post(`${base}/login/`, p);
export const getLogin = p => get(`${base}/login/`, p);

src\api\api.js 定义请求路由方法

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  import { postLogin,getLogin } from ‘./api/api‘  // 导入路由请求方法
  export default {
    name: ‘App‘,
    created () {
      this.testGet();
      this.testPost();
    },
    methods: {
      // 获取数据
      testPost() {
        // 调用api接口，并且提供了两个参数
        postLogin({
          type: 0,
          sort: 1,
          lst:[1,2,3,4,5]
        }).then(res => {
          // 获取数据成功后的其他操作
          console.log(res,1111111)
        }).catch(
        )
      },

      testGet() {
        // 调用api接口，并且提供了两个参数
        getLogin({
          type: 0,
          sort: 1,
          lst:[1,2,3,4,5]
        }).then(res => {
          // 获取数据成功后的其他操作
          console.log(res,22222222222222)
        }).catch(
        )
      },
    }
  }
</script>

App.vue 导入路由请求方法测试请求数据

11111111111111

19: vue项目使用整理

原文：https://www.cnblogs.com/xiaonq/p/11027880.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)