Code ví dụ Spring MVC Form, Xử lý Form Spring-MVC

Code ví dụ Spring MVC Form, Xử lý Form Spring-MVC

Xử lý Form trong Spring MVC

Các công nghệ sử dụng trong bài viết này

Trong 2 bài trước chúng ta đã tìm hiểu các tạo một ứng dụng web với Spring MVC sử dụng xml config và annotation config.

Bản thân mình thấy annoation config thì khá là gọn nhẹ và nhanh chóng, nhưng mình lại thích xml config hơn vì nó phân tách rõ giữa phần code và phần cấu hình, trong các ứng dụng cần nhiều cấu hình thì xml tỏ ra rõ ràng và dễ đọc hơn.

==> Trong các ví dụ từ đây mình sẽ đều sử dụng xml config.

Ví dụ 1:

Nhập thông tin của 1 nhân viên (gồm id và name) sau đó chuyển name thành chữ hoa và in ra màn hình.

Các thư viện sử dụng:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>stackjava.com</groupId>
  <artifactId>SpringForm</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>

  <properties>
    <spring.version>5.0.2.RELEASE</spring.version>
  </properties>
  <dependencies>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
  </dependencies>
</project>

Các file entities:

package stackjava.com.springmvchello.entities;

public class Employee {
  private int id;
  private String name;

  // getter/setter

}

File Controller

package stackjava.com.springmvchello.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import stackjava.com.springmvchello.entities.Employee;

@Controller
public class EmployeeController {

  @RequestMapping(value = { "/"}, method = RequestMethod.GET)
  public String addEmployee(Model model) {
    model.addAttribute("employee", new Employee());
    return "add-employee";
  }

  @RequestMapping(value = "/addEmployee", method = RequestMethod.POST)
  public String doAddEmployee(@ModelAttribute("employee") Employee employee, ModelMap modelMap) {
    employee.setName(employee.getName().toUpperCase());
    modelMap.addAttribute("employee", employee);
    return "view-employee";
  }

}

Tham số model hay modelMap trong các method là các biến được dùng để truyền dữ liệu giữa màn hình với controller, giữa các controller.VD: ở method addEmployeemodel.addAttribute("employee", new Employee()); nó sẽ truyền một đối tượng new Employee() với name là employee tới màn hình add-employee.

File Spring Config

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
  xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
    http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">

  <context:component-scan base-package="stackjava.com.springmvchello" />

  <bean
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix">
      <value>/WEB-INF/views/jsp/</value>
    </property>
    <property name="suffix">
      <value>.jsp</value>
    </property>
  </bean>
</beans>

File web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://java.sun.com/xml/ns/javaee"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  version="2.5">
  <display-name>SpringMVCHello</display-name>

  <servlet>
    <servlet-name>spring-mvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>spring-mvc</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

Spring MVC (4): Code ví dụ Spring MVC Form, Xử lý Form Spring-MVC

File add-employee.jsp sẽ định nghĩa form để nhập thông tin id/name

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<title>Spring MVC Form Handling</title>
</head>

<body>
  <h2>Employee</h2>
  <form:form method="POST" action="addEmployee" modelAttribute="employee">
    Id: <form:input path="id" />
    <br/>
    Name: <form:input path="name" />
    <input type="submit" value="Submit" />
  </form:form>
</body>
</html>
  • modelAttribute: biểu thị đối tượng được sử dụng trong form. Ví dụ modelAttribute=”employee” tức là form này sẽ thực hiện xử lý các thuộc tính của đối tượng employee vừa truyền tới từ controller.
  • Thuộc tính path trong các thẻ form thực hiện map với các thuộc tính của đối tượng trong modelAttribute. Ví dụ path=”id” sẽ được hiểu là giá trị của thuộc tính ‘id’ trong đối tượng employee.

File view-employee.jsp sẽ hiển thị các thông tin id/name vừa nhập

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<html>
<head>
<title>Spring MVC Form Handling</title>
</head>

<body>
  <h2>Employee</h2>
  Id:${employee.id}
  <br/>
  Name:${employee.name}
</body>
</html>

cú pháp ${value} là cú pháp của JTSL thực hiện in ra giá trị của đối tượng bên trong

Demo:

Download code ví dụ trên tại đây

Ví dụ 2:

Trong ví dụ này mình sẽ nhập thông tin của một nhân viên (employee) có nhiều thông tin phức tạp hơn và in nó ra màn hình.

Mình sẽ sử dụng nhiều loại thẻ trong form để các bạn có 1 cái nhìn chung về form trong spring mvc.

Các thư viện sử dụng:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>stackjava.com</groupId>
  <artifactId>SpringForm</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>

  <properties>
    <spring.version>5.0.2.RELEASE</spring.version>
  </properties>
  <dependencies>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
  </dependencies>
</project>

Các file entities:

package stackjava.com.springmvchello.entities;

public class Employee {
  private int id;
  private String name;
  private String address;
  private String email;
  private String gender;
  private String[] favorites;
  private String position;

  // getter/setter

}

File Controller

package stackjava.com.springmvchello.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import stackjava.com.springmvchello.entities.Employee;

@Controller
public class EmployeeController {

  @RequestMapping(value={"/", "/addEmployee"}, method = RequestMethod.GET)
  public String addEmployee(Model model) {
    model.addAttribute("employee", new Employee());

    List<String> listFavorite = new ArrayList<String>();
    listFavorite.add("Swimming");
    listFavorite.add("Listening music");
    listFavorite.add("Walking");
    listFavorite.add("Watching movie");
    listFavorite.add("Reading comic");
    model.addAttribute("listFavorite", listFavorite);

    List<String> listPosition = new ArrayList<String>();
    listPosition.add("Developer");
    listPosition.add("Designer");
    listPosition.add("Tester");
    listPosition.add("QA");
    model.addAttribute("listFavorite", listFavorite);
    model.addAttribute("listPosition", listPosition);

    return "add-employee";
  }

