19: vue項目使用整理

時間 2019-12-04

標籤 vue 項目使用整理简体版

原文原文鏈接

1.1 axios 基本用法

　　安裝：npm install axios -S # 也可直接下載axios.min.js文件html

　　一、axios藉助Qs對提交數據進行序列化vue

　　　　　　axios參考博客：https://www.jianshu.com/p/68d81da4e1adwebpack

　　　　 http://www.javashuo.com/article/p-kdalepwl-x.htmlios

　　　　　　axios官網：https://www.npmjs.com/package/axios web

<!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(){
          // 一、發送get請求
          axios({
            url: 'http://127.0.0.1:8000/data/',                 //一、請求地址
            method: 'get',                                        //二、請求方法
            params: {ids: [1,2,3],type: 'admin'},                //三、get請求參數

            paramsSerializer: params => {                          //四、可選函數、序列化`params`
              return Qs.stringify(params, { indices: false })
            },
            responseType: 'json',                                //五、返回默認格式json
            headers: {'authorization': 'xxxtokenidxxxxx'},     //六、認證token
          })
          // 二、回調函數
          .then(resp => {
            console.log(resp.data);
          })
          // 三、捕獲異常
          .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(){
          // 一、發送post請求
          axios({
            url: 'http://127.0.0.1:8000/data/',             //一、請求地址
            method: 'post',                                  // 二、請求方法
            data: Qs.stringify(                               //三、可選函數、序列化`data`
              {ids: [1,2,3],type: 'admin'},                  //四、提交數據
              { indices: false }                             // indices: false
            ),
            responseType: 'json',                           //五、返回默認格式json
            headers: {'authorization': 'xxxtokenidxxxxx'},//六、身份驗證token
        })
        // 二、回調函數
        .then(resp => {
          console.log(resp.data);
        })
        // 三、捕獲異常
        .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後端測試接口

#一、qs用途：  在 axios中，利用QS包裝data數據 #二、安 裝:  npm install qs -S #三、常見用法：
''' import Qs from 'qs'; Qs.stringify(data); Qs.parse(data) '''

　　二、axios上傳文件ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>發送axios請求</title>
</head>
<body>
<div id="itany">
    <input type="file" name="fileUpload" id="fileUp" @change="change($event)" ref="inputFile" >

    <button @click="sendPost">POST方式發送axios請求</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(){
                    // 一、發送post請求
                    var data = new FormData();
                    data.append("fafafa",this.file)  // 圖片對象
                    data.append("username","zhangsan")  // 其餘key-value值
                    axios({
                        url: 'http://127.0.0.1:8000/data/',             //一、請求地址
                        method: 'post',                                  //二、請求方法
                        data: data,                                       //三、提交的數據
                        responseType: 'json',                           //四、返回默認格式json
                        headers: {'authorization': 'xxxtokenidxxxxx'},//五、身份驗證token
                    })
                    // 二、回調函數
                    .then(resp => {
                        console.log(resp.data);
                    })
                    // 三、捕獲異常
                    .catch(err => {
                        console.log('請求失敗：'+err.status+','+err.statusText);
                    });
                },
                change:function(event){
                    this.file = event.target.files[0]
                },
            },
        });
    }
</script>
</body>
</html>

test.html

def data(request):
    if request.method == 'GET':
        data = {
            'id':1,
            'name': 'zhangsan'
        }
        return HttpResponse(json.dumps(data))
    elif request.method == 'POST':
        username = request.POST.get('username')
        fafafa = request.FILES.get('fafafa')
        print(username, fafafa)

        with open(fafafa.name, 'wb') as f:
            for item in fafafa.chunks():
                f.write(item)
        ret = {'code': True, 'data': request.POST.get('username')}
        data = {
            'id':1,
            'name': 'zhangsan',
            'method': 'POST'
        }
        return HttpResponse(json.dumps(data))

views.py

1.2 封裝axios發送請求 & 添加攔截器

　　 參考：https://blog.csdn.net/qq_40128367/article/details/82735310vuex

　　一、初始化vue項目npm

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

