vue接口请求加密实例

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接口请求加密实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。