1、看实现的效果


2、前端vue页面核心代码

2.1、 表格代码(表格样式可以去elementui组件库直接调用相应的)

    <div>
<el-table
:data="tableDatas"
border
style="width: 100%; height: 450px"
>
<el-table-column prop="uid" label="编号" width="100">
</el-table-column>
<el-table-column prop="userName" label="姓名" width="100">
</el-table-column>
<el-table-column prop="nickName" label="昵称" width="100">
</el-table-column>
<el-table-column prop="gender" label="性别" width="100">
</el-table-column>
<el-table-column prop="idCard" label="身份证" width="200">
</el-table-column>
<el-table-column prop="email" label="邮箱" width="200">
</el-table-column>
<el-table-column prop="phone" label="手机号" width="200">
</el-table-column>
<el-table-column
prop="registerTime"
label="注册时间"
width="200"
>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)"
type="text"
size="small"
>查看</el-button
>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>

2.2、分页组件代码

直接放到相应的位置

   <!--分页组件-->
<div style="text-align: left">
<el-row>
<el-col :span="12">
<el-pagination
style="margin: 15px 0px"
background
layout="prev, pager, next, jumper, total, sizes"
:page-size="size"
:current-page="now"
:page-sizes="[2, 4, 6, 8]"
@current-change="findPage"
@size-change="findSize"
:total="total"
>
</el-pagination>
</el-col>
</el-row>
</div>

2.3 、script中的代码

提示:这里的total默认设置为0,否则会出现意想不到的问题(不影响使用、但是看起来难受)
在进行方法调用时,会根据传入的size和page作为参数、再次查询数据库

<script>
export default {
data() {
return {
total: 0,
now: 1,
size: 8,
input2: "",
tableDatas: [],
};
},
methods: {
handleClick(row) {
console.log(row);
}, // 第n页信息
findPage(now_page) {
//用来处理当前页的方法,page为当前页
this.now = now_page;
this.showAllUserInfo(now_page, this.size);
},
findSize(now_size) {
//用来处理每页条数的方法,size为当前页条数
this.size = now_size;
this.showAllUserInfo(this.now, now_size);
}, // 展示所有的用户信息
showAllUserInfo(currentPage, pageSize) {
//异步请求显示所有数据
currentPage = currentPage ? currentPage : this.now;
pageSize = pageSize ? pageSize : this.size;
axios
.get("user/findAllUser/" + currentPage + "/" + pageSize)
.then((res) => {
console.log(res);
this.tableDatas = res.data.data.result.userList;
this.total = res.data.data.result.totals;
});
},
},
created() {
this.showAllUserInfo();
},
};
</script>

3、后端核心代码

3.1 控制层

   // 查询所有的用户信息
@RequestMapping(value = "/user/findAllUser/{page}/{size}",method = RequestMethod.GET)
public Result findAllUser(@PathVariable("page") Integer page,@PathVariable("size") Integer size){
//准备数据 通过这两个参数,可以算出start 计算方法 start=size(page-1)
int currentPage = page;//当前是第几页
int pageSize = size; //页面大小
Map<String, Integer> map = new HashMap<String, Integer>();
map.put("startIndex", (currentPage - 1) * pageSize);
map.put("pageSize", pageSize);
List<User> userList = userService.findAllUser(map);
Long totals = userService.findUserTotals();
HashMap<String, Object> result = new HashMap<>();
result.put("userList",userList);
result.put("totals",totals);
return Result.ok().data("result",result); }

3.2 编写的sql语句调用

<!--    分页查询所有用户-->
<select id="findAllUser" parameterType="Map" resultType="com.zyz.bookshopmanage.pojo.User">
select * from bookshopmanage.tbl_user limit #{startIndex},#{pageSize}
</select>

3.3 、service层 dao层略

vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)的更多相关文章

  1. vue+mockjs 模拟数据,实现前后端分离开发

    在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...

  2. 一个Java程序猿眼中的前后端分离以及Vue.js入门

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...

  3. 在Linux上从零开始部署前后端分离的Vue+Spring boot项目

    最近做了一个前后端分离的商城项目来熟悉开发的整个流程,最后希望能有个正式的部署流程,于是试着把项目放在云服务器上,做了一下发现遇到了不少问题,借此记录一下整个部署的过程. 使用的技术栈如标题所说大体上 ...

  4. 「newbee-mall新蜂商城开源啦」 前后端分离的 Vue 版本即将开源

    新蜂商城 Vue 版本 2019 年 10 月份我在 GitHub 开源仓库中上传了新蜂商城项目的所有源码,至今已经有小半年的时间了,感兴趣的可以去了解一下这个 Spring Boot 技术栈开发的商 ...

  5. 前后端分离,Vue+restfullframework

    一.准备 修改源: npm config set registry https://registry.npm.taobao.org 创建脚手架: vue init webpack Vue项目名称 #I ...

  6. jenkins部署前后端分离的vue项目

    1 General Name: 变量名. 类似给分支起一个名字的意思, 可随意取 Description: 描述, 非必填 Parameter Type: 选择 Branch or Tag Defau ...

  7. 前后端分离项目Vue+drf开发部署总结

    思维导图xmind文件:https://files-cdn.cnblogs.com/files/benjieming/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A ...

  8. vue+uwsgi+nginx部署前后端分离项目

    前后端分离,vue前端提供静态页面,且可以向后台发起get,post等restful请求. django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染 后端 创建虚拟环境 解决dj ...

  9. .Net Core+Vue.js+ElementUI 实现前后端分离

    .Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...

随机推荐

  1. C 语言 时间函数使用技巧(汇总)

    time.h 头文件 是 C 语言中 有关 时间的函数所储存的头文件 #include <time.h> 在介绍时间函数用法之前,我们首先要了解在 time.h 头文件中已经声明了的一个结 ...

  2. LuoguP2217 [HAOI2007]分割矩阵 (DP + memorized search)

    int n,m,tim; int mp[N][N], sum[N][N]; double ave,dp[N][N][N][N][N]; inline double DP(int a,int b,int ...

  3. ArrayList,LinkedList

    ArrayList,LinkedList ArrayList 采用的是数组形式来保存对象的,这种方式将对象放在连续的位置中,所以最大的缺点就是插入删除时非常麻烦LinkedList 采用的将链表的数据 ...

  4. java-重载、包修饰词以及堆栈管理

    1.方法的重写(Override):重新写.覆盖 1)发生在父子类中,方法名称相同,参数列表相同,方法体不同 2)重写方法被调用时,看对象的类型2.重写与重载的区别: 1)重写(Override): ...

  5. 【Java】学习路径33-在IDEA中使用junit单元测试运行单个方法

    首先在菜单找到 文件-项目结构 项目设置-库-"+" 选择Java 找到IDEA安装目录,打开lib/junit4.jar 的jar包,然后打开即可. 然后选择确定. 然后再项目中 ...

  6. QtCreator像C# region一样折叠代码

    C# #region "comment" [code] #endregion 就可以在VS中实现代码折叠了 QtCreator #pragma region "comme ...

  7. AtCoder Beginner Contest 254(D-E)

    Tasks - AtCoder Beginner Contest 254 D - Together Square 题意: 给定一个N,找出所有不超过N的 ( i , j ),使得( i * j )是一 ...

  8. Java常用类的使用

    Java常用类 1. Optional 在我们的开发中,NullPointerException可谓是随时随处可见,为了避免空指针异常,我们常常需要进行 一 些防御式的检查,所以在代码中常常可见if( ...

  9. Java开发学习(三十)----Maven聚合和继承解析

    一.聚合 分模块开发后,需要将这四个项目都安装到本地仓库,目前我们只能通过项目Maven面板的install来安装,并且需要安装四个,如果我们的项目足够多,那么一个个安装起来还是比较麻烦的 如果四个项 ...

  10. Centos_yum使用

    安装应用 yum install -y xxx -y 表示自动yes 卸载应用 yum -y remove xxx -y 表示自动yes 查看已安装的应用 yum list installed