스프링환경에선 위와 같이 css경로를 지정해줘야 적용이 됨.
스프링 web.xml파일 설정함.
스프링 HomeController-JS 를 통해 로그인을 하는 3가지 방법 (클라이언트의 입력값을 가져오는)을 배움
1. ID,PW . 클라이언트가 각각 입력한 값을 form을 활용하는 방법
//Schedule.js
function makeForm(action, method, name=null){
let form = document.createElement("form");
if(name != null){
form.setAttribute("name",name);}
// 클라이언트를 통해 들어온 ID,PW를 jsp에서의 name을 의미함.
form.setAttribute("action",action);
// HomeController에서 어떤 Page로 이동할지
form.setAttribute("method", method);
// Servlet의 get방식,post방식
return form;
}javascript에서 Spring의 HomeController로 넘길 Action,Method를 파라미터값으로 지정한다. 그리구 이 function을
로그인정보를 보내게 되는 sendAccessInfo라는 function에서 활용을 하게 된다.
//Schedule.js
function sendAccessInfo(){
const uCode = document.getElementsByName("uCode")[0];
//uCode는 클라이언트에 입력한 ID값.
const aCode = document.getElementsByName("aCode")[0];
//aCode는 클라이언트에 입력한 PW값,
let form = makeForm("LogIn","post");
// makeForm 각각의 parameter는 HomeController의 Action, Method를 의미함. + form 생성
form.appendChild(uCode);
form.appendChild(aCode);
//form의 자식을 만들어주고
document.body.appendChild(form);
//body를 추가
form.submit();
//form을 보내준다
}위의 function은 LogIn.jsp의 클릭한값에 넘겨주게 된다. input type =button에 onClick=sendAccessInfo()를 적용해 준다.
//HomeController.java
@Controller
public class HomeController {
@PostMapping( "/LogIn" )
public String Login(@RequestParam("uCode") String uCode, @RequestParam("aCode") String aCode) {
System.out.print(uCode + aCode);
return "login";
}Spring의 Servlet단을 Control하는 Class다.
@Controller 어노테이션은 해당 클래스가 Controller 클래스임을 나타내주는 어노테이션이다. 이 Controller 어노테이셔을 씀으로써
@RequestMapping, @GetMapping @PostMapping등의 어노테이셔을 추가로 사용할수있다.
@PostMapping은 스프링의 어노테이션으로써 Post방식으로 불러올수있는 어노테이션이다. 괄호안에 action페이지를 작성해준다.
반대로는 @GetMapping이 있는데 Get방식으로 불러올수있는 어노테이션이다.
또한 @RequestParam 어노테이션은 HttpServeletRequest와 같은 역할을 해준다. 즉 js에서 setAttribute한 값을 받아오는 역할을 해주는데 위처럼 파라미터값을 넣어줌으로써 값을 가져올수있다. 유용한 어노테이션이 일거 같다.
그리고 jsp에 있는 위의 Servlet을 통해 클라이언트에 입력한값을 출력해줌으로써 기능은 종료된다.
2.ID, PW. 클라이언트가 입력한 2개의 값을 하나의 name으로 지정하고, form을 이용해 ArrayList<String> List 활용 하는 방법.
//Schedule.js
function makeForm(action, method, name=null){
let form = document.createElement("form");
if(name != null){
form.setAttribute("name",name);}
// 클라이언트를 통해 들어온 ID,PW를 jsp에서의 name을 의미함.
form.setAttribute("action",action);
// HomeController에서 어떤 Page로 이동할지
form.setAttribute("method", method);
// Servlet의 get방식,post방식
return form;
}javascript에서 Spring의 HomeController로 넘길 Action,Method를 파라미터값으로 지정한다. 그리구 이 function을
로그인정보를 보내게 되는 sendAccessInfo2라는 function에서 활용을 하게 된다.
//Schedule.js
function sendAccessInfo2(){
let Code1 = document.getElementsByName("Code")[0];
let Code2 = document.getElementsByName("Code")[1];
//Code1은 ID값, Code2는 PW값이며 LogIn.jsp에서 Code라는 한가지 Name에 값을 각각 넣어준다.[배열처리]
let form = makeForm("LogIn2","post");
//LogIn2페이지에 post 방식으로
form.appendChild(Code1);
form.appendChild(Code2);
//form의 자식생성
document.body.appendChild(form);
//body 생성
form.submit();
//입력값 전송
}
1번째 방법과 비슷하지만 주석에 남긴것과 같이 LogIn.jsp페이지에서 ID,PW 두가지값을 한가지 name으로 지정. 배열처리해 값을 넘겨준다.
그리고 makeForm을이용해 servlet에 넘겨줄 Action,Method를 작성하고 form을 생성해 값을 전송한다.
//HomeController.java
@Controller
public class HomeController {
@PostMapping( "/LogIn2" )
public String Login2(@RequestParam("Code") ArrayList<String> list) {
System.out.print(list.get(0) + list.get(1));
return "login";
}
}@Controller 어노테이션은 해당 클래스가 Controller 클래스임을 나타내주는 어노테이션이다. 이 Controller 어노테이셔을 씀으로써
@RequestMapping, @GetMapping @PostMapping등의 어노테이셔을 추가로 사용할수있다.
첫번째 방법과 동일하게 @PostMapping 어노테이션을 통해 post방식으로 값을 받아온다. 다만 파라미터값에 @RequestParam
어노테이션을 사용해 Schedule.js에서 입력한값 Code1,Code2를 LogIn.jsp의 한가지 name을 통해 배열로 받아와 출력한다.
HomeController의 Mapping을 통해 클라이언트 입력값(js)를 통해 값을 가져올때 name은 한가지고 여러값이 있다면 파라미터를 ArrayList(배열로)지정해줌으로써 복수의 값을 가져올수있다.
위의 Servlet을 통해 클라이언트에 입력한값을 출력해줌으로써 기능은 종료된다.
3.ID, PW를 클라이언트가 입력한 값을 bean에 저장과 동시에 서버단으로 값을 가져오는 방법. (@ModelAttribute 어노테이션을 활용.)
//Schedule.js
function makeForm(action, method, name=null){
let form = document.createElement("form");
if(name != null){
form.setAttribute("name",name);}
// 클라이언트를 통해 들어온 ID,PW를 jsp에서의 name을 의미함.
form.setAttribute("action",action);
// HomeController에서 어떤 Page로 이동할지
form.setAttribute("method", method);
// Servlet의 get방식,post방식
return form;
}
javascript에서 Spring의 HomeController로 넘길 Action,Method를 파라미터값으로 지정한다. 그리구 이 function을
로그인정보를 보내게 되는 sendAccessInfo3라는 function에서 활용을 하게 된다.
//Schedule.js
function sendAccessInfo(){
const uCode = document.getElementsByName("uCode")[0];
//uCode는 클라이언트에 입력한 ID값.
const aCode = document.getElementsByName("aCode")[0];
//aCode는 클라이언트에 입력한 PW값,
let form = makeForm("LogIn","post");
// makeForm 각각의 parameter는 HomeController의 Action, Method를 의미함. + form 생성
form.appendChild(uCode);
form.appendChild(aCode);
//form의 자식을 만들어주고
document.body.appendChild(form);
//body를 추가
form.submit();
//form을 보내준다
}1번째 방법과 동일하게 위의 function은 LogIn.jsp의 클릭한값에 넘겨주게 된다. input type =button에 onClick=sendAccessInfo()를 적용해 준다.
//UserBean.java
@Data
public class UserBean {
String uCode;
String aCode;
}다만 이번 방법은 클라이언트단에 들어오게 되는 uCode,aCode (각각 ID,PW)를 bean에 저장과 동시에 백엔드로 가져오는 방법이다.
@Data라는 어노테이션은 값을 선언해주면 bean역할을 해주는 getter,setter방식의 메소드를 만들어주는 어노테이션이다.
이 어노테이션을 통해 bean클래스에서 getter,setter메소드를 일일이 만들어 줄 필요가 없어진다. 좋다!
//HomeController.java
@Controller
public class HomeController {
@PostMapping( "/LogIn3" )
public String Login3(@ModelAttribute UserBean ub) {
System.out.print(ub.getUCode() + ":" + ub.getACode());
return "login";
}
}@ModelAttribute 어노테이션은