1. 安裝vue項目 npm init webpack project

2 安裝iview npm i iview --save (這里是結合iview框架使用的 可根據自己的需求安裝 當然也可以不安裝)

3 在src目錄下建一個utils文件夾 里面需要放5個js 都是封裝好的js文件 功能不僅僅局限于加密 可以研究一下 你會學到很多東西

1.api.js

/** * 為vue實例添加http方法 * Vue.use(http) */import http from ’./http’ export default { /** * install鉤子 * @param {Vue} Vue Vue */ install (Vue) { Vue.prototype.http = http }}

2. filters.js

// 公共使用的filtersimport Vue from ’vue’;import {getTime, getPrdType} from ’../utils/time’; // 區分支付方式的filterVue.filter(’paywayType’, function (value) { return value;}); // 時間Vue.filter(’newdate’, function (value) { return getTime(value);});// 時間-分鐘Vue.filter(’minute’, function (str, n) { const num = parseInt(n); return str.split(’ ’)[num];});// 分割以：連接多個參數的stringVue.filter(’valStr’, function (str, n) { const num = parseInt(n); return str.split(’:’)[num];});// 根據提供時間計算倒計時Vue.filter(’countDown’, function (str) { const dateStr = new Date(str).getTime(); const timeNow = new Date().getTime(); const countDown = dateStr - timeNow; const countDownDay = Math.floor((dateStr - timeNow) / 86400000);// 計算剩余天數 const countDownHour = Math.floor((dateStr - timeNow) / 3600000 % 24);// 計算剩余小時 const countDownMin = Math.floor((dateStr - timeNow) / 60000 % 60);// 計算剩余分鐘 // const countDownSec = Math.floor((dateStr - timeNow) / 1000 % 60);// 計算剩余秒 if (countDown <= 0) { return ’- - - -’; } else { return countDownDay + ’天’ + countDownHour + ’小時’ + countDownMin + ’分鐘’; }});// 取絕對值Vue.filter(’numberFn’, function (numberStr) { return Math.abs(numberStr);});// 處理圖片地址的filterVue.filter(’imgSrc’, function (src) { const env = getPrdType(); switch (env) { case ’pre’: return `https://preres.bldz.com/${src}`; case ’pro’: return `https://res.bldz.com/${src}`; case ’test’: default: return `https://testimg.bldz.com/${src}`; }});// 直接轉化剩余時間Vue.filter(’dateShow’, function (dateStr) { const countDownDay = Math.floor(dateStr / 86400);// 計算剩余天數 const countDownHour = Math.floor(dateStr / 3600 % 24);// 計算剩余小時 const countDownMin = Math.floor(dateStr / 60 % 60);// 計算剩余分鐘 // const countDownSec = Math.floor((dateStr - timeNow) / 1000 % 60);// 計算剩余秒 if (dateStr <= 0) { return ’- - - -’; } else if (countDownDay <= 0 && countDownHour <= 0) { return countDownMin + ’分鐘’; } else if (countDownDay <= 0) { return countDownHour + ’小時’ + countDownMin + ’分鐘’; } else { return countDownDay + ’天’ + countDownHour + ’小時’ + countDownMin + ’分鐘’; }});// 處理圖片Vue.filter(’imgLazy’, function (src) { return { src, error: ’../static/images/load-failure.png’, loading: ’../static/images/default-picture.png’ };});Vue.filter(’imgHandler’, function (src) { return src.replace(/,jpg/g, ’.jpg’);});

3.http.js

import axios from ’axios’import utils from ’../utils/utils’import {Modal} from ’iview’// import qs from ’qs’;axios.defaults.timeout = 1000*60axios.defaults.baseURL = ’’const defaultHeaders = { Accept: ’application/json, text/plain, */*; charset=utf-8’, ’Content-Type’: ’application/json; charset=utf-8’, Pragma: ’no-cache’, ’Cache-Control’: ’no-cache’}// 設置默認頭Object.assign(axios.defaults.headers.common, defaultHeaders) const methods = [’get’, ’post’, ’put’, ’delete’] const http = {}methods.forEach(method => { http[method] = axios[method].bind(axios)})export default httpexport const addRequestInterceptor = axios.interceptors.request.use.bind(axios.interceptors.request)// request前自動添加api配置addRequestInterceptor( (config) => { if (utils.getlocal(’token’)) { // 判斷是否存在token，如果存在的話，則每個http header都加上token config.headers.Authentication = utils.getlocal(’token’) } // config.url = `/api${config.url}` return config }, (error) => { return Promise.reject(error) }) export const addResponseInterceptor =axios.interceptors.response.use.bind(axios.interceptors.response)addResponseInterceptor( (response) => { // 在這里統一前置處理請求響應 if (Number(response.status) === 200) { // 全局notify有問題，還是自己處理吧 // return Promise.reject(response.data) // window.location.href = ’./’ // this.$router.push({ path: ’./’ }) } return Promise.resolve(response.data) }, (error) => { if (error.response) { const title = ’溫馨提示’; const content = ’<p>登錄過期請重新登錄</p>’ switch (error.response.status) { case 401: // 返回 401 跳轉到登錄頁面 Modal.error({ title: title, content: content, onOk: () => { localStorage.removeItem('lefthidden') localStorage.removeItem('leftlist') localStorage.removeItem('token') localStorage.removeItem('userInfo') localStorage.removeItem('headace') localStorage.removeItem('sideleft') utils.delCookie('user'); window.location.href = ’./’ } }) break } } return Promise.reject(error || ’出錯了’) })

