前后端分离第三天

今天学习了增删改查中的查，继昨天的总查询后，新增加了模糊查询功能以及分页功能

新添加了两个java类：

        BaseRequest和UserPageRequest、result，同时还进行了一些更改

主要内容如下：

Result类

package com.example.springboot.common;

import lombok.Data;
//希望后台包装result数据，将数据存到result的get里面
//这是一个result的通用返回类
@Data
public class Result {
    private static final String SUCCESS_CODE = "200";
    private static final String ERROR_CODE = "-1";


    private String code;//相应结果从code体现
    private Object data;//前端从data拿数据
    private String msg;//msg存放错误信息

    public static Result success(){
        Result result = new Result();
        result.setCode(SUCCESS_CODE);
        return result;
    }

    public static Result success(Object data){
        Result result = new Result();
        result.setCode(SUCCESS_CODE);
        result.setData(data);
        return result;
    }

    public static Result error(String msg){
        Result result = new Result();
        result.setCode(ERROR_CODE);
        result.setData(msg);
        return result;
    }

}

该类提供一个方法，让其他调用该方法的类可以获取到相应情况、data数据和描述，其中主要内容为data

BaseRequest：

package com.example.springboot.controller.request;

import lombok.Data;

@Data
public class BaseRequest{
    private Integer pageNum = 1;
    private Integer pageSize = 10;
}

该类定义了分页的基础，提供pageNum和pageSize准备给前端获取

UserPageRequest：

package com.example.springboot.controller.request;

import lombok.Data;

@Data
public class UserPageRequest extends BaseRequest{
    private String name;
    private String phone;

}

该类提供模糊查询的前要条件，等待前端获取

mybatis.xml

<select id="listByCondition" resultType="com.example.springboot.entity.User">
        select * from patient_information
            <where>
                <if test="name != null and name != ''">
                    name like concat('%',#{ name },'%')
                </if>
                <if test="phone != null and phone != ''">
                 and phone like concat('%',#{ phone },'%')
                 </if>
            </where>
    </select>

定义查询语句，如果不为null时执行

controller

package com.example.springboot.controller;

import com.example.springboot.common.Result;
import com.example.springboot.controller.request.UserPageRequest;
import com.example.springboot.entity.User;
import com.example.springboot.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    IUserService userService;

    //总查询
    @GetMapping("/list")
    public Result list(){
        List<User> users = userService.list();
        return Result.success(users);
    }

    @GetMapping("/page")
    public Result page(UserPageRequest userPageRequest){
        return Result.success(userService.page(userPageRequest));
    }
}

新添加一个地址，同时以前所有的userlist均改为user

usermapper

package com.example.springboot.mapper;

import com.example.springboot.controller.request.UserPageRequest;
import com.example.springboot.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface UserMapper {

//    @Select("select * from patient_information")
    List<User> list();

//    @Select("select * from user where patient_information like concat('%',#{ name },'%') and phone like concat('%',#{ phone },'%')")
    List<User> listByCondition(UserPageRequest userPageRequest);
}

userserivce

package com.example.springboot.service.impl;

import com.example.springboot.common.Result;
import com.example.springboot.controller.request.UserPageRequest;
import com.example.springboot.entity.User;
import com.example.springboot.mapper.UserMapper;
import com.example.springboot.service.IUserService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserService implements IUserService {

    @Autowired
    UserMapper userMapper;
    @Override
    public List<User> list() {
        return userMapper.list();
    }

    @Override
    public Object page(UserPageRequest userPageRequest){
        PageHelper.startPage(userPageRequest.getPageNum(),userPageRequest.getPageSize());
        List<User> users = userMapper.listByCondition(userPageRequest);
        return new PageInfo<>(users);
    }
}

总之：

        user.xml(mybatis)=>usermapper=>userservice=>usercontroller

前端：

methods:{
    load(){
      // fetch('http://localhost:9090/user/list').then(res => res.json()).then(res =>{
      //   this.tableData = res
      // })

      request.get('/user/page',{
        params: this.params
      }).then(res => {
        if (res.code === '200'){
          this.tableData = res.data.list
          this.total = res.data.total
        }else {
          alert("传输失败")
        }
      })
    },
    reset(){
      this.params = {
        pageNum: 1,
        pageSize: 10,
        name: '',
        phone: ''
      }
    }
  }

方法区进行更改

<div style="margin-bottom: 20px;">
      <el-input style="width: 240px;margin-left: 10px;margin-top: 10px;" placeholder="请输入名称" v-model="params.name"></el-input>
      <el-input style="width: 240px; margin-left: 10px;" placeholder="请输入联系方式" v-model="params.phone"></el-input>
      <el-button style="margin-left: 15px;margin-top: 10px;" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
      <el-button style="margin-left: 15px;margin-top: 10px;" type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
    </div>

输入框进行更改

<div style="margin-top:20px">
        <el-pagination
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          small
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>

分页区进行更改

data() {
    return {
      tableData: [],
      total:0,
      params:{
        pageNum: 1,
        pageSize: 10,
        name: '',
        phone: ''
      }
    }
  },

data区进行更改

总体很简单，没什么好说的