　　二、封裝axios（建立 src/api 文件夾）json

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) =>{
    // 一、發送get請求
    instance({
      url: url,                     //一、請求地址
      method: 'get',                //二、請求方法
      params: params,                //三、get請求參數
      headers: {
        'Content-Type': 'application/json'
      },
      paramsSerializer: params => {                          //四、可選函數、序列化`params`
        return Qs.stringify(params, { indices: false })
      },
    })
    // 二、回調函數
      .then(res => {
        resolve(res.data);
      })
      // 三、捕獲異常
      .catch(err => {
        reject(err.data)
      });

  });
}

/* 2. 發送POST請求 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    instance({
      url: url,             //一、請求地址
      method: 'post',                                  // 二、請求方法
      data: Qs.stringify(                               //三、可選函數、序列化`data`
        params,                  //四、提交數據
        { indices: false }                             // indices: false
      ),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      },
    })
    // 二、回調函數
      .then(res => {
        resolve(res.data);
      })
      // 三、捕獲異常
      .catch(err => {
        reject(err.data)
      })
  });
}

src\api\ajax.js 封裝axios請求

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

//一、使用自定義配置新建一個 axios 實例
const instance = Axios.create({
  baseURL: URLS.API_URL,
  responseType: 'json',
});

//二、添加請求攔截器：每次發送請求就會調用此攔截器，添加認證token
instance.interceptors.request.use(
  config => {
    //發送請求前添加認證token，
    config.headers.Authorization = sessionStorage.getItem('token')
    return config
  },
  err => {
    return Promise.reject(err)
  });

// 三、響應攔截器
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 Vuex from 'vuex'
import * as api from '../api/api'

Vue.use(Vuex);

export default new Vuex.Store({
    modules:{
        api
    }
});

src\store\index.js 全局導出路由方法變量

import Vue from 'vue'
import App from './App'
import router from './router'
import NProgress from 'nprogress'
import store from './store/index'

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,
  store,
  components: { App },
  template: '<App/>'
})

main.js 使用鉤子函數進行路由控制

　　三、使用封裝的axios發送請求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 導入路由請求方法測試請求數據

　　四、若是須要上傳圖片或文件 src\api\ajax.js 中傳入的 params參數不可以使用Qs序列化

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) {
    var isFormData = Object.prototype.toString.call(params) === '[object FormData]'
    var data = '';  // 若是是上傳文件傳入的 params是一個 FormData對象，不要用Qs序列化
    if(isFormData){
        data = params
    }else {
        data = Qs.stringify(                               //3、可選函數、序列化`data`
            params,                                        //4、提交數據
            { indices: false }                            // indices: false
        )
    }
    return new Promise((resolve, reject) => {
        instance({
            url: url,             //1、請求地址
            method: 'post',                                  // 2、請求方法
            data: data,
            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請求(須要上傳圖片)

<template>
    <div id="itany">
        <input type="file" name="fileUpload" id="fileUp" @change="change($event)" ref="inputFile" >

        <button @click="sendPost">POST方式發送axios請求</button>
    </div>
</template>

<script>
    import { createGoods } from '../../api/api'
    export default {
        data() {
            return {}
        },
        methods: {
            sendPost(){
                // 1、發送post請求
                var data = new FormData();
                data.append("fafafa",this.file)  // 圖片對象
                data.append("username","zhangsan")  // 其餘key-value值
                createGoods(data)
                // 2、回調函數
                    .then(resp => {
                        console.log(resp);
                    })
                    // 3、捕獲異常
                    .catch(err => {
                        console.log('請求失敗：'+err.status+','+err.statusText);
                    });
            },
            change:function(event){
                this.file = event.target.files[0]
            },
        }
    }
</script>

<style scoped>

</style>

Goods.vue 上傳圖片測試

def data(request):
    if request.method == 'GET':
        token_id = request.META.get('HTTP_AUTHORIZATION')  # header中的tokenid
        data = {'id':1,'name': 'zhangsan'}
        return HttpResponse(json.dumps(data))
    elif request.method == 'POST':
        username = request.POST.get('username')
        fafafa = request.FILES.get('fafafa')
        with open(fafafa.name, 'wb') as f:
            for item in fafafa.chunks():
                f.write(item)
        ret = {'code': True, 'data': request.POST.get('username')}
        data = {'id':1,'name': 'zhangsan','method': 'POST'}
        return HttpResponse(json.dumps(data))

views.py

11111111111111

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。