Resumo dos projetos de fundo:
1. Pacote localStorage
Minha especificação - crie uma pasta utils em src para armazenar arquivos js encapsulados
Encapsule localStorage para criar saveLocal.js, o código é o seguinte
let storage = {
set(key, value) {
localStorage.setItem(key, JSON.stringify(value));
},
get(key) {
return JSON.parse(localStorage.getItem(key));
},
remove(key) {
localStorage.removeItem(key);
}
};
export default storage;
Como usar?
1. Uso global (no arquivo vue), o arquivo mian.js é introduzido
import storage from "@/utils/saveLocal.js";//localstorage保存数据 ---后缀名.js可以=省略,下面也是
Vue.prototype.$storage = storage;
//这里用的@代表在src为根目录
usar:
this.$storage.get('uid','1')//创建
this.$storage.get('uid')//获取
this.$storage.remove('uid')//移除
2. Introdução parcial (no arquivo vue)
import Storage from "@/utils/saveLocal.js";//localstorage保存数据
usar:
Storage.get('uid','1')//创建
Storage.get('uid')//获取
Storage.remove('uid')//移除
3. A introdução parcial (no arquivo js) é consistente com o acima
import Storage from "@/utils/saveLocal.js";
usar:
Storage.get('uid','1')//创建
Storage.get('uid')//获取
Storage.remove('uid')//移除
2. Interface do pacote e interceptação de solicitação e interceptação de resposta
Minha especificação - crie uma pasta api em src para armazenar o arquivo js encapsulado
Use data.js para interface de encapsulamento, config.js para solicitação de encapsulamento e interceptação, o código é o seguinte
Primeiro, olhe para config.js
import axios from "axios";
import saveLocal from "@/utils/saveLocal";
import {
Message } from 'element-ui';
import router from '@/router'
// 配置请求的根路径
// axios.defaults.baseURL = "/api";
axios.defaults.baseURL = "http://192.168.3.168:1210";
axios.defaults.timeout = 10000;
//用到cookie需要添加下面代码
// axios.defaults.withCredentials = true;
//请求拦截
axios.interceptors.request.use(
config => {
if (saveLocal.get("session")) {
//判断是否有token,这里session是后台返回的一段字符串,和token一个理
//如果有,请求的时候就加上
config.headers['session'] = saveLocal.get("session")
//上面是我这边后台要求加的方式
//其他项目都是加到Authorization上
//config.headers.Authorization = saveLocal.get("session");
}
return config;
},
error => {
console.log(error, "接口出错了99000");
return Promise.reject(error);
}
);
// 响应拦截
axios.interceptors.response.use(
config => {
// console.log(config)
if (config.data.code == 11004) {
router.push('/login')
}
return config;
},
error => {
Message.error('请重新登录')
console.log(error, "接口出错了");
//下面返回状态码需要看后台的状态码,来跳转,如token过期的之类的,让他去重新登录
// const { status } = error.response
// console.log(error.response)
// if (status == 401) {
// // 页面跳转
// router.push('/login')
// }
return Promise.reject(error);
}
);
//封装post方法
const HttpPost = function (url, params) {
return axios.post(url, params, {
headers: {
//这个看项目需求加,看后台需要添加下面请求头
// 'Content-Type': "application/json;charset=utf-8"
}
})};
//1.封装get方法,不需要在调用时加参数情况如
//定义
//getNew() {
// return //HttpGetN("/terminal_center/v1/data/last_sensor?//type=5");
// },
//调用
//async fun1(){
// let res=await this.$api.getNew()
//}
const HttpGet = function (url, param,
) {
return axios.get(url, {
params: param }, {
headers: {
// 'Content-Type': "application/json;charset=utf-8"
}
})
};
//2.封装get方法,在调用时需要参数情况如
//定义
// device_info(params) {
// return HttpGet("terminal_center/v1/data/device_info", params);
// },
//调用:
//async fun2(){
//let params={
// name:1,
// uid:1
// }
// let res=await this.$api.device_info(params)
//}
const HttpGetN = function (url) {
return axios.get(url, {
headers: {
// 'Content-Type': "application/json;charset=utf-8"
}
});
};
export {
HttpGet, HttpPost, HttpGetN };
Apresente o método de solicitação em data.js :
import {
HttpGet, HttpPost, HttpGetN } from "./config";
let Api = {
// 登录
Login(params) {
return HttpPost("/edge_service/v1/user_center/login", params);
},
getNew() {
return HttpGetN("/terminal_center/v1/data/last_sensor?type=5");
},
device_info(params) {
return HttpGet("terminal_center/v1/data/device_info", params);
},
};
export default Api;
1. Uso global (no arquivo vue), importação de arquivo mian.js, geralmente importação global, importação local (não recomendado, problemático)
import api from "@/api/data.js"// 接口
Vue.prototype.$api = api;
usar:
async login() {
let params = {
account: this.username.trim(),
password: this.$md5(this.password.trim()).toUpperCase(),
};
let res = await this.$api.Login(params);//res表示响应回来的参数
//是不是很方便,很happy
},
Três. Embalagem de filtro
Adicione o arquivo filter.js no arquivo src utils como de costume
//格式
//export function xx(val){
//val 进行编辑,编辑成你需要的样子
//然后return 出去,就达到过滤效果
//return yy
//}
// 过滤时间格式为2020-08-31 12:03:50
//第一个过滤器 ---我这里val是以秒为单位 所以获取当前时间秒数为:Date.parse(new Date()) / 1000
export function timestampToTime(val) {
var date = new Date(parseInt(val * 1000, 10));
let Y = date.getFullYear();
let M =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1;
let D = date.getDate();
let h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let m =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
};
Introdução global - no arquivo main.js
import * as filters from "@/utils/filters.js"; //全局挂载过滤器
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]);
});
transferir
<p class="time">{
{
time | timestampToTime }}</p>
//tmie是变量 timestampTotime是过滤器里面定义的方法
//本例子是显示时间,而且函数在每隔一秒钟都能获取当前时间
export default {
data() {
return {
time: Date.parse(new Date()) / 1000,
};
},
mounted() {
this.update();
},
methods: {
update() {
setTimeout(() => {
this.time = Date.parse(new Date()) / 1000;
this.update();
}, 1000);
},
},
};
Introdução parcial
import * as filters from "@/utils/filters.js";
transferir
let tmie=filters.timestampToTime(item.timestamp).toString();
//item.timestamp是以秒为单位的时间戳
//如:1600910729 这里time结果2020-09-24 09:25:29