【web】第八、九次作业：课设题目、Springboot+Element：分页+条件查询+xml映射动态sql

Dlaen

已于 2024-06-26 15:17:48 修改

阅读量487

点赞数 4

于 2024-05-25 16:57:35 首次发布

本文链接：https://blog.csdn.net/laen4102/article/details/139199827

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、课设

课设题目

我们组的课设题目是：图书售卖管理系统
我认领的功能模块是：库存管理

新建一个该功能模块的表

在这里插入图片描述

增、删、改、查、分页

查询

在这里插入图片描述

分页

在这里插入图片描述

新增

在这里插入图片描述

删除

在这里插入图片描述

修改

在这里插入图片描述

二、分页条件查询

页面效果

第一页：
第二页：

条件查询：
模糊搜索1：
姓名：杜
风格：社会
模糊搜索2：
风格：婉约

代码

准备工作

在pom.xml文件中添加PageHelper分页插件依赖

<!-- PageHelper分页插件   -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.4.2</version>
</dependency>

controller

package com.wust.controller;

import com.wust.pojo.PageBean;
import com.wust.pojo.Poet;
import com.wust.pojo.Result;
import com.wust.service.PoetService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@Slf4j
@RestController
public class PoetController {
    @Autowired
    private PoetService poetService;

    //查询
    @GetMapping("/index")
    public Result select(){
        return Result.success(poetService.selectData());
    }

    //分页查询
    @GetMapping("/poets/{page}/{pageSize}")
    public Result page(@PathVariable Integer page,
                       @PathVariable Integer pageSize,
                       String name,String style){
        //记录日志
        log.info("分页查询：{}，{}，{}，{}",page,pageSize,name,style);
        //调用service分页查询
        PageBean pageBean = poetService.page(page,pageSize,name,style);
        //响应
        return Result.success(pageBean);
    }

    //新增
    @RequestMapping("/poet")
    public Result insert(@RequestBody Poet poet){
        poetService.insert(poet);
        return Result.success();
    }

    //删除
    @DeleteMapping("/delete/{id}")
    public Result delete(@PathVariable Integer id){
        poetService.delete(id);
        return Result.success();
    }

    //修改  先查询，再修改
    @RequestMapping("/poets/{id}")
    public Result getById(@PathVariable Integer id){
        Poet poet = poetService.getById(id);
        return Result.success(poet);
    }

    @PutMapping("/update")
    public Result update(@RequestBody Poet poet){
        poetService.update(poet);
        return Result.success();
    }
}

mapper

package com.wust.mapper;

import com.wust.pojo.Poet;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface PoetMapper {
//    @Select("select p_id as id, name, gender, dynasty, title, style from poet")
    List<Poet> selectPoet();

//    @Insert("insert into poet (name, gender, dynasty, title, style) " +
//            "values (#{name},#{gender},#{dynasty},#{title},#{style})")
    void insert(Poet poet);

//    @Delete("delete from poet where p_id=#{id}")
    void delete(Integer id);

//    @Select("select p_id as id, name, gender, dynasty, title, style from poet where p_id=#{id}")
    Poet getById(Integer id);

//    @Update("update poet set " +
//            "name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title},style=#{style} where p_id=#{id}")
    void update(Poet poet);

    //诗人信息 - 条件查询
    public List<Poet> list(@Param("name") String name, @Param("style") String style);
}

pojo

package com.wust.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

//分页查询结果封装
@Data
@AllArgsConstructor
@NoArgsConstructor
public class PageBean {
    private Long total; // 总记录数
    private List rows; // 数据列表
}

package com.wust.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.time.LocalDate;
import java.time.LocalDateTime;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Poet {
    private Integer id;   //id（主键）
    private String name;  //姓名
    private Integer gender; //性别
    private String dynasty; //朝代
    private String title; //头衔
    private String style; //风格
    private LocalDateTime updateTime; //修改时间
}

package com.wust.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {

    Integer code;
    String msg;
    Object data;

    public static Result success(){
        return new Result(1,"success",null);
    }
    public static Result success(Object data){
        return new Result(1,"success",data);
    }
    public static Result error(String msg){
        return new Result(0,msg,null);
    }
}

service

实现类

package com.wust.service.serviceImpl;

import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.wust.mapper.PoetMapper;
import com.wust.pojo.PageBean;
import com.wust.pojo.Poet;
import com.wust.service.PoetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PoetServiceImpl implements PoetService {
    @Autowired
    private PoetMapper poetMapper;

    @Override
    public PageBean page(Integer page, Integer pageSize, String name, String style) {
        //1.设置分页参数
        PageHelper.startPage(page,pageSize);

        //2.执行查询
        List<Poet> poetList = poetMapper.list(name,style);
        Page<Poet> p = (Page<Poet>) poetList;

        //3.封装PageBean对象
        PageBean pageBean = new PageBean(p.getTotal(),p.getResult());
        return pageBean;
    }

    public List<Poet> selectData(){
        return poetMapper.selectPoet();
    }

    public void insert(Poet poet){
        poetMapper.insert(poet);
    }

    public void delete(Integer id){
        poetMapper.delete(id);
    }


    public Poet getById(Integer id){
        return poetMapper.getById(id);
    }

    public void update(Poet poet){
        poetMapper.update(poet);
    }
}

