手拉手全栈springboot+vue2+Element实现分页

环境介绍

后端

实体类、持久层、服务层使用Mybatis-Plus逆向工程生成

实体类

@TableName(value ="t_address")
@Data
public class TAddress implements Serializable {
    /**
     * 
     */
    @TableId(type = IdType.AUTO)
    private Integer id;

    /**
     * 
     */
    private String address;

    @TableField(exist = false)
    private static final long serialVersionUID = 1L;
}

持久层(mapper)

<select id="getTotal"> SELECT count(*) FROM `t_address` </select>

@GetMapping("/getpage") public Map<String,Object> getPageTAddress(@RequestParam(defaultValue = "1") int pageNum, @RequestParam(defaultValue = "10") int pageSize) { PageHelper.startPage(pageNum,pageSize); List<TAddress> data = tAddressService.list(); Integer total= tAddressService.getTotal(); HashMap<String, Object> res = new HashMap<>(); res.put("data",data); res.put("total",total); return res; }

@RestController
 @CrossOrigin //表示都允许跨域访问
 public class demoController {
     @Autowired
     private TAddressServiceImpl tAddressService;    
     @GetMapping("/getpage")
     public Map<String,Object> getPageTAddress(@RequestParam(defaultValue = "1") int pageNum,
                                               @RequestParam(defaultValue = "10") int pageSize, HttpServletResponse response){
         PageHelper.startPage(pageNum,pageSize);
         List<TAddress> data = tAddressService.list();
         Integer  total= tAddressService.getTotal();
          HashMap<String, Object> res = new HashMap<>();
          res.put("data",data);
          res.put("total",total);
         return res;
     } }

前端

import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import 'font-awesome/css/font-awesome.min.css'; import axios from 'axios' import router from './router/router' import store from './store/index' import './mock' axios.defaults.baseURL = "http://localhost:8007" Vue.prototype.$add = axiosVue.use(ElementUI); Vue.config.productionTip = falsenew Vue({ render: h => h(App), router, store:store }).$mount('#app')

效果