vue.js开发问题汇总

项目介绍

基于vue.js的自动职位发布系统开发,后端由java开发实现。

前端技术栈

vue全家捅

  • vue
  • vuex
  • vue-router
  • vue-store

数据请求

  • axios

UI框架

  • element-ui
  • font-awesome

排坑

axios调试

初始化配置

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
// 设置默认基础api地址前缀
// 在调用时,若url参数为相对路径,axios将自动加上baseURL前缀,若url参数为http/https开始,axios直接使用该url
axios.defaults.baseURL = 'http://test/api/'
// 为post添加form-urlencoded
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// axios request拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
if (config.method === 'post') {
// 表单提交处理
   // import qs from 'qs'
   config.data = qs.stringify(config.data)
// console.log(config.data)
}

return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})

// axios response拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})

// 添加axios为全局属性 通过this.$http调用
Vue.http = Vue.prototype.$http = axios

注意事项

在vue.js中,使用axios进行数据请求时,在axios内部使用this直接访问全局方法,将出现找不到该调用方法的情况

解决方案:
在调用之前,将this属性传递给self,通过self在axios中访问全局属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let self = this
this.$http.get(
'/job/jobUpDown.json', {
params: {
accountId: accountId
}
})
.then(function (response) {
if (response.data.code === 200) {
     // 调用element-ui通知消息
     self.$message.success(response.data.msg)
self.getTable(true)
} else {
self.$message.error(response.data.msg)
}
})

vue-router带参数处理

router实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
redirect: '/accounts',
children: [
{
path: '/accounts',
name: 'Accounts',
component: Accounts
},
{
path: '/accounts/publish/:accountId',
name: 'publish',
component: Publish
}
]
}
]
})

调用方式

通过全局方法this.$router调用

1
2
3
4
5
6
// 链接:/accounts/publish/121
// 这里是通过路由的name进行调用的,通过path调用时始终失败,不知道问题在那?
this.$router.push(name: 'publish', params: {accountId: 121})

// 链接:/accounts/publish/121?bbb=ffff
this.$router.push(name: 'publish', params: {accountId: 121}, query: {bbb: 'fff'})

表格渲染问题

问题描述

element-ui中,tableData通过json直接渲染,但若想对表格中的某个值进行修改时,怎么操作?

解决方式

通过template的slot-scope对json数据进行读取,并通过v-if等判断修改需要显示的值。

1
2
3
4
5
6
7
<template slot-scope="scope">
<span v-if="scope.row.status === 1">有效</span>
<span v-else-if="scope.row.status === 2">暂停</span>
<span v-else-if="scope.row.status === 3">封号</span>
<span v-else-if="scope.row.status === 0">账户禁用</span>
<span v-else>-</span>
</template>

表格中数据换行问题

通过使用show-overflow-tooltip属性,超出长度的字段将被显示为”…”,鼠标悬停时,将显示完整的数据。