국비 교육 95일차 - vue 활용 검색페이지 만들기

vue 기본을 급박하게 배우고.. 바로 프로젝트에 적용을 해봤다. 

내가 맡은 부분은 중고책과 인터넷강의 목록을 검색해서 보여주는 기능이었다. mapper부터 시작해서 차근차근 올라가보도록 하겠다.

 

<!-- 검색 리스트 -->
<sql id="bookReview-where">
<if test="type=='title'">
WHERE title LIKE '%'||#{userFind}||'%'
</if>
<if test="type=='author'">
WHERE author LIKE '%'||#{userFind}||'%'
</if>
</sql>
<select id="booksFindData" resultType="BooksVO" parameterType="hashmap">
SELECT no, poster, title, author, price, sale_price, num
FROM (SELECT no, poster, title, author, price, sale_price, rownum as num
FROM (SELECT no, poster, title, author, price, sale_price
FROM book_s
<include refid="bookReview-where"/>
))
WHERE num BETWEEN #{start} AND #{end}
</select>
<!-- find Totalpage -->
<select id="booksFindTotalPage" resultType="int" parameterType="hashmap">
SELECT CEIL(COUNT(*)/9.0) FROM 
(SELECT no, poster, title, author, price, sale_price, num 
FROM (SELECT no, poster, title, author, price, sale_price, rownum as num 
FROM (SELECT no, poster, title, author, price, sale_price
FROM book_s 
<include refid="bookReview-where"/>
)))
</select>

 제목으로 찾을건지, 저자명으로 찾을건지에 따라 sql문이 달라진다. 사용자가 어떤 값을 보내느냐에 따라 달라지는 쿼리 문장을 동적쿼리라고 한다. 

 

이를 적용해서 검색어에 맞는 책을 찾아오고, 또 그 안에서 페이지 나누는 처리도 하기 위해 위와 같이 sql문장을 적어주었다. 

 

@GetMapping("junggo/find.do")
	public String junggo_find_show(Model model)
	{
		List<BooksCategoryVO> cList=dao.booksCategory();
		
		model.addAttribute("cList", cList);
		model.addAttribute("main_jsp", "../junggo/junggo_find.jsp");
		return "main/main";
	}

 일단 화면에 띄워주기 위해서 그냥 Controller에서 먼저 만들어주고, 실제 데이터를 받아서 치리하는 부분은 RestController에서 만들어줬다. 

 

 

@GetMapping(value="junggo/junggo_find.do", produces="text/plain;charset=UTF-8")
	public String junggo_find(String userFind, String page, String type)
	{
		String json="";
		try
		{
			if(page==null)
				page="1";
			int curpage=Integer.parseInt(page);
			int rowSize=9;
			int start=(rowSize*curpage)-(rowSize-1);
			int end=(rowSize*curpage);
			Map map=new HashMap();
			map.put("userFind", userFind);
			map.put("start", start);
			map.put("end", end);
			map.put("type", type);
			
			List<BooksVO> fList=dao.booksFindData(map);
			JSONArray arr=new JSONArray();
			for(BooksVO fvo:fList)
			{
				JSONObject obj=new JSONObject();
				obj.put("no", fvo.getNo());
				obj.put("title", fvo.getTitle());
				obj.put("poster", fvo.getPoster());
				obj.put("price", fvo.getPrice());
				obj.put("author", fvo.getAuthor());
				obj.put("sale_price", fvo.getSale_price());
				arr.add(obj);
			}
			json=arr.toJSONString();
		}catch(Exception ex){ex.printStackTrace();}
		return json;
	}

 page, userFind(사용자 입력 데이터), type(검색 방법) 을 매개변수로 받아와서 처리를 해준다. 

json형식으로 넘겨줘야하기 때문에 JSONArray를 만들고 그 안에 VO를 하나로 묶어줄 수 있는 object를 만들어준다. 그리고 이것을 jsonString으로 변환해서 값을 넘긴다. 

 

@GetMapping("junggo/junggo_find_total.do")
	public String junggo_find_total(String type, String userFind)
	{
		Map map = new HashMap();
		map.put("type", type);
		map.put("userFind", userFind);
		int totalpage=dao.booksFindTotalPage(map);
		return String.valueOf(totalpage);
	}

 이건 total페이지를 계산해주는 getmapping

vue객체에서 따로 보내줬기 때문에 이렇게 썼다. 

 

 

이 아래부터는 Vue로 처리해준 부분

<div class="input-group filter-bar-search">
                <input type="text" placeholder="Search" v-model="userFind" autocomplete=off>
                <div class="input-group-append">
                 <button type="button" v-on:click="sendData()"><i class="ti-search"></i></button>
                </div>
              </div>

 v-model을 사용해서 사용자가 입력한 값을 받아오고, 

검색버튼을 눌렀을때 sendData()라는 사용자 정의 메소드를 만들어서 처리를 해준다. 

 

 

 

우선 vue객체를 먼저 생성해주고 

new Vue({
		 el:'#app',
		 data:{
			 findList:[],
			 userFind:'',
			 findTitle:'title',
			 curpage:1,
			 totalpage:1
		 }, 
		 mounted:function(){
			 let _this=this;
			 this.junggoGetData();
			 this.junggoTotalPage();
		 },

 받아올 데이터를 data에 적어주고, 가상돔에 미리 띄워줄 정보를 설정해둔다. 

 

근데 저 부분이 중복이 많이 되서 그냥 메소드처리했다.

methods:{
			 junggoGetData:function(){
				let _this=this;
				axios.get("http://localhost/main/junggo/junggo_find.do",{
					 params:{
						 userFind:this.userFind,
						 type:this.findTitle,
				 		 page:this.curpage
					 }
				 }).then(function(result){
					 _this.findList=result.data;
					 console.log(result.data)
				 })
			},
			
			junggoTotalPage:function(){
				let _this=this;
				axios.get("http://localhost/main/junggo/junggo_find_total.do",{
					params:{
						type:_this.findTitle,
						userFind:_this.userFind
					}
				}).then(function(response){
					_this.totalpage=response.data
				})
			},

 params는 get방식에서 ?뒤에 붙는 no=237 에 해당한다. 

저렇게 값을 보내줘야 페이지가 이동해도 다른 데이터들을 가지고 올 수 있기 때문에 빠져서는 안된다.

 

sendData:function(){
				 
				 this.curpage=1;
				 this.junggoGetData();
				 this.junggoTotalPage();
			 },
		 
			 showPrevPage(){
			 		this.curpage=this.curpage>1?this.curpage-1:this.curpage;
			 		this.junggoGetData();
			 	},
			 	
			 	showNextPage(){
			 		this.curpage=this.curpage<this.totalpage?this.curpage+1:this.curpage;
			 		this.junggoGetData();
			 	}

 페이지 이동하는 메소드 

앞뒤로 이동하게 만들었다. 

 

검색하면 이렇게 뜨고 

 

페이지도 나눠서 뜬다

 

사실 ajax로 검색기능을 구현했었는데 페이지 나누기가 너무 어려웠다 ㅠㅠ

근데 vuejs로 하니 복잡하지도 않고 금방해서 반했다..

 

수업끝나면 혼자서 vuejs 좀 더 공부해보려고 한다.