VueJS로 검색 기능 만들기 (코드만 정리)
부트캠프(END)/-Spring2022. 9. 16. 17:03
FoodMapper.java (Interface)
package doo.doo.mapper;
import java.util.*;
import doo.doo.vo.*;
import org.apache.ibatis.annotations.Select;
public interface FoodMapper {
@Select("SELECT fno, name, poster, num " +
"FROM (SELECT fno, name, poster, rownum as num " +
"FROM (SELECT fno, name, poster " +
"FROM food_location WHERE address LIKE '%'||#{address}||'%')) " +
"WHERE num BETWEEN #{start} AND #{end}")
public List < FoodVO > foodFindData(Map map);
@Select("SELECT CEIL(COUNT(*)/12.0) FROM food_location " +
"WHERE address LIKE '%'||#{address}||'%'")
public int foodLocationTotalPage(String address);
}FoodDAO.java (Class)
FoodService.java (Class)
package doo.doo.service;
import java.util.*;
import doo.doo.vo.*;
public interface FoodService {
public List < FoodVO > foodFindData(Map map);
public int foodLocationTotalPage(String address);
}FoodServiceImpl.java (Class)
package doo.doo.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.*;
import doo.doo.dao.*;
import doo.doo.vo.*;
@Service
public class FoodServiceImpl implements FoodService {
@Autowired
private FoodDAO dao;
@Override
public List < FoodVO > foodFindData(Map map) {
return dao.foodFindData(map);
}
@Override
public int foodLocationTotalPage(String address) {
return dao.foodLocationTotalPage(address);
}
}FoodController.java (Class)
package doo.doo.web;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.*;
import doo.doo.service.*;
import doo.doo.vo.*;
@Controller
public class FoodController {
//사용자의 요청(요구사항) = 클라이언트로부터 서버가 요청을 받는 곳은 주소창이다! 그래서 주소로 다 찾는것임.
@Autowired
private FoodService service;
@Autowired
private RecipeService rService;
@GetMapping("food/food_find_vue.do")
public String food_find_vue() {
return "food/food_find_vue";
}
}FoodRestController.java (Class)
package doo.doo.web;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.*;
import doo.doo.dao.FoodDAO;
import doo.doo.service.*;
import doo.doo.vo.*;
@RestController
public class FoodRestController {
@Autowired
private FoodService service;
@Autowired
private FoodDAO dao;
@GetMapping(value = "food/food_find_vue.do", produces = "text/plain;charset=UTF-8")
public String food_find(String ss, String page) {
String result = "";
try {
if (page == null)
page = "1";
if (ss == null)
ss = "강남";
int curpage = Integer.parseInt(page);
Map map = new HashMap();
int rowsize = 12;
int start = rowsize * curpage - (rowsize - 1);
int end = rowsize * curpage;
map.put("start", start);
map.put("end", end);
map.put("address", ss);
List < FoodVO > list = service.foodFindData(map);
int totalpage = service.foodLocationTotalPage(ss);
JSONArray arr = new JSONArray(); //List를 JSON으로 변경
int k = 0;
for (FoodVO vo: list) {
JSONObject obj = new JSONObject(); //{"no":1,"name":"kim"} 이렇게 됨
obj.put("fno", vo.getFno());
obj.put("name", vo.getName());
obj.put("poster", vo.getPoster().substring(0, vo.getPoster().indexOf("^")));
if (k == 0) {
obj.put("curpage", curpage);
obj.put("totalpage", totalpage);
}
arr.add(obj);
k++;
}
result = arr.toJSONString();
} catch (Exception ex) {}
return result;
}
}food_find_vue.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
Search:<input type=text size=20 class="input-sm" :value="ss" ref="ss" v-model="ss">
<input type=button value="검색" class="btn btn-sm btn-primary" v-on:click="foodFind()">
</div>
<div style="height:50px"></div>
<div class="row">
<div class="col-md-4" v-for="vo in food_list">
<div class="thumbnail">
<a :href="'../food/food_detail_vue.do?fno='+vo.fno">
<img :src="vo.poster" style="width:200px">
<div class="caption">
<p>{{vo.name}}</p>
</div>
</a>
</div>
</div>
</div>
<div style="height:20px"></div>
<div class="row">
<div class="text-center">
<input type="button" class="btn btn-sm btn-danger" v-on:click="prev()" value="이전">
{{curpage}} page / {{totalpage}} pages
<input type="button" class="btn btn-sm btn-danger" v-on:click="next()" value="다음">
</div>
</div>
</div>
<script>
new Vue({
el:'.container',
data:{
curpage:1,
totalpage:0,
ss:'강남',
food_list:[]
},
mounted:function(){
this.send();
},
methods:{
send:function(){
axios.get('http://localhost:8080/web/food/food_find_vue.do',{ //데이터를 보내고 받아오는 역할
params:{
ss:this.ss,
page:this.curpage
}
}).then(result=>{
console.log(result);
this.food_list=result.data;
this.curpage = this.food_list[0].curpage;
this.totalpage = this.food_list[0].totalpage;
})
},
foodFind:function(){
if(this.ss===""){
alert("검색어를 입력하세요");
this.$refs.ss.focus();
return;
}
this.send();
},
prev:function(){
this.curpage = this.curpage>1?this.curpage-1:curpage;
this.send();
},
next:function(){
this.curpage = this.curpage<this.totalpage?this.curpage+1:curpage;
this.send();
}
}
})
</script>
</body>
</html>'부트캠프(END) > -Spring' 카테고리의 다른 글
| 로그인 보안 처리하기(코드만 정리) (0) | 2022.09.20 |
|---|---|
| VueJS로 CURD 게시판 만들기 (코드만 정리) (0) | 2022.09.16 |
| 네이버 OpenAPI로 추천 기능 만들기 (0) | 2022.09.15 |
댓글()
