import?request?from?"@/utils/request";

export?default?{

??name:?'Home',

??components:?{

??},

??data()?{

????return?{

??????loading:?true,

??????form:?{},

??????dialogVisible:?false,

??????search:?'',

??????currentPage:?1,

??????pageSize:?10,

??????total:?0,

??????tableData:?[]

????}

??},

??created()?{

????this.load()

??},

??methods:?{

????load()?{

??????this.loading?=?true

??????request.get("/user",?{

????????params:?{

??????????pageNum:?this.currentPage,

??????????pageSize:?this.pageSize,

??????????search:?this.search

??????????//?端口返回數(shù)據(jù)進行前端渲染对扶，需要填寫參數(shù)

????????}

??????}).then(res?=>?{

????????this.loading?=?false

????????this.tableData?=?res.data.records

????????//?獲取data里面的屬性

????????this.total?=?res.data.total

??????})

????},

????//?進行模糊查詢的時候發(fā)現(xiàn)按鈕綁定點擊之后，可以查詢對應(yīng)的數(shù)據(jù)庫表汗洒，但是沒有數(shù)據(jù)可以查詢。

????//?post請求可以傳對象父款，get請求要添加params屬性溢谤。

????add()?{

??????this.dialogVisible?=?true

??????//?打開彈窗

??????this.form?=?{}

??????//?清空表單信息

????},

????save()?{

??????if?(this.form.id)?{??//?更新邏輯

??????//?判斷表單是更新還是新增

??????//?使用post發(fā)生錯誤，因為行對象存在ID憨攒，前端錯誤提示500世杀，后端錯誤提示Duplicate?entry?‘1’?for?key?‘primary’?主鍵1重復(fù)了

??????//?后臺數(shù)據(jù)庫?不適用insert插入方法使用updataById，使用put更新肝集，post更新瞻坝，get查詢

????????request.put("/user",?this.form).then(res?=>?{

??????????//?請求后臺接口?this.form參數(shù)在彈窗里面進行過綁定

??????????//?.then?ES6語法鏈式操作，前一步執(zhí)行完成杏瞻，結(jié)果放進.then里面

??????????console.log(res)

??????????//?打印返回結(jié)果

??????????//?跨域問題：參考代碼vue.config.js所刀。

??????????//?測試：F12選擇Network查看XHR發(fā)現(xiàn)Cannot?POST/user，原因是Request?URL訪問地址錯誤8080

??????????//?修改request?URL為9090后端接口提示CORS?error伐憾∶愠眨跨域限制8080端口不能訪問9090端口

??????????//?vue文檔提供解決跨域方法參考代碼vue.config.js，使用了proxy树肃，通過api改變8080端口為9876蒸矛，請求時變?yōu)?090后端接口。

??????????//?跨域配置文件完成，提示404切切地址仍然是8080雏掠，剛添加配置文件斩祭，重啟即可。重啟之后發(fā)現(xiàn)原來端口8080無法使用乡话，要選擇新的端口9876摧玫。

??????????//?完成之后查看數(shù)據(jù)庫發(fā)現(xiàn)部分數(shù)據(jù)導(dǎo)入為null，字段未對應(yīng)和屬性未添加绑青。

??????????//?密碼部分通過UserController.java诬像。如果未填寫則自動生成

??????????if?(res.code?===?'0')?{

????????????//?需要對code對象進行判斷，確認結(jié)果闸婴。

????????????this.$message({

??????????????//?ElementUi提供的彈窗提示

??????????????type:?"success",

??????????????message:?"更新成功"

????????????})

??????????}?else?{

????????????this.$message({

??????????????type:?"error",

??????????????message:?res.msg

??????????????//?返回cede錯誤信息

????????????})

??????????}

??????????//?axios數(shù)據(jù)交互

??????????this.load()?//?刷新表格的數(shù)據(jù)

??????????this.dialogVisible?=?false??//?關(guān)閉彈窗

????????})

??????}??else?{??//?新增

????????request.post("/user",?this.form).then(res?=>?{

??????????console.log(res)

??????????if?(res.code?===?'0')?{

????????????this.$message({

??????????????type:?"success",

??????????????message:?"新增成功"

????????????})

??????????}?else?{

????????????this.$message({

??????????????type:?"error",

??????????????message:?res.msg

????????????})

??????????}

??????????this.load()?//?刷新表格的數(shù)據(jù)

??????????this.dialogVisible?=?false??//?關(guān)閉彈窗

????????})

??????}

????},

????handleEdit(row)?{

??????this.form?=?JSON.parse(JSON.stringify(row))

??????//?深拷貝

??????this.dialogVisible?=?true

????},

????handleDelete(id)?{

??????console.log(id)

??????//?點擊刪除觸發(fā)功能坏挠，而不是電鋸確認才觸發(fā)，因為方法寫在刪除而不是確認組件

??????//?參照官網(wǎng)Element-Plus文檔提供@confirm=

??????request.delete("/user/"?+?id).then(res?=>?{

????????if?(res.code?===?'0')?{

??????????this.$message({

????????????type:?"success",

????????????message:?"刪除成功"

??????????})

??????????//?后臺接口接收id進行刪除邪乍，后臺使用@DeleteMapping（"/{{?id?}}"）,使用占位符需要使用@PathVariable獲取參數(shù)降狠。

????????}?else?{

??????????this.$message({

????????????type:?"error",

????????????message:?res.msg

??????????})

????????}

????????this.load()??//?刪除之后重新加載表格的數(shù)據(jù)

??????})

????},

????handleSizeChange(pageSize)?{???//?改變當前每頁的個數(shù)觸發(fā)

??????this.pageSize?=?pageSize

??????this.load()

????},

????handleCurrentChange(pageNum)?{??//?改變當前頁碼觸發(fā)

??????this.currentPage?=?pageNum

??????this.load()

????}

??}

}

</script>