Bootstrap4 and Vue2 implement paging query function (code attached)

This time I will bring youBootstrap4 and Vue2 to implement the paging query function (with code), what are theprecautionsfor Bootstrap4 and Vue2 to implement the paging query function, the following is the actual combat Let’s take a look at the case.

Write in front

The project is designed to separate the front and back ends, using Nginx as the front-end resource server, and at the same time realizing the reverse proxy of the back-end service. The background is a Java Web project, using Tomcat to deploy services.

1. Front-end framework: Bootstrap4, Vue.js2

2. Backend framework: spring boot, spring data JPA

3. Development tools: IntelliJ IDEA, Maven

How to use Bootstrap Vue to implement dynamic table, data addition and deletion and other operations, please check out Using Bootstrap Vue.js to implement dynamic display, addition and deletion of tables. After the explanation is completed, the topic of this article begins.

1. Use Bootstrap to build a table

Table area

 
 
 
 
 
序号
 
会员号
 
姓名
 
手机号
 
办公电话
 
邮箱地址
 
状态
 
 
 
 
 
 
{{pageNow*10 + index+1}}
 
{{user.id}}
 
{{user.username}}
 
{{user.mobile}}
 
{{user.officetel}}
 
{{user.email}}
 
正常
 
注销
 
 
 
 

Paging area

 
 
   
 
  
 
 {{n}} 
 
  
 
  
 
 

2. Initialize VueObjectand data

Create Vue object

var vueApp = new Vue({ el:"#vueApp", data:{ userList:[], perPage:10, pageNow:0, totalPages:0, checkedRows:[] }, methods:{ switchToPage:function (pageNo) { if (pageNo < 0 || pageNo >= this.totalPages){ return false; } getUserByPage(pageNo); } } });

Initialization data

function getUserByPage(pageNow) { $.ajax({ url:"/user/"+pageNow, success:function (datas) { vueApp.userList = datas.content; vueApp.totalPages = datas.totalPages; vueApp.pageNow = pageNow; }, error:function (res) { console.log(res); } }); }

Complete js code:

3. Use JPA to implement paging query

Controller receives request

/** * 用户相关请求控制器 * @author louie * @date 2017-12-19 */ @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; /** * 分页获取用户 * @param pageNow 当前页码 * @return 分页用户数据 */ @RequestMapping("/{pageNow}") public Page findByPage(@PathVariable Integer pageNow){ return userService.findUserPaging(pageNow); } }

JPA paging query

@Service public class UserServiceImpl implements UserService { @Value("${self.louie.per-page}") private Integer perPage; @Autowired private UserRepository userRepository; @Override public Page findUserPaging(Integer pageNow) { Pageable pageable = new PageRequest(pageNow,perPage,Sort.Direction.DESC,"id"); return userRepository.findAll(pageable); } }

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Analysis of steps for building multi-page applications with webpack

How to add a progress bar to uploaded images in axios

Where does this point when vue uses axios

The above is the detailed content of Bootstrap4 and Vue2 implement paging query function (code attached). For more information, please follow other related articles on the PHP Chinese website!