接口

package com.wust.service;

import com.wust.pojo.PageBean;
import com.wust.pojo.Poet;

import java.util.List;

public interface PoetService {

    PageBean page(Integer page, Integer pageSize, String name, String style);

    List<Poet> selectData();

    void insert(Poet poet);

    void delete(Integer id);

    Poet getById(Integer id);

    void update(Poet poet);
}

前端index6.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>分页条件查询</title>
  <link rel="stylesheet" href="js/element.css">
</head>
<body style="align:center">

<div id="app" style="width: 80%;align:center">
  <h1 align="center">诗人信息</h1>
  <p align="center">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="风格">
        <el-input v-model="formInline.style" placeholder="风格"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </p>
  <el-table
          :data="tableData.filter(data => !search || data.author.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%;align:center;font-size: 20px">
<!--    <el-table-column-->
<!--            label="id"-->
<!--            prop="p_id">-->
<!--    </el-table-column>-->
    <el-table-column
            label="姓名"
            prop="name">
    </el-table-column>
    <el-table-column
            label="朝代"
            prop="dynasty">
    </el-table-column>
    <el-table-column
            label="头衔"
            prop="title">
    </el-table-column>
    <el-table-column
            label="风格"
            prop="style">
    </el-table-column>
    <el-table-column
            align="right">
      <template slot="header" slot-scope="scope">
        <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p align="center">
    <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
  </p>
</div>

<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>


<script>
  new Vue({
    el:"#app",
    data: {
      search: '',
      currentPage: 1,
      pageSize: 4,
      total: null,
      tableData: [],
      formInline: {
        author: '',
        style: ''
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.findAll();
        console.log(`每页 ${val} 条`);

      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.findAll();
        console.log(`当前页: ${val}`);

      },
      onSubmit() {

        var url = `/poets/${this.currentPage}/${this.pageSize}?name=${encodeURIComponent(this.formInline.author)}&style=${encodeURIComponent(this.formInline.style)}`

        console.log(this.formInline.name);
        console.log(this.formInline.style);


        axios.get(url)
                .then(res =>{
                  this.tableData = res.data.data.rows;
                  this.total=res.data.data.total;
                  console.log(this.tableData);
                  console.log(this.total);
                })
                .catch(error=>{
                  console.error(error);
                })

      },

      findAll() {

        var url = `/poets/${this.currentPage}/${this.pageSize}`

        axios.get(url)
                .then(res =>{
                  this.tableData = res.data.data.rows;
                  this.total=res.data.data.total;
                  console.log(this.tableData);
                  console.log(this.total);
                })
                .catch(error=>{
                  console.error(error);
                })

      }
    },
    created(){
      this.findAll();
    }
  })
</script>
</body>
</html>

三、 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="com.wust.mapper.PoetMapper">
<!--    查询-->
    <select id="selectPoet" resultType="com.wust.pojo.Poet">
        select * from poet
    </select>

<!--    条件分页查询-->
    <select id="list" resultType="com.wust.pojo.Poet">
        select * from poet
        <where>
            <if test="name != null and name != '' ">
                name like concat('%', #{name},'%')
            </if>
            <if test="style != null and style != '' ">
                and style like concat('%',#{style},'%')
            </if>
        </where>
    </select>

<!--    新增-->
    <insert id="insert">
        insert into poet (name, gender, dynasty, title, style)
        values (#{name},#{gender},#{dynasty},#{title},#{style})
    </insert>

<!--    删除-->
    <delete id="delete">
        delete from poet where p_id=#{id}
    </delete>

<!--    修改 先查询-->
    <select id="getById" resultType="com.wust.pojo.Poet">
        select p_id as id, name, gender, dynasty, title, style
        from poet
        where p_id=#{id}
    </select>

<!--    再查询-->
    <update id="update">
        update poet
        set name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title},style=#{style}
        where p_id=#{id}
    </update>
</mapper>

注意：

在Mapper接口中，如果传递多个参数，要用@Param注解，不然会报错

报错
加上@Param注解后不报错

四、学习gitee的使用

在这里插入图片描述

Dlaen

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【web】第八、九次作业：课设题目、Springboot+Element：分页+条件查询+xml映射动态sql

页面效果第一页：第二页：条件查询：模糊搜索1：姓名：杜风格：社会模糊搜索2：风格：婉约代码目录准备工作在pom.xml文件中添加PageHelper分页插件依赖<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-sta
复制链接

扫一扫