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. MySQL主从复制之半同步(semi-sync replication)

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 半同步简介 MASTER节点在执行完客户端提交的事务后不是立刻返回结果给客户端,而是等待至少一个SLAVE节点接收并写到r ...

  2. 记一次 ClickHouse 性能测试

    前言 在工作场景中,我们会采集工厂设备数据用于智能控制,数据的存储用了 InfluxDB,随着数据规模越来越大,InfluxDB 的性能越来越差,故考虑引入 ClickHouse 分担 InfluxD ...

  3. java-Collection,List简单使用与方法/(集合使用-中)

    1.1集合只存放引用类型的元素并且集合存放的时元素的引用(地址)1.2新循环遍历集合 Collection c = new ArrayList(); c.add("one"); c ...

  4. 如何快速上手AIRIOT?

    AIRIOT物联网低代码平台,快速构建稳定可靠的物联网系统,丰富的功能库及组件库,具备低成本.高效率.易操作,可扩展等特点,节省物联网项目实施时间及人力成本,支持二次开发.   [六步快速上手,玩儿转 ...

  5. .Net Core使用Coravel实现任务调度

    前言 前段时间需要在一个新项目里添加两个后台任务,去定时请求两个供应商的API来同步数据:由于项目本身只是一个很小的服务,不太希望引入太重的框架,同时也没持久化要求:于是我开始寻找在Quartz.Ne ...

  6. 痞子衡嵌入式:MCUXpresso IDE下设置代码编译优化等级的几种方法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是MCUXpresso IDE下设置代码编译优化等级的几种方法. 最近公司芯片设计团队正在开发一款全新的基于 Cortex-M33 内核的 ...

  7. Linux 禁止root远程登录解决办法

    linux中root用户是超级管理员,可以针对root用户暴力破解密码,这样很不安全,工作中我们一般禁止root用户直接远程登陆,开设一个或多个普通用户,只允许登陆普通用户,如果有需要用root用户, ...

  8. Linux虚拟机 RHEL8.0安装步骤

    一. 创建空白虚拟机 1.打开 VMware 虚拟机软件依次选择新建虚拟机并选择选择"自定义" 自定义功能更加全面,典型就是比较简单的配置 2.选择对应的 VMware 版本,此则 ...

  9. GIN 索引

    GIN(Generalized Inverted Index, 通用倒排索引) 是一个存储对(key, posting list)集合的索引结构,其中key是一个键值,而posting list 是一 ...

  10. 如何结合整洁架构和MVP模式提升前端开发体验(三) - 项目工程化配置、规范篇

    工程化配置 还是开发体验的问题,跟开发体验有关的项目配置无非就是使用 eslint.prettier.stylelint 统一代码风格. formatting and lint eslint.pret ...