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

由於是首次使用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>