SpringBoot新闻项目学习day2-前后端搭建以及数据查询（分页查询）

- 前端Vue2的搭建与环境配置
- 条件基本表查询（查询所有管理员）（AdminMapperxml）
- 后端搭建
- 编码
- - 条件查询（管理员列表）
  - 添加分页功能
  - - 分页查询理论前端后端
    - 开始实现（理论）：
    - - 后端
    - 更简单的分页实现
    - - 前端

前端Vue2的搭建与环境配置

配置好node.js
准备HBuilderX进行前端开发
创键vue2.6项目

4.为了实现页面的跳转,给项目增加路由功能

组件路由是指在前端框架中，将不同的组件与不同的路由路径相对应的机制。通过组件路由，可以根据用户访问的路由路径来动态加载对应的组件，实现页面的切换和内容的展示。

npm install router

使用npm指令下载路由

创建路由文件夹,配置路由地址

在router.js中嵌入已下代码

import Vue from 'vue';
import VueRouter from 'vue-router'; // 正确导入 VueRouter
Vue.use(VueRouter); // 使用 VueRouter// 定义组件路由
const router = new VueRouter({// 配置路由地址routes: [{}]
});
export default router; // 导出路由对象

在main.js中导入路由并创建添加路由对象

//导入路由
import router from './router/router.js'
Vue.use(router);new Vue({// 添加路由对象router,render: h => h(App),
}).$mount('#app')

在App.vue文件中进行代码修改

如下即可

现在就可以进行网页布局了

Vue框架就像跟拼积木一样,把一个一个的vue文件当成组件拼接起来组成一个网页布局

开始设计后端网页（使用ElementUI）

基本展示界面adminList.vue

