我们在手机端加载数据时，一般需要请求历史数据时，需要进行分页，因为手机运行需要快，所以不做一下子加载太多条的数据

这里我们用的是vue-infinite-loading这个插件来实现

npm install vue-infinite-loading --save 或者 yarn add vue-infinite-loading

注意，你的数据显示内容区需要设置CSS

1.首先写好分页  页码

2.定义好，所有数据数组，总条数，每页数量，当前页

3.根据后台数据的长度 确定好表格总条数

4.在computer中，定义好每页的开始位置    就是beginIndex。0,10,20这样自带的

然后计算每页的数据的数量，把原来的后台的数据进行浅拷贝，进行截取，就形成了每页的数据，并自动去渲染每页，

5数据表格中的数据就不是，，  this.rightsList = res.data.data这个了，，而是。。currentList,

6.就是页码改变，每页数量改变的方法了

最后就OK了

ElementUI的表格要求的数据类型为字典数组。我使用了python3写后端，那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可。取出后我将其存入redis数据库方便之后取用。取用时使用eval()函数再传到前端即可。 前端放置Pagination 分页器，我这里直接采用了完整功能的分页器。 《el-pagination @size-change=“handleSizeChange“ @current-change=“handleCurrentChange“ :current-page=“currentPage“ :page-sizes=““ :page-size=“pagesize“ layout=“total, sizes, prev, pager, next, jumper“ :total=“data.length“》 《/el-pagination》其中：handleSizeChange为pagesize发生改变时的相应函数，handleCurrentChange为currentPage发生改变时的相应函数。 page-sizes为所有可选择的page-size。可以自己更改其中的数字。 layout为附带的功能，一般不用动它。 total为总数据数。由于是字典数组，直接使用length方法即可得到总数据数。 data () { return { data: , currentPage:1, pagesize:20, } },初始页currentPage、初始每页数据数pagesize和数据data methods: { handleSizeChange: function (size) { this.pagesize = size; }, handleCurrentChange: function(currentPage){ this.currentPage = currentPage; } }上面的两个响应函数，很好理解。

本文是 Vue实战 系列的第六篇文章，主要介绍Falcon项目中通用 Table 组件的开发和使用 。Fa 最后附上 TableBox 的地址： https://github.com/thierryxing/Falcon/blob/mock/src/components/global/TableBox.vue

2、安装html2Canvas: npm install --save html2canvas

这里使用 iframe 嵌套需要转成pdf的html文件；

如果pdf内容是动态的，可以将html丢给后端，让后端使用freemarker ftl模板语言或是啥其他的模板语言更改即可，然后将整个html作为字符串传给前端，前端再使用iframe 的 srcdoc属性将内容渲染出来。

不存在分页内容裂开的情况，但对样式呈现不太友好，有时会出现内容偏移情况，时好时坏的，经过不断的尝试，发生偏移的时候，可以将html2Canvas的width写死，但是值具体是多少，需要你自己猜

分页会出现问题：比如图片裂开，表格的某一行从中间断开了等等....我用的笨方法手动去调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight，一点点试出来合适的值（应该有更好的方法，但是技术有限）

1. 生成多页pdf，分页内容裂开的问题

主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo，实现增删改查、分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程。

PS：假设以上的的工具你都安装好啦，写CRUD小DEMO时进坑了，这篇blog参考一下，仅供参考，仅供参考😤，，如有不足请不吝赐教。

1、File-》New-》Project...

2、选择 Spring Initializr ，然后选择默认的 url 点击next

1、更新pom.xml如下：

2、新建 demo\src\main\java\com\example\demo\entity\User.java

3、更新demo\src\main\resources\application.properties

4、新建demo\src\main\java\com\example\demo\mapper\UserMapper.java

5、新建demo\src\main\resources\mapper\UserMapper.xml

6、新建demo\src\main\java\com\example\demo\service\UserService.java

7、新建demo\src\main\java\com\example\demo\controller\UserCtrl.java

9、后端就写完了，整体结构如下：

1、win+R-》cmd-》进入项目目录依次执行命令： vue init webpack projectName 、 cd projectName 、 npm install 、 npm run dev 如图所示：

1、在项目根目录安装axios执行命令 npm install axios ，安装element ui 执行命令 npm i element-ui -S 2、更新vue01\src\App.vue

3、更新vue01\src\main.js

4、更新vue01\src\components\HelloWorld.vue

方式一： 在 vue01\config\index.js 文件中配置 proxyTable{} ，如下：

