vue+elementUi+axios实现分页(MyBatis、Servlet)

vue+elementUi+axios实现分页

1.代码实现

【HTML】

1.在html部分编写表格：

<div id="Max">
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content bg-purple-light">
                    <div id="xuanran">
                        <template>
                            <el-table
                                    :data="newMsg"
                                    style="width: 100%">
                                <el-table-column
                                        label="学号"
                                        width="180">
                                    <template slot-scope="scope">
                                        <el-checkbox @change="DuoAdd(scope.row.id)">{{ scope.row.id }}</el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="姓名"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="工作"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.job }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="薪资"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.salary}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                                size="mini"
                                                type="success" plain
                                                @click="SelectOne(scope.row.id);dialogFormVisible1 = true;"><i
                                                class="el-icon-upload"></i>更新
                                        </el-button>
                                        <el-button size="mini"
                                                   type="danger" plain
                                                   @click="DeleteDate(scope.row.id)">
                                            <i class="el-icon-delete-solid"></i>删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                        <!-- 分页组件 -->
                        <div class="pagination-container">
                            <el-pagination
                                    small
                                    layout="prev, pager, next"
                                    :total="total"
                                    :current-page="currentPage"
                                    :page-size="pageSize"
                                    @current-change="handlePageChange">
                            </el-pagination>
                        </div>

                    </div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
    </div>

2.在new Vue的data中加入分页所需要的属性：

total: 0, // 总数据量
currentPage: 1, // 当前页码
pageSize: 9 ,// 每页显示数量

3.在**method**部分编写分页实现方法：

//渲染数据
GetDate() {
    const start = (this.currentPage - 1) * this.pageSize;
    const loading = this.$loading({
        lock: true,
        text: '玩命加载中....',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    axios.get('/VueProject2_war_exploded/MyServlet?method=queryRecord',{params: {
            page: start,
            pageSize: this.pageSize
        }
    })
        .then(response => {
            loading.close();
            this.newMsg = response.data.list;
            this.total = response.data.total;
        })
        .catch(err => {
            console.log(err);
        });
},
// 处理页码变化
handlePageChange(newPage) {
    this.currentPage = newPage;
    this.GetDate();
},

【Servlet层】

/**
 * 分页
 *
 * @param req
 * @param resp
 * @throws Exception
 */
public void queryRecord(ServletRequest req, ServletResponse resp) throws Exception {
    req.setCharacterEncoding("utf-8");
    resp.setContentType("text/html;charset=utf-8");
    PrintWriter writer = resp.getWriter();
    int start = Integer.parseInt(req.getParameter("page"));
    int pageSize = Integer.parseInt(req.getParameter("pageSize"));
    MyService myService = new MyService();
    PageResult pageResult = myService.queryRecordFenye(start, pageSize);
    String s = JSON.toJSONString(pageResult);//集合转换成json字符串准备传回前端;
    writer.write(s);
    writer.flush();
    writer.close();
}

【Service层】

/**
 * 分页
 * @param start
 * @param pageSize
 * @return
 */
public PageResult queryRecordFenye(int start, int pageSize) {
    SqlSession gc = GC();
    EmpDao mapper = gc.getMapper(EmpDao.class);
    List<Emp> list = new ArrayList<>();
    int total ;
    List<Emp> emps = mapper.selectAll();
    total = emps.size();
    List<Emp> emps1 = mapper.queryRecord(start, pageSize);
    list.addAll(emps1);
    return new PageResult(total, list);
}

【Dao层】

@Select("select * from emp limit #{start},#{pageSize}")
/**
 * 分页查询
 */
List<Emp> queryRecord(@Param("start") int start, @Param("pageSize") int pageSize);

2.总结步骤

1. 前端添加分页组件，绑定相关变量和事件。
2. 前端调整数据获取方法，传递分页参数，处理分页数据。
3. 后端提供分页接口和总记录数接口。

这样，用户的分页功能就能正常工作了。

3.实现要点

• 使用el-pagination组件实现分页效果
• 通过axios发送GET请求获取分页数据
• 页码变化时自动重新加载数据
• 需要计算start参数（(当前页-1)*每页数量）
• 需要同时执行两个SQL查询：获取总数和获取分页数据
• 返回包含总数和分页数据的复合对象
• 注意数据库字段名与实体类属性的对应关系

4.注意事项

• 确保后端接口地址正确（示例中使用的是/VueProject2_war_exploded/）
• 需要添加JSON序列化支持（如Jackson）
• 页码变化时自动重新加载数据
• 需要计算start参数（(当前页-1)*每页数量）
• 需要同时执行两个SQL查询：获取总数和获取分页数据
• 返回包含总数和分页数据的复合对象
• 注意数据库字段名与实体类属性的对应关系

4.注意事项

• 确保后端接口地址正确（示例中使用的是/VueProject2_war_exploded/）
• 需要添加JSON序列化支持（如Jackson）
• 处理跨域问题（如果前后端分离部署）