axios

调用

GET用来发少量数据,如果发送对象使用POST

1
2
3
4
5
6
7
8
axios({  
  url: "http://localhost:8080/album/getAlbum",  
  method: "GET"  
}).then((res) => {  
  this.urls = res.data;  
  this.mx = res.data.length;  
  // console.log(res.data);  
})

数据多使用POST发送,这里发送一个对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
方案一:
axios.post("http://localhost:8080/login", this.staff)

方案二:
axios({  
  url: "http://localhost:8080/essays/insertArticle",  
  method: "Post",  
  data: JSON.stringify(this.essay),  
  headers: {  
    'Content-Type': 'application/json'  
  }  
}).then((res) => {  
  // console.log("success!")  
})

初始化滚动事件

1
2
3
4
5
6
7
8
mounted() {  
  // 为页面设置滚动事件  
  window.addEventListener("scroll", this.articleScroll(methods中函数), true);  
},  
beforeDestroy() {  
  // 离开页面销毁滚动事件
  window.removeEventListener("scroll", this.articleScroll(methods中函数), true);  
}

页面的初始化

1
2
3
4
5
6
7
8
9
// 页面初始化  
watch: {  
  '$route':  
    "getList",  
},  
// 页面初始化  
created() {  
  this.getList();  
},

函数

1
2
3
4
5
6
7
8
9
handleScroll(e) {  
  let ev = e || window.event;  
  let down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;  
  if (down) {  
    下滚
  } else {  
    上滚  
  }  
}

路由跳转

1
2
3
4
跳转并传参
this.$router.push({path: url, query: {note: value}})
接收参数
this.$route.query.note

调用父页面中方法/数据

1
this.$parent.方法/数据

同步异步(图片上传压缩为例)

html

1
<input class="select" type="file" accept="image/jpg,image/png" @change="uploadPhoto($event)" id="img">

vue

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
uploadPhoto: async function (e) {  
  // 先重置  
  this.reset();  
  // 利用fileReader对象获取file  
  this.file = e.target.files[0];  
  this.filesize = this.file.size;  
  // 同步执行转异步执行  
  let promiseTemp = null;  
  let promiseResolve = null;  
  // console.log(this.file);  
  // 如果大小过1MB则进行压缩  
  if (this.filesize > 1024 * 1024) {  
    this.is_file = true;  
    promiseTemp = new Promise(resolve => promiseResolve = resolve)  
    let blob = new Promise((resolve) => {  
      // 压缩到100KB,这里的100就是要压缩的大小,可自定义  
      imageConversion.compressAccurately(this.file, 1024).then(res => {  
        // console.log(res)  
        this.file = new File([res], this.file.name, {type: this.file.type})  
        resolve(res);  
        promiseResolve('执行完毕');  
      });  
    });  
    let a = await promiseTemp;  
    // console.log(blob);  
    // this.file = new File([blob], this.file.name, {type: this.file.type})    this.is_file = false;  
  }  
  let reader = new FileReader();  
  reader.readAsDataURL(this.file);  
  reader.onload = (e) => {  
    // 读取到的图片base64 数据编码  
    this.album.base = e.target.result;  
  }  
  this.sub_success = true;  
}

修改页面title

1
2
3
4
5
6
7
8
9
10

在main.js中配置

router.beforeEach((to, from, next) => {  
  /* 路由发生变化修改页面title */  
  if (to.meta.title) {  
    document.title = to.meta.title  
  }  
  next()  
})

图像

拼接字符串转为图片路径

1
:src="require('../assets/'+Src)"

自动跳转首页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
routes: [  
  {  
    path: '/',  
    redirect: '/login'  
  },  
  {  
    path: '/login',  
    name: 'login',  
    component: login  
  },  
  {  
    path: '/home',  
    name: 'home',  
    component: home  
  }  
]

Input

autocomplete=”off”

让input表单输入框不记录输入过的信息

1
<el-input type="password" v-model="staff.password" autocomplete="off" clearable></el-input>

动画

问题

v-show和v-if改变样式不会触发动画

解决

不使用:style,使用:class进行切换

异步

异步方法返回值

异步方法返回值为promise对象,需要通过.then(res=>{})接收

axios

409状态码

问题

发现axios拿不到后端返回的内容,但是可以正常访问

解决方法

直接通过response拿

1
2
3
4
5
axios.get("http://localhost:8080/staff/name/" + localStorage.getItem('username'))  
  .then()  
  .catch(e => {  
    this.info = e.response.data;  
  })

监听页面变化(宽度/高度)

1
window.addEventListener("resize", this.getScreenWidth);

获取页面宽度

1
document.body.clientWidth|| document.documentElement.clientWidth

监听页面刷新

1
2
3
window.addEventListener("load", () => {  
  this.user = this.$parent.user;  
});

图片加载失败调用函数

1
<img alt="" :src="personBgUrl" class="psImg" @error="setPersonDefaultBgUrl">

net::ERR_FAILED错误

错误原因

可能是后台拦截器未开放权限

解决方法

后台拦截器开放权限