后台项目总结：
一.封装localStorage
我的规范—在src下创建一个utils文件夹，专门存放封装的js文件
封装localStorage创建saveLocal.js，代码如下
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;
如何使用？
1.全局使用（vue文件中），mian.js文件引入
import storage from "@/utils/saveLocal.js";//localstorage保存数据 ---后缀名.js可以=省略，下面也是
Vue.prototype.$storage = storage;
//这里用的@代表在src为根目录
使用：
this.$storage.get('uid','1')//创建
this.$storage.get('uid')//获取
this.$storage.remove('uid')//移除
2.局部引入（vue文件中）
import Storage from "@/utils/saveLocal.js";//localstorage保存数据
使用：
Storage.get('uid','1')//创建
Storage.get('uid')//获取
Storage.remove('uid')//移除
3.局部引入（js文件中）和上面一致
import Storage from "@/utils/saveLocal.js";
使用：
Storage.get('uid','1')//创建
Storage.get('uid')//获取
Storage.remove('uid')//移除
二.封装接口 及请求拦截和响应拦截
我的规范—在src下创建一个api文件夹，专门存放封装的js文件
封装接口用data.js,封装请求和拦截用config.js，代码如下
首先看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 };
在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.全局使用（vue文件中），mian.js文件引入，一般都是全局引入，局部引入（不建议,麻烦）
import api from "@/api/data.js"// 接口
Vue.prototype.$api = api;
使用：
async login() {
let params = {
account: this.username.trim(),
password: this.$md5(this.password.trim()).toUpperCase(),
};
let res = await this.$api.Login(params);//res表示响应回来的参数
//是不是很方便，很happy
},
三.过滤器的封装
老样子在src utils文件下 加filter.js文件
//格式
//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;
};
全局引入—在main.js文件中
import * as filters from "@/utils/filters.js"; //全局挂载过滤器
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]);
});
调用
<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);
},
},
};
局部引入
import * as filters from "@/utils/filters.js";
调用
let tmie=filters.timestampToTime(item.timestamp).toString();
//item.timestamp是以秒为单位的时间戳
//如：1600910729 这里time结果2020-09-24 09:25:29