vue项⽬技术点总结,vue难点后台项⽬总结：
⼀.封装lo c a lSto r a ge
我的规范—在src下创建⼀个utils⽂件夹，专门存放封装的js⽂件
封装localStorage创建saveLocal.js，代码如下
let storage ={
set(key, value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
return JSON.Item(key));
},
remove(key){
}
};
export default storage;
如何使⽤？
1.全局使⽤（vue⽂件中），mian.js⽂件引⼊
import storage from"@/utils/saveLocal.js";//localstorage保存数据  ---后缀名.js可以=省略，下⾯也是
Vue.prototype.$storage = storage;
//这⾥⽤的@代表在src为根⽬录
使⽤：
this.$storage.set('uid','1')//创建
this.$('uid')//获取
this.$ve('uid')//移除
2.局部引⼊（vue⽂件中）
import Storage from"@/utils/saveLocal.js";//localstorage保存数据
使⽤：
Storage.set('uid','1')//创建
<('uid')//获取
3.局部引⼊（js⽂件中）和上⾯⼀致
import Storage from"@/utils/saveLocal.js";
使⽤：
Storage.set('uid','1')//创建
<('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 ="192.168.3.168:1210";
axios.defaults.timeout =10000;
//⽤到cookie需要添加下⾯代码
// axios.defaults.withCredentials = true;
//请求拦截
quest.use(
config =>{
("session")){
/
/判断是否有token，这⾥session是后台返回的⼀段字符串，和token⼀个理
//如果有，请求的时候就加上
config.headers['session']= ("session")
//上⾯是我这边后台要求加的⽅式
//其他项⽬都是加到Authorization上
//config.headers.Authorization = ("session");
}
return config;
},
error =>{
console.log(error,"接⼝出错了99000");
ject(error);
}
);
// 响应拦截
sponse.use(
config =>{
// console.log(config)
if(de ==11004){
router.push('/login')
}
return config;
},
error =>{
<('请重新登录')
console.log(error,"接⼝出错了");
//下⾯返回状态码需要看后台的状态码，来跳转，如token过期的之类的，让他去重新登录// const { status } = sponse
// console.sponse)
// if (status == 401) {
//  // 页⾯跳转
//  router.push('/login')
// }
ject(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.$New()
//}
const HttpGet=function(url, param,
){
(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){
(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:im(),
js获取json的key和valuepassword:this.$md5(im()).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= FullYear();
let M=
?"0"+(Month()+1)
: Month()+1;
let D= Date();
let h = Hours()<10?"0"+ Hours(): Hours();
let m =
let s =
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。