SpringBoot + Vue 微人事(十)

职位管理前后端接口对接

先把table中的数据展示出来，table里面的数据实际上是positions里面的数据，就是要给positions:[] 赋上值

可以在methods中定义一个initPosition方法

 methods:{
   
            //定义一个初始化positions的方法
            initPositions(){
   
                //发送一个get请求去获取数据 请求地址是"/system/basic/pos/"
                this.getRequest("/system/basic/pos/").then(resp =>{
   
                    //判断如果resp存在的话，请求成功
                    if (resp){
   
                        //就把positions的值赋值歌resp就行了
                        this.positions=resp;
                    }
                })
            }
        }

定义好之后去看职位管理的页面看有没有渲染出数据。

为什么没数据呢？我们可以看到我们定义的initPositions并没有调用，我们以前是登录的时候要点击登录的按钮去调用方法，但是我们这个不应该点，应该是页面一加载就会自动的去执行。那么如果让方法自动去执行呢？这时候就要用到vue的生命周期里面的钩子函数

当这个组件初始化的时候，会自动执行mounted方法，我们在mounted方法里面去调用initPositions就行了

 mounted(){
   
            this.initPositions()