vue-specification 동적 조회 구현

Specification을 통한 동적 조회
Dao 패키지의 IStudent.java

public interface IStudent extends JpaRepository<Student,Integer> {
List<Student> findAll(Specification<Student> specification);
    Long count(Specification<Student> specification);
    Page<Student> findAll(Specification<Student> specification, Pageable pageable);
}

서비스 패키지의 서비스 Student.java

@Service
public class ServiceStudent {
    @Resource
    IStudent studentDao;
	public List<Student> queryFlows(int pageNo, int pageSize, Student student) {
        List<Student> result = null;
        //          
        Specification<Student> queryCondition = new Specification<Student>() {
            @Override
            public Predicate toPredicate(Root<Student> root, CriteriaQuery<?> criteriaQuery, CriteriaBuilder criteriaBuilder) {
                List<Predicate> predicateList = new ArrayList<>();
                if (student.getName() != null) {
                    predicateList.add(criteriaBuilder.like(root.get("name"), "%" +student.getName()+ "%"));
                }
                if (student.getSid()!=0) {
                    predicateList.add(criteriaBuilder.equal(root.get("sid"),student.getSid()));
                }
                if (student.getTelephone()!= null) {
                    predicateList.add(criteriaBuilder.equal(root.get("telephone"),student.getTelephone()));
                }
//                if (status != null) {
//                    predicateList.add(criteriaBuilder.equal(root.get("status"), status));
//                }
//                if (createTimeStart != null && createTimeEnd != null) {
//                    predicateList.add(criteriaBuilder.between(root.get("createTime"), createTimeStart, createTimeEnd));
//                }
                    return criteriaBuilder.and(predicateList.toArray(new Predicate[predicateList.size()]));
                }
        };

        //       ，              0       ，           
        try {
            if (pageNo == 0 && pageSize == 0) {
                result = studentDao.findAll(queryCondition);
            } else {
                result = studentDao.findAll(queryCondition, PageRequest.of(pageNo - 1, pageSize, Sort.by(Sort.Direction.DESC, "sid"))).getContent();
            }
        } catch (Exception e) {
            //  LOGGER.error("--queryFlowByCondition-- error : ", e);
        }

        return result;
    }
}

Controller.java

@RequestMapping("/index")
    @ResponseBody
    public JsonResult index(Student student, HttpServletRequest request){

        //List data= studentService.findAll(Sort.by("sid"));
        System.out.print(request.getParameter("name"));
        System.out.print(request.getParameter("sid"));
        System.out.print(request.getParameter("telephone"));
        List<Student> data= serviceStudent.queryFlows(1,5,student);
        return new JsonResult<>(data, "        ");
    }

프런트엔드 vueindex

<td>
                     <input type="text" name="name" v-model="like.name">
                     ：
                   <select v-model="like.sid">
                       <option v-for="(v,index) in classes":value="v.cid">{{v.cname}}</option>
                   </select>
                     ：<input type="text" name="telephone" v-model="like.telephone">
                   <button v-on:click="findName()">  </button>
               </td>

vue 코드

<script type="text/javascript">
    var vm=new Vue({
        el: "#root",
        data: {
        	like:{},
        },
        methods:{
 		findName:(function () {
                $.ajax({
                    url:"http://localhost:8080/student/index",
                    data:this.like,
                    success:function (result) {

                        if (result.code == 0) {
                            vm.list = [];
                            var len = result.data.length;
                            for (var i = 0; i < len; i++) {
                                vm.list.push(result.data[i]);
                            }
                        } else {
                            vm.message = result.msg;
                        }
                    }
                })
            }),
}