vue接口请求加密实例


Posted in Javascript onAugust 11, 2020

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>

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

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 #Javascript
vue npm install 安装某个指定的版本操作
Aug 11 #Javascript
小程序自动化测试的示例代码
Aug 11 #Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 #Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 #Javascript
Vue自定义全局弹窗组件操作
Aug 11 #Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 #Javascript
You might like
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php实现可运算的验证码
2015/11/10 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
iview实现图片上传功能
2020/06/29 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python反转列表的三种方式解析
2019/11/08 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
教师岗位说明书
2015/09/30 职场文书