vue+Springboot前后端交互问题

1. Vue ob: Observer

ob_: Observer这些数据是vue这个框架对数据设置的监控器，一般都是不可枚举的。
假设list里面存放的就是那些带有__ob__: Observer的可以用下面代码解决

JSON.parse(JSON.stringify(this.list)）

2. vue中实现先请求数据再渲染dom

按照 请求数据—>渲染dom—>获取dom的顺序执行，把请求数据写在了created函数中，把渲染dom的操作写在mounted函数中，竟然还是先执行渲染dom的操作。
this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。

• this.nextTick()和this.$nextTick()的区别

  this.nextTick(callback)是当数据发生变化，更新后执行回调；
  this.$nextTick(callback)是当DOM发生变化，更新后执行的回调；

在获取数据的操作中添加this.$nextTick()函数，在其回调函数中可以对这些数据进行DOM操作。

axios.post('/api/scene/getSceneData', {Diagram_id: this.diagramId,}
      ).then(res => {
      // 获取第一个数据
        this.sceneData = res.data;

        axios.post('/api/scene/getSceneLink', {Diagram_id: this.diagramId,}
        ).then(res => {
        // 获取第二个数据
          this.sceneLink = res.data;

          this.$nextTick(() => {
         		// 进行dom渲染
          })
        })
      })

3. axios

vue.config.js

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        // 配置别名 这样可不通过写具体路径找资源
        // vue设置了 '@': 'src',
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'views': '@/views',
        'network': '@/network',
      }
    }
  },
  // 允许跨域请求
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080/',
        changeOrigin: true
      },
    }
  }
 }

main.js

import axios from 'axios'

Vue.prototype.$http = axios

springboot中的controller
@CrossOrigin(origins = “*”)

	@PostMapping("scene/getSceneLink")
	// 允许跨域
    @CrossOrigin(origins = "*")
    public String getSceneLink(@RequestBody String data){
        ......
    }