  @RequestMapping(value = "/addEmployee", method = RequestMethod.POST)
  public String doAddEmployee(@ModelAttribute("employee") Employee employee, ModelMap modelMap) {
    modelMap.addAttribute("employee", employee);
    return "view-employee";
  }

}

File Spring Config

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
  xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
    http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">

  <context:component-scan base-package="stackjava.com.springmvchello" />

  <bean
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix">
      <value>/WEB-INF/views/jsp/</value>
    </property>
    <property name="suffix">
      <value>.jsp</value>
    </property>
  </bean>
</beans>

File web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://java.sun.com/xml/ns/javaee"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  version="2.5">
  <display-name>SpringMVCHello</display-name>

  <servlet>
    <servlet-name>spring-mvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>spring-mvc</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

File add-employee.jsp sẽ định nghĩa form để tạo đối tượng employee

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<title>Spring MVC Form Handling</title>
</head>

<body>
  <h2>Employee</h2>
  <form:form method="POST" action="addEmployee" modelAttribute="employee">
    <table>
      <tr>
        <td><form:label path="id">Id</form:label></td>
        <td><form:input path="id" /></td>
      </tr>
      <tr>
        <td><form:label path="name">Name</form:label></td>
        <td><form:input path="name" /></td>
      </tr>
      <tr>
        <td><form:label path="Address">Addess</form:label></td>
        <td><form:textarea path="address" /></td>
      </tr>
      <tr>
        <td><form:label path="email">Email</form:label></td>
        <td><form:input path="email" /></td>
      </tr>
      <tr>
        <td><form:label path="gender">Gender</form:label></td>
        <td><form:radiobutton path="gender" value="male" label="male" />
          <form:radiobutton path="gender" value="female" label="female" /></td>
      </tr>
      <tr>
        <td><form:label path="favorites">Favorite</form:label></td>
        <td>
          <form:checkboxes items="${listFavorite}"
            path="favorites" />
        </td>
      </tr>
      <tr>
        <td><form:label path="position">Position</form:label></td>
        <td>
          <form:select path = "position">
                       <form:option value = "NONE" label = "Select"/>
                       <form:options items = "${listPosition}" />
                  	</form:select>    
        </td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" value="Submit" /></td>
      </tr>
    </table>
  </form:form>
</body>
</html>
Spring MVC (4): Code ví dụ Spring MVC Form, Xử lý Form Spring-MVC

File view-employee.jsp sẽ hiển thị các thông tin của đối tượng employee vừa nhập.

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>
<head>
<title>Spring MVC Form Handling</title>
</head>

<body>
  <h2>Employee</h2>
  <table>
    <tr>
      <td>Id: </td>
      <td>${employee.id }</td>
    </tr>
    <tr>
      <td>Name: </td>
      <td>${employee.name }</td>
    </tr>
    <tr>
      <td>Address: </td>
      <td>${employee.address }</td>
    </tr>
    <tr>
      <td>Email: </td>
      <td>${employee.email }</td>
    </tr>
    <tr>
      <td>Gender: </td>
      <td>${employee.gender }</td>
    </tr>
    <tr>
      <td>Favorite: </td>
      <td>
        <c:if test="${not empty employee.favorites}">
          <c:forEach var="favorite" items="${employee.favorites}">${favorite}</c:forEach>
        </c:if>
      </td>
    </tr>
    <tr>
      <td>Position: </td>
      <td>${employee.position}</td>
    </tr>
  </table>
</body>
</html>

Demo:

Spring MVC (4): Code ví dụ Spring MVC Form, Xử lý Form Spring-MVC

Kết quả sau khi nhập thông tin và submit

Spring MVC (4): Code ví dụ Spring MVC Form, Xử lý Form Spring-MVC

Okay, Done!

Download code ví dụ trên tại đây

 

References:

https://docs.spring.io/spring/docs/3.2.x/spring-framework-reference/html/view.html

https://docs.spring.io/spring/docs/4.2.x/spring-framework-reference/html/spring-form-tld.html

7 thoughts on “Code ví dụ Spring MVC Form, Xử lý Form Spring-MVC

  • Chào anh,
    Cho em hỏi chút ạ. Trong ví dụ 1 ở file controller trong phương thức doAddEmployee() thì cái thằng employee : {employee}.setName(…) em thấy nó không được khai báo khởi tạo thì làm sao spring hiểu được ạ

    • Bạn để ý, trước khi vào màn hình add employee, tức là ở hàm addEmployee nó đã tạo một đối tượng Employee rồi. những thông tin nhập trên màn hình sẽ được gán vào đối tượng employee đó.

      Khi bạn submit form, server sẽ tạo một đối tượng employee và gán giá trị cho các thuộc tính bằng những thông tin từ form gửi lên.
      Bạn có thể tạo method constructor cho class employee và đặt debug ở đó, khi submit form lên server, server sẽ chạy vào hàm đó để tạo một đối tượng employee.

  • Vậy có phải hiểu nôm na là chúng ta đã tạo ra 1 object employee trước mà không hề có value nào và việc chúng ta điền vào form chỉ là chúng ta set thêm vào thôi có đúng không ạ

  • chào a, sau khi e run project thì trường id của file add-employee.jsp nó hiển thị số 0 có sẵn, e nghĩ là do nó lấy id mặc định lúc chưa nhập là 0. vậy có cách nào làm cho trang đó trước khi nhập trường id không hiển thị gì cả

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

DMCA.com Protection Status stackjava.com