-
这里的res.data是响应的resp数据，我们返回的是R所以就是R 我们要回去R中的data属性 所以是res。data。data
//钩子函数，VUE对象初始化完成后自动执行 created() { this.getAll(); }, methods: { //列表 getAll() { axios.get("/books").then((res)=>{ this.dataList = res.data.data; })
-
删除的时候 带着id 删除 是+row。id
this.$confirm("你确定要继续删除吗？","提示",{type:'info'}).then(()=>{ axios.delete("/books/"+row.id).then((res)=>{ if (res.data.flag){ this.$message.success("删除成功"); }else{ this.$message.success("删除失败"); } -
添加的时候添加的一个对象 是。this。formate
axios.post("/books",this.formData).then((res)=>{ if (res.data.flag){ this.dialogFormVisible = false; this.$message.success("添加成功"); }else{ this.$message.error("添加失败"); }
-
修改功能 可以看成是 查询功能再加 修改功能 （修改功能跟增加功能除了put post 类型不一样其他的差不多）
-
首先 我们需要通过id来查询到我们需要修改的那个对象， 弹出对话框
//弹出编辑窗口 handleUpdate(row) { axios.get("/books/"+row.id).then((res)=>{ console.log(res.data.data) if (res.data.flag && res.data.data!=null){ this.dialogFormVisible4Edit = true; this.formData = res.data.data; }else{ this.$message.error("数据同步失败，自动刷新"); } }).finally(()=>{ this.getAll(); }); }, -
第二 我们才能根据这个对话框 对他进行修改（）
//修改 handleEdit() { axios.put("/books", this.formData).then((res) => { if (res.data.flag) { this.dialogFormVisible4Edit = false; this.$message.success("更新成功"); } else { this.$message.success("更新失败"); } }).finally(() => { this.getAll(); }) },
-
-
分页功能页数启动服务器之后，系统将分页的页数，和数据，呈现出现， 我们直接子啊上面的getAll里面改 在url里面传入页数和数量的值就行
//列表 getAll() { axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res) => { console.log(res.data) //打印一下数据 //当前页 this.pagination.currentPage = res.data.data.current; this.pagination.pageSize = res.data.data.size; this.pagination.total = res.data.data.total; this.dataList = res.data.data.records; }) }, -
换页数的功能呢
//切换页码 handleCurrentChange(currentPage) { this.pagination.currentPage = currentPage; this.getAll(); }, -
注意有一个肖bug，如果你的最后一个数据是最后一页的第一个数据， 你把他删了 你会出现你总共只有2页，但是你在第三页的bug
所以我们要在分页功能前面进行判断，如果 当前页数》总页数，我们将当前页数变成总页数在经行一个查询操作
@GetMapping("{curentPage}/{size}") public R pages(@PathVariable int curentPage,@PathVariable int size){ IPagepage = bookService.curentPage(curentPage, size); //如果当前页数》总的页数， 将当前页数变成总页数 在查询一次 if (curentPage>page.getPages()){ curentPage = (int)page.getPages(); page = bookService.curentPage(curentPage, size); } return new R(true,page); }
-
搜索功能其实跟分页功能是同一个功能， 我们在分页的时候是select（page，null）表示没有条件的查询然后分页， 而搜索功能就是又条件的分页， 所以直接在分页功能上面修改就可以， 程序一启动，这个时候没有搜索条件所以默认未null， 查询了全部
-
先在html文件中的表单出 写上v-model=？？？
-
第一步： 我们搜索功能它的url是http://localhost/pages/books/1/20?type=??&name=??&description=??
于是我们需要进行拼接 ?type=??&name=??&description=?? ，拼接完之后，在下面的get方法中加入我们的拼接内容
getAll() { param = "?type="+this.pagination.type; param += "&name="+this.pagination.name; param += "&description="+this.pagination.description; console.log(param) axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize+"/"+param).then((res) => { console.log(res.data) -
第二步在controller类中修改分页功能
//查询功能 @GetMapping("{curentPage}/{size}") public R page(@PathVariable int curentPage,@PathVariable int size,Book book){ IPagepage = bookService.curentPage(curentPage, size,book); //如果当前页数》总的页数， 将当前页数变成总页数 在查询一次 if (curentPage>page.getPages()){ curentPage = (int)page.getPages(); page = bookService.curentPage(curentPage, size,book); } return new R(true,page); } -
我们通过一本书来搜索的， 这里采用springmvc的自动封装
-