方式二： 在vue-cli项目根目录执行命令 npm run build ，编译完成后将dist/static文件夹copy至springboot项目的 src/main/resources/static 目录下然后直接启动springboot项目就OK了。

大材小用，✍这篇博客の源码在 我的GitHub 上。

开发中遇到一个问题，前端调用接口createMethod，数据传不到后台，后台获取到的是一串url路径：  后来发现是因为接口写的不对，不应该写params:data,而是应该直接写data浅谈Django前端后端值传递问题9下载·0评论2021年1月19日解决 Vue 组件传值过程接收不成功的问题2383阅读·0评论·2点赞2022年3月31日Vue项目宝塔部署Nginx跨越解决访问不了后端问题491阅读·0评论·0点赞2022年11月1日vue 数据库 登录界面_vue实现的上传图片到数据库并显示到页面功能示例1445阅读·0评论·0点赞2021年1月30日VUE 解析 EXCEL 并将数据导入到数据库702阅读·0评论·0点赞2022年8月12日使用Vue，Element-ui导入Excel并预览显示数据，并经数据保存传至后台数据库5324阅读·11评论·5点赞2020年5月22日轿车轮胎质量排名精选推荐广告Vue向后台接口传参为什么会出错或者传不过去?1279阅读·1评论·0点赞2021年7月29日关于vue中利用axios常用的表单提交以及文件上传如何传递参数给后端的详解4941阅读·1评论·11点赞2021年8月16日vue传递参数到后台_java后台接受不到vue传的参数2129阅读·0评论·3点赞2020年12月19日VUE前端项目，访问不到后台1774阅读·0评论·0点赞2021年4月12日关于页面带值跳转，获取不到所传递的值642阅读·0评论·0点赞2017年12月10日vue实现简单分页功能，后台只需要传一个总数1530阅读·0评论·4点赞2019年10月17日在vue中如何实现前端导入文件发送给后端进行数据库记录的批量添加1684阅读·0评论·0点赞2021年12月12日vue前端向后端传递参数1.1W阅读·0评论·7点赞2021年7月5日el-pagination遇到pageNum从0开始给后台传值问题218阅读·0评论·0点赞2022年1月12日vue 中 数组不能被后端接收问题解决785阅读·0评论·0点赞2021年4月28日前端访问后端接口，后端没有接收到值，或者访问后端没反应，调试也没进来9142阅读·0评论·1点赞2021年11月2日jsp页面隐藏域的值无法传入后台944阅读·1评论·1点赞2019年3月26日前端如何调用后端接口进行数据交互（极简）2.8W阅读·7评论·53点赞2022年3月18日前端传来的参数后端无法正确接收5579阅读·0评论·1点赞2022年4月11日去首页看看更多热门内容

vue 里el-pagination 分页设置全部？首先使用el-pagination组件。@size-change在每页数据的个数发生改变时触发。@curren-change在页数发生改变时触发。数据源定义的数据，默认展示第一页，页面数据10条  方法触发时的操作。每页数据个数发生改变时触发handleSizeChange(size)，参数size即是选择的每页数据的数量。页数发生改变时触发handleCurrentChange(current)，current即是选择的页面。在web开发过程中，通常使用表格展示数据，在数据较多时采用分页的方式展示给用户。分页方式有前端假分页和后端分页两种实现方式，此文仅记录前端假分页实现方式。第一步：添加分页组件（el-pagination）在表格下方，添加的代码如下所示：第二步：添加分页所需的变量，如下所示：第三步：添加相应的分页方法，如下所示：第四步：修改查询按钮逻辑，在成功查询后，更新数据的总数量。代码如下所示：第五步：使用slice实现前端的假分页，最终vue文件中的主要代码如下所示：最终效果如下所示：

在本次项目中 由于是一个相册展示的项目，相片数据通过月份进行分页，前端通过接口一次返回所有相片的链接，接口上并没有返回相片总数，嗯...加上有点懒 也就没做滚动加载了 然后发现了 vue-lazyload这个插件

本文只是简单记录一下插件用法 和有这个插件的存在 并不是什么高端文章哦~

官方简单事例子

通过这个简单例子就可以实现lazyload

看看请求

可以看出滚动后才开始加载后面的图片

看看dom结构可以看出 通过 监听页面展示区域 动态把把v-lazy里面的替换为data-src 替换为src 实现懒加载

嗯 这就很好的解决了 在不用再次分页的情况下请求大量图片请求的问题了

具体参见文档