Springboot+vue.js 구매페이지 만들기!(1) 품목 표시

http://localhost:3030/shopMainPage?kind=coffee

 

프런트 서버

사이드 바를 구해야 했다

부트스트랩 사이드 바를 하나 가져 와서 바꿨다

html

사이드바 추가 후

검색/페이징에 필요한 것들을 만들었다

css

js

사실 nexPage/beforePage는 

변수만 다른 것이다 파라미터를

1/-1 받아주면서 합쳐보자

 

js

페이지 입장 시 파라미터 값을 찾아

서버로 요청을 보낸다

 

백엔드 서버

Service

productService.java

productService.java

조건대로 품목을 가져온다

public JSONObject getProducts(HttpServletRequest request) {

검색키워드에 따라 다른 쿼리문을 던진다

private List<getProductInter> getProductVos(String kind,int start,String keyword) {

원래 sql 자체에도 조건문이 있는 걸로 아는데

일단 잘 몰라서 나눠주는 함수를 만들었다

 

테스트

http://localhost:3030/shopMainPage?kind=coffee

http://localhost:3030/shopMainPage?kind=cake

아쉬운 건 

a태그에 #을 이용해 페이지 이동 없이

품목만 바꾸려고 했는데 

새로고침 시 기본값=coffee로 돌아가져서

그냥 품목 선택 시 페이지가 이동된다

그리고 

사이즈는 요새는 레귤러/라지만 있는 걸로 아는데

그렇게 하면 커피 종류를 더 많이 가져와야 해서 ㅋㅋㅋ

귀찮아서 s/m/r/l로 만들었다

아근데 방금 찾았는데

자바스크립트에서 새 로고 침 없이

url 변경할 수 있는 방법이 있다고 한다

적용해봐야겠다!

 

 

검색 테스트

스프링 레거시 공부하느라 

토이 프로젝트 진도가 느리다

 

이글도 일주일 전에 

작성해놓았던것이여서 

코드부분이 조금 다를 수도 있다

 

새로고침없이 url변경

자바스크립트 진짜 놀랍다..

https://xetown.com/tips/93530

History.pushState() - 페이지 갱신 없이 주소를 변경하자.

이글을 보고 알았다

js

프론트서버 적용

테스트 하니

놀랍게도 url이 새로고침없이 바뀌고

새로고침시 바뀐 url로 서버에게 요청한다...

우와 새로운 사실을 또알았다