Element UI和Spring Boot 初次結合遇到的問題

語言: CN / TW / HK

由於是首次使用Element UI 進行前後端分離式的練習,在此做下記錄,以供以後參考。

問題一:

問題背景: 當前端利用Element UI 組件建立好表單以後需要向後端獲取數據來展現在瀏覽器上,此時就需要進行前後端通信來實現數據的交互。

問題解決: 由於需要前後端實現通信,那麼可以採用 vue-axios的方式來解決,但在此之前需要引入vue-resource庫,引入方式:npm i vue vue-resource --save-dev

然後就可以利用this.$http.get()和this.$http.post() 來進行數據交互。

this.$http.get()的使用:

    this.$http.get('地址',{params: {參數}}).then(function(res) {
        console.log(res)
        // 響應成功回調
    },function(res) {
        console.log(res)
        // 響應錯誤回調
    })

舉例説明 this.$http.get("http://localhost:8081/users/deleteUser", {params:{uid:row.id}}).then(res => { if (res.data.status == true) { this.$message({ message: '恭喜你'+res.data.result, type: 'success' }); // 清空表單信息 this.form = {}; //隱藏表單 this.show = false; // 刷新表單 this.findAllTableMsg(); } else { this.$message.error(res.data.result); } }

在上述例子中get裏面的‘地址’和參數還可以寫在一起:

this.$http.get("http://localhost:8081/users/deleteUser?uid=" +row.id).then(res => {

this.$http.post()使用:

和get不同的是,post請求中傳遞的參數是不需要加params的,同時也會多一個選項emulateJSON 設置emulateJSON:true的條件,此時如果Web服務器無法處理編碼為application/json的請求,你可以啟用emulateJSON選項。啟用該選項後,請求會以application/x-www-form-urlencoded作為Content-Type,就像普通的HTML表單一樣,而不是JSON格式

如果你沒有設置問true,那麼此時後端接收的需要加上 @RequestBody註解

this.$http.post('地址',{參數},{emulateJSON:true}).then( function(res) { console.log(res.data) })

舉例説明

this.$http.post(this.url+tempUrl,this.form).then(res => { // 打印後端返回的對象 console.log(res.data) // 打印後端對象中的具體數據 console.log(res.data.result) if (res.data.status == true) { this.$message({ message: '恭喜你'+res.data.result, type: 'success' }); // 清空表單信息 this.form = {}; //隱藏表單 this.show = false; // 刷新表單 this.findAllTableMsg(); } else { this.$message.error(res.data.result); } }) 後端代碼

/** * 添加TUsers對象 * @param tUsers 傳來的json格式的對象 * @return 返回R對象,是否添加成功 */ @PostMapping("/insertUsers") public R InsertUsers(@RequestBody TUsers tUsers){ System.out.println("tUsers = " + tUsers); Integer ans=tUsersService.insertUsers(tUsers); if(ans==1){ return new R(null,"添加數據成功!!!",true); } return new R(null,"添加數據失敗!!!",false); }

問題二 問題背景:當利用日期組件時輸入的日期格式傳輸過去後,發現後端接收日期為null,已經排除數據不能傳輸的問題。其餘數據可以正常保存。

問題解決:Element UI 組件中日期格式是data格式,後端實例對象中的格式也是Timestamp格式,但是數據庫中的格式是 Timestamp,此時需要進行時間格式的轉換

@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8") @DateTimeFormat(pattern = "yyyy-MM-dd") private Timestamp date;

當在後端轉換時間格式後又發現所選擇的時間和保存的時間相差一天,此時需要在前端代碼對應的組件中的屬性加入 value-format="yyyy-MM-dd"既可以解決問題。

<el-form-item label="生日"> <el-col :span="5"> <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="選擇日期" v-model="form.brith" style="width: 80%;"> </el-date-picker> </el-col> </el-form-item>