DDR爱好者之家 Design By 杰米
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]) "htmlcode">
// 获取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) ""+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) "htmlcode">
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接口请求加密实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月24日
2024年11月24日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]