Vue使用记录

使用axios进行前后台数据交互

• 安装axios

npm install --save axios

• 引入axios

import axios from 'axios'

• 配置全局拦截

1. 新建http.js
2. 代码示例

import axios from 'axios'
import router from './router'

axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    let code = error.response.data.code
    if (code === 1004) {
      router.push({path: '/login'})
    }
    return Promise.reject(error)
  }
)
axios.interceptors.request.use(
  config => {
    if (window.sessionStorage.getItem('token')) {
      config.headers.Authorization = window.sessionStorage.getItem('token')
    } else {
      router.push({path: '/login'})
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)
export default axios

3. 在main.js中引用

import axios from './http.js'
//改写原型链
Vue.prototype.$ajax = axios

• 使用示例

this.$ajax.post(url).then(function (repsonse) {
          //成功操作
        }).catch(function (error) {
          //失败操作
        })

• 传递this

//第一种方式
let that = this 
//第二种方式
.then(function(res){
  console.log(this.data)
}.bind(this))

• 参考资料
  Vue中文文档

解决vue跨域问题

• 在config文件夹中新建proxyConfig.js
• proxyConfig.js配置如下

module.exports = {
  proxy: {
    '/honekit/connect': {    
      target: 'localhost',  // 接口域名
      secure: false,  // 如果是https接口，需要配置这个参数
      changeOrigin: true,  //是否跨域
      // pathRewrite: {
      //   '^/apis': ''   //需要rewrite的,
      // }
    }
  }
}

• 改造config目录下的index.js文件关于dev的部分

 dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
    proxyTable: proxyConfig.proxy,
    cssSourceMap: false
  }

• 参考资料
  vue-cli本地环境API代理设置和解决跨域

页面加载时加载方法

使用vue生命函数 create或者mounted

使用axios传递数组

• get/delete请求方式

this.$ajax.get('/honekit/connect/device/page', {
        params: {
          onlineState: this.checkedDeviceOnline.length === 0 ? null : this.checkedDeviceOnline[0].value,
        },
        paramsSerializer: params => {
          return qs.stringify(params, { indices: false })
        }}).then(function (response) {
      }.bind(this)).catch(function (error) {
        console.log(error)
      })
    }

• put/post请求方式

axios.post(url, qs.stringify(
    params: {
     ids: [1,2,3],
     type: 1
    }, { indices: false }))

• 不同形式传递数组

qs.stringify({ids: [1, 2, 3]}, { indices: false })
 //形式： ids=1&ids=2&id=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})
 //形式： ids[0]=1&aids1]=2&ids[2]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})
 //形式：ids[]=1&ids[]=2&ids[]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘}) 
//形式： ids=1&ids=2&id=3

不刷新页面的情况下重新加载页面

用provide / inject 组合
原理： 允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

在App.vue,声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

在需要用到刷新的页面。在页面注入App.vue组件提供（provide）的 reload 依赖，在逻辑完成之后（删除或添加…）,直接this.reload()调用，即可刷新当前页面。

注入reload方法

	export default{
		inject: ['reload']
	}

调用reload方法

	this.reload()

vue项目刷新当前页面

This is probably not a problem with npm,there is likely additional logging output above