current position:Home>Element UI Vue, 2021 Java universal popular framework

Element UI Vue, 2021 Java universal popular framework

2021-08-26 00:56:30 I don't want to lose my hair

    console.log(index, row);

    this.$http.get("http://localhost:8989/user/delete?id=" + row.id).then((res) => {

      if (res.data.state) {

        this.$message({

          showClose: true,

          message: res.data.msg,

          type: 'success'

        });

      } else {

        this.$message({

          showClose: true,

          message: res.data.msg,

          type: 'error'

        });

      }

    });

    this.findAllTableData();

  },

},

} </script>




[](https://gitee.com/vip204888/java-p7) The realization of paging function 

==========================================================================



mysql  Paging query :




     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

<!– Paging query –>

<select id=“findByPage” resultType=“User”>

SELECT id, name, bir, sex, address

FROM t_user

LIMIT #{start}, #{rows}

</select>




 Back end controller :




     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

@RestController

@RequestMapping(“/user”)

@CrossOrigin

public class UserController {

@Autowired

private UserService userService;



//  Paging query  

@GetMapping("/findByPage")

public Map<String, Object> findByPage(Integer pageNow, Integer pageSize) {

    Map<String, Object> result = new HashMap<>();

    pageNow = pageNow == null ? 1 : pageNow; //  Do not transfer the current number of pages. The default is 1

    pageSize = pageSize == null ? 4 : pageSize; //  The number of items displayed on the current page will not be transmitted. The default display is 4 strip 

    List<User> users = userService.findByPage(pageNow, pageSize); //  Paging query 

    Long totals = userService.findTotals();

    result.put("users", users);

    result.put("total", totals);

    return result;

}

}




 Front page : Use  [ The paging component ](https://gitee.com/vip204888/java-p7);  

![ Insert picture description here ](https://s2.51cto.com/images/20210822/1629638535476662.jpg)




     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

<el-row>

<el-col :span=“12” :offset=“8”>

<div>

  <!--  The paging component  -->

  <el-pagination style="margin: 15px 0px;" prev-text=" The previous page " next-text=" The next page " background layout="prev, pager, next, sizes, jumper, total" :page-sizes="[2,4,6,8,10]" :page-size="pageSize" :total="total" :current-page="pageNow" @current-change="findPage" @size-change="findSize">

  </el-pagination>

</div>

</el-col>

</el-row>


<script> export default { data() { return { total: 0, //  Total number of pages ,  Get from background query  pageNow: 1, //  The current number of pages ,  The default is 1 pageSize: 4 //  Number of data pieces displayed on the current page ,  The default is 4 } }, methods: { findPage(page) { //  Methods used to deal with paging  console.log(" The current number of pages : " + page); this.pageNow = page; this.findAllTableDataByPage(); }, findSize(size) { //  The method used to handle the change of display records on each page  console.log(" Number of records on the current page : " + size); this.pageSize = size; this.findAllTableDataByPage(); }, findAllTableDataByPage() { this.$http.get("http://localhost:8989/user/findByPage?pageNow=" + this.pageNow + "&pageSize=" + this.pageSize).then((res) => { // console.log(res.data); this.tableData = res.data.users; this.total = res.data.total; }); } }, created() { this.findAllTableDataByPage(); } } </script> 

```



[](https://gitee.com/vip204888/java-p7)el-date-picke  One day less 

======================================================================================



Element-UI  The default time of the time control in is  ** International standard time **, So the time difference with Beijing  8  Hours .



 Solution : Add attribute in tag  `value-format="yyyy-MM-dd"`, then   Refresh the page ;


#  Last 

 No matter which company , They all attach great importance to the foundation , Big factories pay more attention to the depth and breadth of Technology , Interview is a two-way choice process , Don't be afraid to interview , Not conducive to their own play . At the same time, we should not only focus on salary , It depends on whether you really like the company , Can I really get exercise .

 For the above interview skills , I also do some information sharing here , Hope to help you better .

**[ Stamp here to get the following information for free ](https://gitee.com/vip204888/java-p7)**

![](https://s2.51cto.com/images/20210822/1629638535720434.jpg)

![](https://s2.51cto.com/images/20210822/1629638535607890.jpg)

![](https://s2.51cto.com/images/20210822/1629638535499691.jpg)


     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.

copyright notice
author[I don't want to lose my hair],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826005627864j.html

Random recommended