학습 목표
-동적인 HTML 웹 페이지 개발
-Spring MVC의 Model, View, Controller 기반 개발
학습 목차
1-1. Controller 추가 및 mustache에 인자 전달
1-2. 회원가입 페이지 구현
1-3. 사용자 목록 페이지 구현
1-4. 원격 서버에 소스 코드 배포
//WelcomeController.java
@Controller //1.
public class WelcomeController {
@GetMapping("/helloworld") //3.
public String welcome(String name, int age, Model model) { //4.
System.out.println("name : " + name + "age : " + age);
model.addAttribute("name", name); //5.
model.addAttribute("age", age);
return "welcome"; //2.1. @Controller: 클래스가 Controller의 역할을 한다는 의미를 부여하기 위한 어노테이션
2. mustache template 파일을 호출하기 위해서는 반드시 Controller를 통해서 호출해야 합니다. 따라서 해당 파일을 호출하기 위한 메소드를 만들고 파일을 리턴합니다. return 값은 main/resources -> templates 하위 파일을 호출합니다.
"welcome" : welcome.html을 자동으로 찾아줍니다.
3. @GetMapping(): HTML 파일을 직접 '호출(get)'해주는 어노테이션
괄호 안의 문자열을 url에 포함(localhost:8080/helloworld)하면 리턴되는 파일(welcome.html)의 내용이 호출됩니다.
4. url= localhost:8080/helloworld?name=javajigi&age=24
name, age: 변수명
javajigi, 24: 변수값
&: 두 개 이상의 값을 전달할 때 사용
url에 값을 입력하여 view에 해당하는 welcome.html로 전달해줍니다.
5. model에 저장한 값을 {{변수명}}을 이용하여 mustache로 전달합니다.
//welcome.html
<body>
{{name}}, Hello World!<br/>
나이는 {{age}}!
</body>
***mustache 문법 참고
mustache.github.io/mustache.5.html
mustache(5) - Logic-less templates.
mustache(5) Mustache Manual mustache(5) NAME mustache - Logic-less templates. SYNOPSIS A typical Mustache template: Hello {{name}} You have just won {{value}} dollars! {{#in_ca}} Well, {{taxed_value}} dollars, after taxes. {{/in_ca}} Given the following ha
mustache.github.io
//form.html
<form action="/create" method="post"> //1.
<div class="form-group">
<label for="userId">사용자 아이디</label>
<input type="text" class="form-control" name="userId" placeholder="사용자 아이디">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" name="password" placeholder="비밀번호">
</div>
<div class="form-group">
<label for="name">이름</label>
<input type="text" class="form-control" name="name" placeholder="이름">
</div>
<div class="form-group">
<label for="email">이메일</label>
<input type="email" class="form-control" name="email" placeholder="이메일">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
1. action: 서버에 요청을 보낼 때, 어떤 URL 주소로 보낼 것인지 지정
url을 새로 만들었기 때문에 그에 상응하는 컨트롤러를 만들어줘야 합니다.
method="post": get 방식을 사용하면 url에 비밀번호가 노출되어 보안상 안전하지 않기 때문에 post 방식으로 바꿔줌
//application.properties
spring.mustache.suffix: .html //1.
spring.mustache.prefix=classpath:/templates/ //2.1. mustache 리턴 주소에서 뒷부분 '.html'을 생략해주기 위한 코드
2. mustache 리턴 주소에서 앞부분 '/templates/'를 생략해주기 위한 코드
//UserController.java
@Controller
public class UserController {
@PostMapping("/create") //1.
public String create(String userId, String password, String name, String email) {
System.out.println("userId : " + userId, "name : " + name);
return "index";
}
}//사용자의 정보를 담는 클래스
//User.java
public class User {
private String userId;
private String password;
private String name;
private String email;
public void setUserId(String userId) {
this.userId=userId;
}
public void setPassword(String password) {
this.password=password;
}
public void setName(String name) {
this.name=name;
}
public void setEmail(String email) {
this.email=email;
}
@Override
public String toString() { //1.
return "User [userId=" + userId + ", password=" + password + ", name=" + name, "email=" + email +"]";
}
}
1. 데이터를 String 형식으로 출력하도록 지정해줍니다.
//변경1
//UserController.java
@Controller
public class UserController {
@PostMapping("/create")
public String create(User user) { //1.
System.out.println("user : " + user);
return "index";
}
}1. User 클래스를 만들어주었으므로 User만 받아오면 됩니다.
//변경2: 회원가입 리스트 만들기
//UserController.java
@Controller
public class UserController {
private List<User> users=new ArrayList<User>(); //1.
@PostMapping("/create")
public String create(User user) {
System.out.println("user : " + user);
users.add(user); //1.
return "index";
}
@GetMapping("/list") //2.
public String list(Model model) {
model.addAttribute("users", users);
return "list";
}
}1. 회원가입한 사용자들의 리스트를 만들어서 users에 저장합니다.
2. 사용자의 정보를 '가져오는 것'이므로 @GetMapping을 이용합니다.
<!--list.html-->
<tbody>
{{#users}} <!--1.-->
<tr>
<th scope="row">{{userId}}</th>
<td>{{name}}</td>
<td>{{email}}</td>
</tr>
{{/users}}
</tbody>1. {{#users}} {{/users}} 를 이용하여 model에 저장한 사용자 정보가 for문을 돌면서 html이 동적으로 생성됩니다.
//변경3: 회원가입 후 리스트로 바로 이동하기
//UserController.java
@Controller
public class UserController {
private List<User> users=new ArrayList<User>();
@PostMapping("/create")
public String create(User user) {
System.out.println("user : " + user);
users.add(user);
return "redirect:/list"; //1.
}
@GetMapping("/list")
public String list(Model model) {
model.addAttribute("users", users);
return "list";
}
}1. return "list": list.html로 이동
return "redirect:/list": @GetMapping의 /list로 이동
@GetMapping의 /list와 list.html은 다릅니다.
***redirect:/는 각각의 기능을 따로 구현한 후 각 기능을 서로 연결해줄 때 사용합니다.
'Spring > 게시판 만들기 프로젝트' 카테고리의 다른 글
| [Spring Boot] #3_2 게시판 만들기 (0) | 2020.12.21 |
|---|---|
| [Spring Boot] #3_1 게시판 만들기 (0) | 2020.12.21 |
| [Spring Boot] #2_2 게시판 만들기 (0) | 2020.12.09 |
| [Spring Boot] #2_1 게시판 만들기 (0) | 2020.12.09 |
| [Spring Boot]JPA (0) | 2020.12.07 |