4. time.js

// 常用的工具api const test = ’test’;const pre = ’pre’;const pro = ’pro’; export function judeType (param, typeString) { if (Object.prototype.toString.call(param) === typeString) return true; return false;}; export function isPrd () { return process.env.NODE_ENV === ’production’;}; export function getPrdType () { return ENV;}; export const ls = { put (key, value) { if (!key || !value) return; window.localStorage[key] = JSON.stringify(value); }, get (key) { if (!key) return null; const tem = window.localStorage[key]; if (!tem) return null; return JSON.parse(tem); }, // 設置cookie setCookie (key, value, time) { if (time) { let date = new Date(); date.setDate(date.getDate() + time); document.cookie = key + ’=’ + value + ’;expires=’ + date.toGMTString() + ’;path=/’; } else { document.cookie = key + ’=’ + value + ’;path=/’; } }, // 獲取cookie getCookie (key) { let array = document.cookie.split(’; ’); array.map(val => { let [valKey, value] = val.split(’=’); if (valKey === key) { return decodeURI(value); } }); return ’’; }}; /** * 判斷元素有沒有該class * @param {*} el * @param {*} className */ export function hasClass (el, className) { let reg = new RegExp(’(^|s)’ + className + ’(s|$)’); return reg.test(el.className);}/** * 為元素添加class * @param {*} el * @param {*} className */export function addClass (el, className) { if (hasClass(el, className)) return; let newClass = el.className.spilt(’ ’); newClass.push(className); el.className = newClass.join(’ ’);} export function removeClass (el, className) { if (!hasClass(el, className)) return; let reg = new RegExp(’(^|s)’ + className + ’(s|$)’, ’g’); el.className = el.className.replace(reg, ’ ’);} /** * 將數據存儲在標簽里 * @param {*} el * @param {*} name * @param {*} val */export function getData (el, name, val) { let prefix = ’data-’; if (val) { return el.setAttribute(prefix + name, val); } return el.getAttribute(prefix + name);} export function isIphone () { return window.navigator.appVersion.match(/iphone/gi);} /** * 計算元素和視窗的位置關系 * @param {*} el */export function getRect (el) { if (el instanceof window.SVGElement) { let rect = el.getBoundingClientRect(); return { top: rect.top, left: rect.left, width: rect.width, height: rect.height }; } else { return { top: el.offsetTop, left: el.offsetLeft, width: el.offsetWidth, height: el.offsetHeight }; }} /** * 獲取不確定數據的方法api * @param {Array} p 參數數組 * @param {Object} o 對象 */export function getIn (p, o) { return p.reduce(function (xs, x) { return (xs && xs[x]) ? xs[x] : null; }, o);} /** * 時間戳改為年月日格式時間 * @param {*} p 時間戳 */export function getTime (p) { let myDate = new Date(p); let year = myDate.getFullYear(); let month = myDate.getMonth() + 1; let date = myDate.getDate(); if (month >= 10) { month = ’’ + month; } else { month = ’0’ + month; } if (date >= 10) { date = ’’ + date; } else { date = ’0’ + date; } return year + ’-’ + month + ’-’ + date;} export function debounce (method, delay) { let timer = null; return function () { let context = this; let args = arguments; clearTimeout(timer); timer = setTimeout(function () { method.apply(context, args); }, delay); };}

5 utils.js

