服务器之家

服务器之家 > 正文

vue接口请求加密实例

时间：2021-08-19 17:27     来源/作者：沫熙瑾年

1. 安装vue项目 npm init webpack project

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

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

1.api.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * 为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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// 公共使用的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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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 id="codetool">

4. time.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
// 常用的工具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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
// 获取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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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

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

6.页面中具体使用方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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接口请求加密实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/xy19950125/article/details/83861156

标签：
接口 vue 加密 

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部