vue介面請求加密
阿新 • • 發佈：2018-11-22
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
// 公共使用的filters import Vue from 'vue'; import {getTime, getPrdType} from '../utils/time'; // 區分支付方式的filter Vue.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]; }); // 分割以：連線多個引數的string Vue.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); }); // 處理圖片地址的filter Vue.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*60 axios.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 http export 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())
}
// 刪除cookie
export 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()
}
}
// 設定localstorage
export function putlocal (key, value) {
if (!key || !value) return
window.localStorage[key] = JSON.stringify(value)
}
// 獲取localstorage
export 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 = false
Vue.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>