<template><el-card class="box-card"><!-- 查询条件--><el-row :gutter="20"><el-col :span="6"><el-input placeholder="请输入账号" ></el-input></el-col><el-col :span="6"><el-radio  label="男">男</el-radio><el-radio   label="女">女</el-radio></el-col><el-col :span="6"><el-button type="primary" icon="el-icon-search"  >查询</el-button></el-col></el-row><br/><el-button type="primary" icon="el-icon-plus">新增</el-button><el-table :data="tableData" border style="width: 100%"><el-table-column prop="account" label="账号" width="100"></el-table-column><el-table-column prop="gender" label="性别" width="100"></el-table-column><el-table-column prop="phone" label="电话" width="150"></el-table-column><el-table-column prop="admin.account" label="操作人"></el-table-column><el-table-column prop="operTime" label="操作时间" align="center"></el-table-column><el-table-column label="操作" fixed="right"><template slot-scope="scope"><el-button size="mini">编辑</el-button><el-button size="mini" type="danger" >删除</el-button></template></el-table-column></el-table></el-card></template><script>export default {data() {return {tableData: []}},methods: {},mounted() {// 像后端发送请求查询管理员列表this.$http.get("adminCtl/admins").then((resp)=>{this.tableData=resp.data.data;});}}
</script><style>
</style>

条件基本表查询（查询所有管理员）（AdminMapperxml）

查询所有管理员信息

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><!--与接口进行绑定-->
<mapper namespace="org.example.dao.AdminDao">
<!--查询所有管理员信息--><resultMap id="adminMap" type="Admin"><id column="id" property="id"/><result column="account"  property="account"/><result column="password"  property="password"/><result column="phone"  property="phone"/><result column="gender"  property="gender"/><result column="type"  property="type"/><result column="oper_time"  property="operTime"/>
<!--        嵌套查询管理员信息--><association property="admin" javaType="Admin"><result column="operator_account" property="account"/></association></resultMap><select id="searchAllAdmins" resultMap="adminMap">SELECTa1.id,a1.account,a1.phone,a1.gender,a1.type,a2.account AS operator_account,a1.oper_timeFROMadmin a1LEFT JOIN admin a2ON a1.adminid = a2.idWHERE a1.type = 2</select></mapper>

结果如下：

后端搭建

参考Java框架Spring学习的后端搭建，本项目就是以上面为基础搭建的后端
在这里插入图片描述

编码

条件查询（管理员列表）

查询所有管理员如上

我们重点在为列表添加查询条件

那么为什么要添加查询条件？

答：为了加快对所需信息的快速检索

案例：比如筛选账号与性别

对应AdminMapper.xml代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><!--与接口进行绑定-->
<mapper namespace="org.example.dao.AdminDao">
<!--查询所有管理员信息--><resultMap id="adminMap" type="Admin"><id column="id" property="id"/><result column="account"  property="account"/><result column="password"  property="password"/><result column="phone"  property="phone"/><result column="gender"  property="gender"/><result column="type"  property="type"/><result column="oper_time"  property="operTime"/>
<!--        嵌套查询管理员信息--><association property="admin" javaType="Admin"><result column="operator_account" property="account"/></association></resultMap><select id="searchAllAdmins" resultMap="adminMap">SELECTa1.id,a1.account,a1.phone,a1.gender,a1.type,a2.account AS operator_account,a1.oper_timeFROMadmin a1LEFT JOIN admin a2ON a1.adminid = a2.idWHERE a1.type = 2<if test="account!=''">AND a1.account = #{account}</if><if test="gender!=''">AND a1.gender = #{gender}</if></select>
</mapper>

admins(){this.$http.post("adminCtl/admins",this.form).then((resp)=>{this.tableData=resp.data.data;});}

添加分页功能

为了限制一次查询过多的数据，为了提高查询效率

分页查询理论前端后端

分页的必备条件：

总记录数（总共有多少条）

每页显示的条数

总页数=总记录数/每页显示的条数+1

分页实现：

mysql的limit查询

当前页数 n limit (n-1)*每页显示的条数

前端向后端传递哪些数据？

1.当前页数

2.每页显示的条数

后端向前端传递那些数据

1.总条数

2.对应页的数据

开始实现（理论）：

后端

1.在前端form表单里面添加页数pageNumber与pageSize数据

form:{account:"",gender:"",pageNumber:1,pageSize:10
}

2.后端Admin添加上面对应属性

3.在AdminService层添加分页逻辑

//当前页数转换为每页开始的位置
admin.setPageNumber((admin.getPageNumber()-1)*admin.getPageSize());

4.修改select代码

limit #{pageNumber}, #{pageSize}

效果如下

但我们还需要给前端传总条数，这个需要我们在后端自己写。这样就可以配合ElementUI组件实现分页功能，但我们也可以通过更简单的方法来实现分页功能

更简单的分页实现

无需计算分页，具体配置如下

1.pom.xml配置

<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.5</version></dependency>

一定要注意版本问题

2.application.yml文件配置

#  application.yml文件配置
spring:main:allow-circular-references: true #开始支持spring循环依赖

3.Service类中

 public PageInfo<Admin>searchAllAdmins(Admin admin) {PageHelper.startPage(admin.getPageNumber(), admin.getPageSize()); //1.会自动算出limit后面的开始位置List<Admin> admins =  adminDao.searchAllAdmins(admin); //2.重新发一条sql,查询总条数PageInfo<Admin> pageInfo = new PageInfo<>(admins);return pageInfo;}

我们发现后端框架已经处理好了传送

此时以及显示传过来了，只需要修改前端代码即可

我们发现框架已经提我们算好了分页数据了

前端

由于我们发现数据都在list里面，所以要修改前端获取数据的代码，如下

我们开始添加页脚的页数组件

<div class="block"><span class="demonstration">完整功能</span><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[100, 200, 300, 400]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></div>

前端完整代码

<template><el-card class="box-card"><!-- 查询条件--><el-row :gutter="20"><el-col :span="6"><el-input placeholder="请输入账号" v-model="form.account" ></el-input></el-col><el-col :span="6"><el-radio  label="男" v-model="form.gender">男</el-radio><el-radio   label="女" v-model="form.gender">女</el-radio></el-col><el-col :span="6"><el-button type="primary" icon="el-icon-search"  @click="search()">查询</el-button></el-col></el-row><br/><el-button type="primary" icon="el-icon-plus">新增</el-button><el-table :data="tableData" border style="width: 100%"><el-table-column prop="account" label="账号" width="100"></el-table-column><el-table-column prop="gender" label="性别" width="100"></el-table-column><el-table-column prop="phone" label="电话" width="150"></el-table-column><el-table-column prop="admin.account" label="操作人"></el-table-column><el-table-column prop="operTime" label="操作时间" align="center"></el-table-column><el-table-column label="操作" fixed="right"><template slot-scope="scope"><el-button size="mini">编辑</el-button><el-button size="mini" type="danger" >删除</el-button></template></el-table-column></el-table><div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="form.pageNumber":page-sizes="[10, 20, 30, 40]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></el-card></template><script>export default {data() {return {total:0,tableData: [],form:{account:"",gender:"",pageNumber:1,pageSize:10}}},methods: {search(){this.admins();},handleSizeChange(val) { //当改变下拉框页数大小时触发的this.form.pageSize = val;this.admins();},handleCurrentChange(val) {//当改变当前页数时候触发this.form.pageNumber = val;this.admins();},admins(){this.$http.post("adminCtl/admins",this.form).then((resp)=>{this.tableData=resp.data.data.list;this.total = resp.data.data.total;});}},mounted() { //会在网页加载的时候调用里的方法// 像后端发送请求查询管理员列表this.admins();}}
</script><style>
</style>

效果如下：