職位管理前后端接口對(duì)接

先把table中的數(shù)據(jù)展示出來(lái)，table里面的數(shù)據(jù)實(shí)際上是positions里面的數(shù)據(jù)，就是要給positions:[] 賦上值

可以在methods中定義一個(gè)initPosition方法

 methods:{
            //定義一個(gè)初始化positions的方法
            initPositions(){
                //發(fā)送一個(gè)get請(qǐng)求去獲取數(shù)據(jù) 請(qǐng)求地址是"/system/basic/pos/"
                this.getRequest("/system/basic/pos/").then(resp =>{
                    //判斷如果resp存在的話，請(qǐng)求成功
                    if (resp){
                        //就把positions的值賦值歌resp就行了
                        this.positions=resp;
                    }
                })
            }
        }

定義好之后去看職位管理的頁(yè)面看有沒(méi)有渲染出數(shù)據(jù)。

為什么沒(méi)數(shù)據(jù)呢？我們可以看到我們定義的initPositions并沒(méi)有調(diào)用，我們以前是登錄的時(shí)候要點(diǎn)擊登錄的按鈕去調(diào)用方法，但是我們這個(gè)不應(yīng)該點(diǎn)，應(yīng)該是頁(yè)面一加載就會(huì)自動(dòng)的去執(zhí)行。那么如果讓方法自動(dòng)去執(zhí)行呢？這時(shí)候就要用到vue的生命周期里面的鉤子函數(shù)

當(dāng)這個(gè)組件初始化的時(shí)候，會(huì)自動(dòng)執(zhí)行mounted方法，我們?cè)趍ounted方法里面去調(diào)用initPositions就行了

 mounted(){
            this.initPositions();
        },

要在表格的前面加上多選按鈕的話呢，只需要加上如下一段代碼即可

        <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>

在表格里面添加編輯和刪除操作，新增代碼如下：scope.$index:當(dāng)前操作到第幾行 scope.row：這一行對(duì)應(yīng)的json對(duì)象

<el-table-column label="操作">
                    <!--scope.$index:當(dāng)前操作到第幾行 scope.row：這一行對(duì)應(yīng)的json對(duì)象 -->
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
                    </template>
</el-table-column>

//定義編輯按鈕的方法
handleEdit(index,data){
 
},
//定義刪除按鈕的方法
handleDelete(index,data){
 
},

效果如下圖所示：

如何實(shí)現(xiàn)添加方法，這個(gè)也挺簡(jiǎn)單，在下面html標(biāo)簽里面加上@click=“addPosition()”

<el-button type="primary" icon="el-icon-plus" size="small" @click="addPosition()">添加</el-button>

在methods中的定義的添加方法的代碼如下；首先要判斷用戶是否輸入了名字，輸入了就去發(fā)送添加的請(qǐng)求地址，添加成功之后調(diào)用initPositions方法刷新數(shù)據(jù)，沒(méi)有輸入則彈出提示框。

添加成功之后調(diào)用initPositions方法刷新數(shù)據(jù)

也可以添加完成之后清空輸入框 this.pos.name=’ ';

addPosition(){
                if (this.pos.name){
                    //this.pos ：參數(shù)是pos
                    this.postRequest("/system/basic/pos/",this.pos).then(resp=>{
                        if(resp){
                            //添加成功之后需要把表格刷新一下  可以直接用initPositions，重新加載數(shù)據(jù)
                            this.initPositions();
                            this.pos.name='';
                        }
                    })
                } else {
                    this.$message.error("職位名稱不可以為空");
                }
            },

添加按鈕已經(jīng)做完了，開(kāi)始做刪除按鈕，代碼如下：借助Element UI里面的MessageBox彈框

//定義刪除按鈕的方法
            handleDelete(index,data){
                this.$confirm('此操作將永久刪除【'+data.name+'】職位, 是否繼續(xù)?', '提示', {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/pos/"+data.id).then(resp=>{
                        if (resp){
                            this.initPositions();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消刪除'
                    });
                });
            },

刪除效果如下圖：
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-661009.html

到了這里，關(guān)于SpringBoot + Vue 微人事(十)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！