// 獲取cookie、export function getCookie (name) { if (document.cookie.length > 0){ let c_start = document.cookie.indexOf(name + ’=’) if (c_start != -1) { c_start = c_start + name.length + 1 let c_end = document.cookie.indexOf(’;’, c_start) if (c_end == -1) c_end = document.cookie.length return unescape(document.cookie.substring(c_start, c_end)) } } return ’’}// 設置cookie,增加到vue實例方便全局調用export function setCookie (cname, value, expiredays) { let exdate = new Date() exdate.setDate(exdate.getDate() + expiredays) document.cookie = cname + ’=’ + escape(value) + ((expiredays == null) ? ’’ : ’;expires=’ + exdate.toGMTString())}// 刪除cookieexport function delCookie (name) { let exp = new Date() exp.setTime(exp.getTime() - 1) let cval = getCookie(name) if (cval != null) { document.cookie = name + ’=’ + cval + ’;expires=’ + exp.toGMTString() }}// 設置localstorageexport function putlocal (key, value) { if (!key || !value) return window.localStorage[key] = JSON.stringify(value)}// 獲取localstorageexport function getlocal (key) { if (!key) return null const tem = window.localStorage[key] if (!tem) return null return JSON.parse(tem)}/** * use_iframe_download function - 通過 iframe 下載文件 * * @param {String} download_path 需下載文件的鏈接 * @return {Void} */export const use_iframe_download = download_path => { const $iframe = document.createElement(’iframe’) $iframe.style.height = ’0px’ $iframe.style.width = ’0px’ document.body.appendChild($iframe) $iframe.setAttribute(’src’, download_path) setTimeout(function () { $iframe.remove() }, 20000)} function requestTimeout (xhr) { const timer = setTimeout(() => { timer && clearTimeout(timer) xhr.abort() }, 5000) return timer}// 導出export function exporttable (httpUrl,token, formData, callback) {let i = formData.entries(); let param = '?Authentication='+token; do{ var v = i.next(); if(!v.done){ param+='&'+v.value[0]+'='+v.value[1]; } }while(!v.done);// console.log(param);window.open(httpUrl+param)// var xhr = new XMLHttpRequest()// if (xhr.withCredentials === undefined){ // return false// };// xhr.open('post', httpUrl)// // xhr.timeout=5000// xhr.setRequestHeader('Authentication', token)// xhr.responseType = 'blob'// let timer = requestTimeout(xhr)// xhr.onreadystatechange = function () {// timer && clearTimeout(timer)// if (xhr.readyState !== 4) {// timer = requestTimeout(xhr)// return// }// if (this.status === 200) {// var blob = this.response// var contentType = this.getResponseHeader(’content-type’)// var fileName = contentType.split(';')[1].split('=')[1]// fileName = decodeURI(fileName)// let aTag = document.createElement(’a’)// // 下載的文件名// aTag.download = fileName// aTag.href = URL.createObjectURL(blob)// aTag.click()// URL.revokeObjectURL(blob)callback && callback(true)// } else {// callback && callback(false)// } // }// xhr.send(formData);} // 獲取當前時間export function getNowFormatDate() { var date = new Date(); var seperator1 = '-'; var seperator2 = ':'; var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = '0' + month; } if (strDate >= 0 && strDate <= 9) { strDate = '0' + strDate; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + ' ' + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds(); return currentdate;} // 時間格式化export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + ’’).substr(4 - RegExp.$1.length)); } let o = { ’M+’: date.getMonth() + 1, ’d+’: date.getDate(), ’h+’: date.getHours(), ’m+’: date.getMinutes(), ’s+’: date.getSeconds() }; for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ’’; fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); } } return fmt;}; function padLeftZero(str) { return (’00’ + str).substr(str.length);}export default { getCookie, setCookie, delCookie, putlocal, getlocal, exporttable, getNowFormatDate, formatDate}

4.配置main.js

import Vue from ’vue’import App from ’./App’import router from ’./router’import VueRouter from ’vue-router’;import iView from ’iview’;import ’iview/dist/styles/iview.css’import http from ’./utils/http’import Api from ’./utils/api’import utils from ’./utils/utils’import ’./utils/filters’ Vue.config.productionTip = falseVue.use(VueRouter);Vue.use(iView); Vue.use(http)Vue.use(Api)Vue.use(utils)/* eslint-disable no-new */ global.BASE_URL = process.env.API_HOST new Vue({ el: ’#app’, router, components: { App }, template: ’<App/>’})

5.找到config文件夾下的dev.env.js

module.exports = merge(prodEnv, { NODE_ENV: ’'development'’, API_HOST: ’'開發環境接口地址'’})

6.頁面中具體使用方法

<template> <div class='hello'> <Select v-model='model8' clearable style='width:200px'> <Option v-for='item in cityList' :value='item.productCode' :key='item.productCode'>{{item.productName }}</Option> </Select> </div></template> <script>export default { name: ’HelloWorld’, data () { return { cityList:[], model8:'code' } }, mounted(){ this.http .post(BASE_URL + '請求路徑',{}) .then(data => { if (data.code == 'success') { this.cityList = data.data; this.cityList.splice(0,0,{ productCode: 'code', productName: '所有產品' }) } }) .catch(err => { console.log(err); }); }}</script><style scoped></style>

以上這篇vue接口請求加密實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。