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
// 端口返回数据进行前端渲染，需要填写参数
}
}).then(res => {
this.loading = false
this.tableData = res.data.records
// 获取data里面的属性
this.total = res.data.total
})
},
// 进行模糊查询的时候发现按钮绑定点击之后，可以查询对应的数据库表，但是没有数据可以查询。
// post请求可以传对象，get请求要添加params属性。
add() {
this.dialogVisible = true
// 打开弹窗
this.form = {}
// 清空表单信息
},
save() {
if (this.form.id) { // 更新逻辑
// 判断表单是更新还是新增
// 使用post发生错误，因为行对象存在ID，前端错误提示500，后端错误提示Duplicate entry ‘1’ for key ‘primary’ 主键1重复了
// 后台数据库 不适用insert插入方法使用updataById，使用put更新，post更新，get查询
request.put("/user", this.form).then(res => {
// 请求后台接口 this.form参数在弹窗里面进行过绑定
// .then ES6语法链式操作，前一步执行完成，结果放进.then里面
console.log(res)
// 打印返回结果
// 跨域问题：参考代码vue.config.js。
// 测试：F12选择Network查看XHR发现Cannot POST/user，原因是Request URL访问地址错误8080
// 修改request URL为9090后端接口提示CORS error。跨域限制8080端口不能访问9090端口
// vue文档提供解决跨域方法参考代码vue.config.js，使用了proxy，通过api改变8080端口为9876，请求时变为9090后端接口。
// 跨域配置文件完成，提示404切切地址仍然是8080，刚添加配置文件，重启即可。重启之后发现原来端口8080无法使用，要选择新的端口9876。
// 完成之后查看数据库发现部分数据导入为null，字段未对应和属性未添加。
// 密码部分通过UserController.java。如果未填写则自动生成
if (res.code === '0') {
// 需要对code对象进行判断，确认结果。
this.$message({
// ElementUi提供的弹窗提示
type: "success",
message: "更新成功"
})
} else {
this.$message({
type: "error",
message: res.msg
// 返回cede错误信息
})
}
// axios数据交互
this.load() // 刷新表格的数据
this.dialogVisible = false // 关闭弹窗
})
} 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() // 刷新表格的数据
this.dialogVisible = false // 关闭弹窗
})
}
},
handleEdit(row) {
this.form = JSON.parse(JSON.stringify(row))
// 深拷贝
this.dialogVisible = true
},
handleDelete(id) {
console.log(id)
// 点击删除触发功能，而不是电锯确认才触发，因为方法写在删除而不是确认组件
// 参照官网Element-Plus文档提供@confirm=
request.delete("/user/" + id).then(res => {
if (res.code === '0') {
this.$message({
type: "success",
message: "删除成功"
})
// 后台接口接收id进行删除，后台使用@DeleteMapping（"/{{ id }}"）,使用占位符需要使用@PathVariable获取参数。
} else {
this.$message({
type: "error",
message: res.msg
})
}
this.load() // 删除之后重新加载表格的数据
})
},
handleSizeChange(pageSize) { // 改变当前每页的个数触发
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum) { // 改变当前页码触发
this.currentPage = pageNum
this.load()
}
}
}
