基于Vue的Axios总结和ElementUI分页组件的使用心得

[222000225郑鸿鑫]

目录

• 1.技术概述
• 2.技术详述
• 3.技术使用中遇到的问题和解决过程
• 4.总结
• 5.参考文献、参考博客

1.技术概述

ElementUI是一个基于Vue.js的UI组件库，提供了丰富的组件和样式，用于构建用户界面。
Vue Axios是一个基于Promise的HTTP客户端，用于在Vue项目中发送异步请求和处理服务器响应。在厨房APP项目中，使用Vue Axios可以实现与后端服务器的数据交互，获取食材、菜谱等信息，并展示给用户。

2.技术详述

使用ElementUI的Pagination 分页组件:

1. 组件的基本使用：介绍Pagination组件的基本配置和使用方法，包括传入数据总数、每页显示的数据条数等参数。
2. 自定义分页样式：演示如何通过自定义样式类来修改Pagination组件的外观，使其与项目的整体风格一致。
3. 搭配Table组件使用：展示如何将Pagination与ElementUI的Table组件结合使用，实现分页展示和表格数据的同步更新。
4. 事件处理和页码跳转：说明如何监听Pagination组件的事件，如页码改变事件，以及如何通过编程方式实现页码的跳转和切换。

当数据量过多时，推荐使用分页分解数据。基本设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，sizes和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，sizes用于设置每页显示的页码数量。

Axios是一个基于Promise的HTTP客户端，用于在Vue中发送异步请求并处理服务器响应。在开发Web应用程序时，通常需要与后端服务器进行数据交互，而Axios提供了一种简洁、强大和易于使用的方式来处理这些异步请求。学习Axios的原因是为了更高效地进行数据通信，而其难点在于理解和应用Promise的概念，以及处理各种可能的服务器响应和错误情况。

技术详述：

1. 安装和配置：介绍如何在Vue项目中安装和配置Axios，包括引入Axios库、设置全局配置和拦截器等。
2. 发送HTTP请求：演示如何使用Axios发送GET、POST等类型的请求，传递参数和请求头，并处理服务器返回的数据。
3. 鉴权和身份验证：讨论如何在Axios中添加身份验证信息，如Token，在每个请求中进行身份验证，以保护用户隐私和数据安全。
   

   

3.技术使用中遇到的问题和解决过程

1.在每页显示个数和分页页数上，ElementUI的Pagination 分页组件似乎都有某个默认值会导致分页次数不对，而恰恰因为这个默认值，比如单页显示9个卡片组件，9和10（后来经过测试这个默认值是10）很接近，就会出现一种分页正确的错觉

解决方案：在传回的数据条目数先乘以10再进行分页的计算动作，否则就会出现total分页失败的问题，并且这个默认值官方文档中我并没有看到明确的说明。

2. 分页数据的后端接口对接问题：与后端开发人员协调，确保前端Pagination组件与后端的接口数据格式和参数的一致性。

   4.总结

通过使用ElementUI的Pagination分页组件，我们可以轻松实现数据的分页展示和导航。关键是熟悉其基本使用方法，掌握与后端接口的对接和数据处理技巧，并且能够解决可能出现的兼容性和性能问题。

Vue Axios是Vue项目中常用的HTTP客户端工具，用于与后端服务器进行数据交互。在厨房APP项目中，通过合理地配置和使用Axios，可以实现与后端的数据通信，并处理请求和响应的各种情况。重点是掌握请求的发送、错误处理和身份验证等关键技术点，并解决跨域请求和大数据量处理等常见问题。

5.参考文献、参考博客

ElementUI 官方文档 - Pagination 分页
Vue.js 官方文档 - Components: Pagination
Axios 官方文档