JAVA开发学习-day22

JAVA开发学习-day22

1. 查询与分页

1.1 前端

在表单上方添加两个输入框和查询按钮，用于查询数据

<el-input v-model="checkObj.name" style="width: 150px" placeholder="请输入查询的姓名" />
<el-input v-model="checkObj.phoneNumber" style="width: 150px" placeholder="请输入查询的手机号" />
<el-button type="primary" @click="checkData">查询</el-button>

在表单下面添加分页组件

<!-- current-page当前页数 -->
<!-- size:每页的条数 -->
<el-pagination
               :page-size = "checkObj.size"
               :current-page="checkObj.page"
               background layout="prev, pager, next" :total="total" 
               @current-change="checkData" />

checkObj对象用于接收输入框中输入的数据和当前的页码，checkData为点击查询按钮或点击分页执行的方法，total为查询数据的总行数

定义checkObj对象和total

<script>
    const total = ref(100)
    const checkObj = ref({
        size:3,
        page:1
    })
</script>

实现checkData方法，参数为val，当点击查询按钮时val不是number类型，点击分页按钮时val为number类型，由val的类型来判断点击的是哪一个按钮

<script>
const checkData = async (val) => {
    //获取当前页数
    if(typeof val == 'number'){
        checkObj.value.page = val;
    }
    //查询数据
    let result = await easyapi.getSearch('/api/member', checkObj.value)
    //更新表格中的数据
    tableData.value = result.data.list;
    total.value = result.data.count;
}
</script>

将onMounted中的实现改为调用checkData方法

<script>
onMounted(async function () {
    checkData();
})
</script>

1.2 后端

因为接收的数据包括具体的数据对象的属性值和分页的数据，所以先在util包中创建工具类Page

public class Page {
    private int size;
    private int page = -1;
    private int start;

    public int getSize() {
        return size;
    }

    public void setSize(int size) {
        this.size = size;
    }

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getStart() {
        //查询的起始位置及页码-1乘以每页的大小
        return (page - 1) * size;
    }

    public void setStart(int start) {
        this.start = start;
    }
}

在接收多个参数时，Mapper实现方法的参数必须要使用@Param标识符来起别名，在.xml文件中也必须使用规定的别名

@Mapper
public interface IMemberDao {
    //返回查询的对象
    List<Member> getMember(@Param("member") Member member,@Param("page") Page page);
    //返回查询的总页数
    int getMemberCount(@Param("member") Member member);
}

在.xml文件中实现sql语句

<sql id="getMemberWhere">
    <where>
        <if test="member.name != null and member.name != ''">
            <bind name="nameLike" value="'%' + member.name + '%'"/>
            name like #{nameLike}
        </if>
        <if test="member.phoneNumber != null and member.phoneNumber != ''">
            <bind name="phoneNumberLike" value="'%' + member.phoneNumber + '%'"/>
            and phoneNumber like #{phoneNumberLike}
        </if>
        and isDel = 0
    </where>
</sql>

<select id="getMember" resultType="com.easy.bean.Member">
    select * from members
    <include refid="getMemberWhere"></include>
    <if test="page.page >=0 and page.size > 0">
        limit #{page.start}, #{page.size}
    </if>
</select>


<select id="getMemberCount" resultType="int">
    select count(*) from members
    <include refid="getMemberWhere"></include>
</select>

当我们的sql语句需要复用时，可以在<sql>标签中写下需要服用的语句，当需要使用时，使用<include>标签，将refid设置为<sql>标签的id就可以复用sql语句

Service层的实现省略

Controller实现

@RestController
public class MemberController {

    @Autowired
    IMemberService memberS;

    @GetMapping("member")
    public CommonResult getMember(Member member, Page page){
        List<Member> list = memberS.getMember(member,page);
        int count = memberS.getMemberCount(member);
        //使用map来存储查询的列表和总行数
        HashMap map = new HashMap<>();
        map.put("list", list);
        map.put("count", count);
        return CommonResult.success(map);
    }
}

由此实现了分页和查询