vue接口请求加密实例

1. 安装vue项目 npm init webpack project

2 安装iview npm i iview --save (这里是结合iview框架使用的 可根据自己的需求安装 当然也可以不安装)

3 在src目录下建一个utils文件夹 里面需要放5个js 都是封装好的js文件 功能不仅仅局限于加密 可以研究一下 你会学到很多东西

1.api.js

import http from './http'
 
export default {
 
 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, *
 
export function hasClass (el, className) {
 let reg = new RegExp('(^|\s)' + className + '(\s|$)');
 return reg.test(el.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, ' ');
}
 

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);
}
 

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
  };
 }
}
 

export function getIn (p, o) {
 return p.reduce(function (xs, x) {
  return (xs && xs[x]) ? xs[x] : null;
 }, o);
}
 

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)
}

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)

 
global.base_URL = process.env.API_HOST
 
new Vue({
 el: '#app',
 router,
 components: { App },
 template: ''
})

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

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_HOST: '"开发环境接口地址"'
})

6.页面中具体使用方法

以上这篇vue接口请求加密实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。