SpringBoot2+Vue2实战(二)SpringBoot集成Mybatis实现crud

一、查询功能

User

@Data
public class User {

    private Integer id;

    private String username;

    private String password;

    private String nickname;

    private String email;

    private String phone;

    private String address;
    
    private Date createTime;
}

UserController

UserController

UserService

UserServiceImpl

UserMapper

UserService

List<User> selectAll();

UserServiceImpl

@Override
    public List<User> selectAll() {
        return userMapper.selectAll();
    }

UserMapper

@Select("select * from sys_user")
    List<User> selectAll();

二、增加和修改

UserController

//新增和修改
    @PostMapping("/save")
    public Integer save(@RequestBody User user){
        //新增或者更新
        return userService.save(user);
    }

UserService

Integer save(User user);

UserServiceImpl

 @Override
    public Integer save(User user) {
        //如果user没有id，则表示为新增
        if (user.getId() == null){
           return userMapper.save(user);
        }else {//否则为更新
          return userMapper.update(user);
        }
    }

UserMapper

@Insert("insert into sys_user(username,password,email,nickname,phone,address) values(#{username},#{password},#{email}," +
            "#{nickname},#{phone},#{address})")
    Integer save(User user);

    Integer update(User user);

UserMapper.xml

<update id="update">
        update sys_user
        <set>
            <if test="username!=null">
                username = #{username},
            </if>
            <!--<if test="password!=null">
                password = #{password}
            </if>-->
            <if test="email!=null">
                email = #{email},
            </if>
            <if test="nickname!=null">
                nickname = #{nickname},
            </if>
            <if test="phone!=null">
                phone = #{phone},
            </if>
            <if test="address!=null">
                address = #{address}
            </if>
        </set>
        <where>
            id = #{id}
        </where>
    </update>

三、删除

UserController

 @DeleteMapping("/{id}")
    public Integer delete(@PathVariable Integer id){
        return userService.deleteById(id);
    }

UserService

 @DeleteMapping("/{id}")
    public Integer delete(@PathVariable Integer id){
        return userService.deleteById(id);
    }

UserServiceImpl

 @Override
    public Integer deleteById(Integer id) {
        return userMapper.deleteById(id);
    }

UserMapper

Integer deleteById(@Param("id") Integer id);

UserMapper.xml

<delete id="deleteById">
        delete from sys_user
        where id = #{id}
    </delete>

四、分页查询

UserController

//分页查询
    //接口路径 /user/selectPage?pageNum = 1 &pageSize = 10
    //@RequestParam 接收
    //limit第一个参数 = (pageNum - 1)*pageSize
    //pageSize
    @RequestMapping("/selectPage")
    public Map<String, Object> selectPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize){
        pageNum = (pageNum -1) *pageSize;
        List<User> data =  userService.selectPage(pageNum,pageSize);
        Integer total =  userService.selectTotal();
        Map<String,Object> res = new HashMap<>();
        res.put("total",total);
        res.put("data",data);
        return res;
    }

UserService

List<User> selectPage(Integer pageNum, Integer pageSize);

    Integer selectTotal();

UserServiceImpl

@Override
    public List<User> selectPage(Integer pageNum, Integer pageSize) {
        return userMapper.selectPage(pageNum,pageSize);
    }

    @Override
    public Integer selectTotal() {
        return userMapper.selectTotal();
    }

UserMapper

List<User> selectPage(Integer pageNum, Integer pageSize);

    Integer selectTotal();

UserMapper.xml

 <select id="selectPage" resultType="com.example.springboot.entity.User">
       select *
       from sys_user
       where username
       like #{username}
       limit #{pageNum},#{pageSize}
    </select>
    
    <select id="selectTotal" resultType="java.lang.Integer">
        select count(id)
        from sys_user
        where username like concat('%', #{username}, '%')
    </select>

传统方法 ：

//修改分页组件
<div style="padding:10px 0">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>



//添加参数
data() {
            return {
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 2,
                msg: "hello word",
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
                logoTextShow: true,
                headerBg: 'headerBg'
            }
        },



//封装方法
 load() {
                fetch("http://localhost:9090/user/selectPage?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize)
                    .then(res => res.json()).then(res => {
                    console.log(res)
                    this.tableData = res.data
                    this.total = res.total
                })
            },


//实现分页页面跳转
handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },

            handleCurrentChange(pageNum) {
                this.pageNum = pageNum
                this.load()
            }

搜索框实现

 <div style="padding: 10px 0">
//绑定username
                    <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"
                              class="ml-5" v-model="username"></el-input>
                    //调用load方法
                    <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
                </div>


//创建username默认值

data() {
            return {
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 2,
                username:"",
                msg: "hello word",
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
                logoTextShow: true,
                headerBg: 'headerBg'
            }
        },


//为方法添加参数

load() {
                fetch("http://localhost:9090/user/selectPage?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&username=" + this.username)
                    .then(res => res.json()).then(res => {
                    console.log(res)
                    this.tableData = res.data
                    this.total = res.total
                })
            },