(二)SpringMVC控制器
第一节:@RequestMapping请求映射
第二节:@RequestParam请求参数
第三节:ModelAndView返回模型和视图
第四节:SpringMVC对象属性自动封装
第五节:SpringMVC POST请求乱码解决
第六节:Controller内部转发和重定向
第七节:SpringMVC对ServletAPI的支持
第八节:SpringMVC对JSON的支持
第一节:@RequestMapping请求映射
第二节:@RequestParam请求参数
第三节:ModelAndView返回模型和视图
例子:
index.jsp:
1 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" 2 pageEncoding="ISO-8859-1"%> 3 <% response.sendRedirect("student/list.do"); %>
web.xml:
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3 xmlns="http://java.sun.com/xml/ns/javaee" 4 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 5 id="WebApp_ID" version="2.5"> 6 <display-name>SpringMvc01</display-name> 7 <welcome-file-list> 8 <welcome-file>index.jsp</welcome-file> 9 </welcome-file-list> 10 11 <servlet> 12 <servlet-name>springmvc</servlet-name> 13 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 14 <init-param> 15 <param-name>contextConfigLocation</param-name> 16 <param-value>classpath:spring-mvc.xml</param-value> 17 </init-param> 18 </servlet> 19 <servlet-mapping> 20 <servlet-name>springmvc</servlet-name> 21 <url-pattern>*.do</url-pattern> 22 </servlet-mapping> 23 </web-app>
spring-mvc.xml:
1 <?xml version="1.0" encoding="UTF-8"?> 2 <beans xmlns="http://www.springframework.org/schema/beans" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xmlns:p="http://www.springframework.org/schema/p" 5 xmlns:context="http://www.springframework.org/schema/context" 6 xsi:schemaLocation=" 7 http://www.springframework.org/schema/beans 8 http://www.springframework.org/schema/beans/spring-beans.xsd 9 http://www.springframework.org/schema/context 10 http://www.springframework.org/schema/context/spring-context.xsd"> 11 12 <!-- 使用注解的包,包括子集 --> 13 <context:component-scan base-package="com.wishwzp"/> 14 15 <!-- 视图解析器 --> 16 <bean id="viewResolver" 17 class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 18 <property name="prefix" value="/WEB-INF/jsp/" /> 19 <property name="suffix" value=".jsp"></property> 20 </bean> 21 22 </beans>
StudentController.java:
1 package com.wishwzp.controller; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import org.springframework.stereotype.Controller; 7 import org.springframework.web.bind.annotation.RequestMapping; 8 import org.springframework.web.bind.annotation.RequestParam; 9 import org.springframework.web.servlet.ModelAndView; 10 11 import com.wishwzp.model.Student; 12 13 @Controller 14 @RequestMapping("/student") 15 public class StudentController { 16 17 private static List<Student> studentList=new ArrayList<Student>(); 18 19 static{ 20 studentList.add(new Student(1,"张三",11)); 21 studentList.add(new Student(2,"李四",12)); 22 studentList.add(new Student(3,"王五",13)); 23 } 24 25 @RequestMapping("/list") 26 public ModelAndView list(){ 27 //返回模型和视图 28 ModelAndView mav=new ModelAndView(); 29 mav.addObject("studentList", studentList); 30 mav.setViewName("student/list"); 31 return mav; 32 } 33 34 // required=false表示不传的话,会给参数赋值为null,required=true就是必须要有 35 @RequestMapping("/preSave") 36 public ModelAndView preSave(@RequestParam(value="id",required=false) String id){ 37 //返回模型和视图 38 ModelAndView mav=new ModelAndView(); 39 40 if(id!=null){ 41 mav.addObject("student", studentList.get(Integer.parseInt(id)-1)); 42 mav.setViewName("student/update"); 43 }else{ 44 mav.setViewName("student/add"); 45 } 46 return mav; 47 } 48 }
Student.java:
1 package com.wishwzp.model; 2 3 public class Student { 4 5 private int id; 6 private String name; 7 private int age; 8 9 public Student() { 10 super(); 11 // TODO Auto-generated constructor stub 12 } 13 14 public Student(int id, String name, int age) { 15 super(); 16 this.id = id; 17 this.name = name; 18 this.age = age; 19 } 20 21 public int getId() { 22 return id; 23 } 24 public void setId(int id) { 25 this.id = id; 26 } 27 public String getName() { 28 return name; 29 } 30 public void setName(String name) { 31 this.name = name; 32 } 33 public int getAge() { 34 return age; 35 } 36 public void setAge(int age) { 37 this.age = age; 38 } 39 40 }
在文件WEB-INF>jsp>student中
add.jsp:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body> 10 <form action="student/save.do" method="post"> 11 <table> 12 <tr> 13 <th colspan="2">学生添加</th> 14 </tr> 15 <tr> 16 <td>姓名</td> 17 <td><input type="text" name="name"/></td> 18 </tr> 19 <tr> 20 <td>年龄</td> 21 <td><input type="text" name="age"/></td> 22 </tr> 23 <tr> 24 <td colspan="2"> 25 <input type="submit" value="提交"/> 26 </td> 27 </tr> 28 </table> 29 </form> 30 </body> 31 </html>
list.jsp:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5 <html> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8 <title>Insert title here</title> 9 </head> 10 <body> 11 <a href="${pageContext.request.contextPath}/student/preSave.do">添加学生</a> 12 <table> 13 <tr> 14 <th>编号</th> 15 <th>姓名</th> 16 <th>年龄</th> 17 <th>操作</th> 18 </tr> 19 <c:forEach var="student" items="${studentList }"> 20 <tr> 21 <td>${student.id }</td> 22 <td>${student.name }</td> 23 <td>${student.age }</td> 24 <td><a href="${pageContext.request.contextPath}/student/preSave.do?id=${student.id}">修改</a></td> 25 </tr> 26 </c:forEach> 27 </table> 28 29 </body> 30 </html>
update.jsp:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body> 10 <form action="student/save.do" method="post"> 11 <table> 12 <tr> 13 <th colspan="2">学生修改</th> 14 </tr> 15 <tr> 16 <td>姓名</td> 17 <td><input type="text" name="name" value="${student.name }"/></td> 18 </tr> 19 <tr> 20 <td>年龄</td> 21 <td><input type="text" name="age" value="${student.age }"/></td> 22 </tr> 23 <tr> 24 <td colspan="2"> 25 <input type="hidden" name="id" value="${student.id }"/> 26 <input type="submit" value="提交"/> 27 </td> 28 </tr> 29 </table> 30 </form> 31 </body> 32 </html>
第四节:SpringMVC对象属性自动封装
第五节:SpringMVC POST请求乱码解决
第六节:Controller内部转发和重定向
例子:
web.xml:
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3 xmlns="http://java.sun.com/xml/ns/javaee" 4 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 5 id="WebApp_ID" version="2.5"> 6 <display-name>SpringMvc01</display-name> 7 <welcome-file-list> 8 <welcome-file>index.jsp</welcome-file> 9 </welcome-file-list> 10 11 <servlet> 12 <servlet-name>springmvc</servlet-name> 13 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 14 <init-param> 15 <param-name>contextConfigLocation</param-name> 16 <param-value>classpath:spring-mvc.xml</param-value> 17 </init-param> 18 </servlet> 19 20 <servlet-mapping> 21 <servlet-name>springmvc</servlet-name> 22 <url-pattern>*.do</url-pattern> 23 </servlet-mapping> 24 25 <filter> 26 <filter-name>characterEncodingFilter</filter-name> 27 <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> 28 <init-param> 29 <param-name>encoding</param-name> 30 <param-value>utf-8</param-value> 31 </init-param> 32 </filter> 33 34 <filter-mapping> 35 <filter-name>characterEncodingFilter</filter-name> 36 <url-pattern>*.do</url-pattern> 37 </filter-mapping> 38 </web-app>
index.jsp:
1 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" 2 pageEncoding="ISO-8859-1"%> 3 <% response.sendRedirect("student/list.do"); %>
spring-mvc.xml:
1 <?xml version="1.0" encoding="UTF-8"?> 2 <beans xmlns="http://www.springframework.org/schema/beans" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xmlns:p="http://www.springframework.org/schema/p" 5 xmlns:context="http://www.springframework.org/schema/context" 6 xsi:schemaLocation=" 7 http://www.springframework.org/schema/beans 8 http://www.springframework.org/schema/beans/spring-beans.xsd 9 http://www.springframework.org/schema/context 10 http://www.springframework.org/schema/context/spring-context.xsd"> 11 12 <!-- 使用注解的包,包括子集 --> 13 <context:component-scan base-package="com.wishwzp"/> 14 15 <!-- 视图解析器 --> 16 <bean id="viewResolver" 17 class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 18 <property name="prefix" value="/WEB-INF/jsp/" /> 19 <property name="suffix" value=".jsp"></property> 20 </bean> 21 22 </beans>
StudentController.java:
1 package com.wishwzp.controller; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import org.springframework.stereotype.Controller; 7 import org.springframework.web.bind.annotation.RequestMapping; 8 import org.springframework.web.bind.annotation.RequestParam; 9 import org.springframework.web.servlet.ModelAndView; 10 11 import com.wishwzp.model.Student; 12 13 @Controller 14 @RequestMapping("/student") 15 public class StudentController { 16 17 private static List<Student> studentList=new ArrayList<Student>(); 18 19 static{ 20 studentList.add(new Student(1,"张三",11)); 21 studentList.add(new Student(2,"李四",12)); 22 studentList.add(new Student(3,"王五",13)); 23 } 24 25 @RequestMapping("/list") 26 public ModelAndView list(){ 27 ModelAndView mav=new ModelAndView(); 28 mav.addObject("studentList", studentList); 29 mav.setViewName("student/list"); 30 return mav; 31 } 32 33 @RequestMapping("/preSave") 34 public ModelAndView preSave(@RequestParam(value="id",required=false) String id){ 35 ModelAndView mav=new ModelAndView(); 36 if(id!=null){ 37 mav.addObject("student", studentList.get(Integer.parseInt(id)-1)); 38 mav.setViewName("student/update"); 39 }else{ 40 mav.setViewName("student/add"); 41 } 42 return mav; 43 } 44 45 @RequestMapping("/save") 46 public String save(Student student){ 47 48 if(student.getId()!=0){ 49 Student s=studentList.get(student.getId()-1); 50 s.setName(student.getName()); 51 s.setAge(student.getAge()); 52 }else{ 53 studentList.add(student); 54 } 55 56 // return "redirect:/student/list.do"; 57 return "forward:/student/list.do"; 58 } 59 60 @RequestMapping("/delete") 61 public String delete(@RequestParam("id") int id){ 62 studentList.remove(id-1); 63 return "redirect:/student/list.do"; 64 } 65 }
Student.java:
1 package com.wishwzp.model; 2 3 public class Student { 4 5 private int id; 6 private String name; 7 private int age; 8 9 public Student() { 10 super(); 11 // TODO Auto-generated constructor stub 12 } 13 14 public Student(int id, String name, int age) { 15 super(); 16 this.id = id; 17 this.name = name; 18 this.age = age; 19 } 20 21 public int getId() { 22 return id; 23 } 24 public void setId(int id) { 25 this.id = id; 26 } 27 public String getName() { 28 return name; 29 } 30 public void setName(String name) { 31 this.name = name; 32 } 33 public int getAge() { 34 return age; 35 } 36 public void setAge(int age) { 37 this.age = age; 38 } 39 40 }
在文件WEB-INF>jsp>student中
add.jsp:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body> 10 <form action="${pageContext.request.contextPath}/student/save.do" method="post"> 11 <table> 12 <tr> 13 <th colspan="2">学生添加</th> 14 </tr> 15 <tr> 16 <td>姓名</td> 17 <td><input type="text" name="name"/></td> 18 </tr> 19 <tr> 20 <td>年龄</td> 21 <td><input type="text" name="age"/></td> 22 </tr> 23 <tr> 24 <td colspan="2"> 25 <input type="submit" value="提交"/> 26 </td> 27 </tr> 28 </table> 29 </form> 30 </body> 31 </html>
list.jsp:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5 <html> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8 <title>Insert title here</title> 9 </head> 10 <body> 11 <a href="${pageContext.request.contextPath}/student/preSave.do">添加学生</a> 12 <table> 13 <tr> 14 <th>编号</th> 15 <th>姓名</th> 16 <th>年龄</th> 17 <th>操作</th> 18 </tr> 19 <c:forEach var="student" items="${studentList }"> 20 <tr> 21 <td>${student.id }</td> 22 <td>${student.name }</td> 23 <td>${student.age }</td> 24 <td> 25 <a href="${pageContext.request.contextPath}/student/preSave.do?id=${student.id}">修改</a> 26 27 <a href="${pageContext.request.contextPath}/student/delete.do?id=${student.id}">删除</a> 28 </td> 29 </tr> 30 </c:forEach> 31 </table> 32 33 </body> 34 </html>
update.jsp:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body> 10 <form action="${pageContext.request.contextPath}/student/save.do" method="post"> 11 <table> 12 <tr> 13 <th colspan="2">学生修改</th> 14 </tr> 15 <tr> 16 <td>姓名</td> 17 <td><input type="text" name="name" value="${student.name }"/></td> 18 </tr> 19 <tr> 20 <td>年龄</td> 21 <td><input type="text" name="age" value="${student.age }"/></td> 22 </tr> 23 <tr> 24 <td colspan="2"> 25 <input type="hidden" name="id" value="${student.id }"/> 26 <input type="submit" value="提交"/> 27 </td> 28 </tr> 29 </table> 30 </form> 31 </body> 32 </html>
第七节:SpringMVC对ServletAPI的支持
第八节:SpringMVC对JSON的支持
需要多添加这些jar包:
例子:
web.xml:
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3 xmlns="http://java.sun.com/xml/ns/javaee" 4 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 5 id="WebApp_ID" version="2.5"> 6 <display-name>SpringMvc01</display-name> 7 <welcome-file-list> 8 <welcome-file>index.jsp</welcome-file> 9 </welcome-file-list> 10 11 <servlet> 12 <servlet-name>springmvc</servlet-name> 13 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 14 <init-param> 15 <param-name>contextConfigLocation</param-name> 16 <param-value>classpath:spring-mvc.xml</param-value> 17 </init-param> 18 </servlet> 19 <servlet-mapping> 20 <servlet-name>springmvc</servlet-name> 21 <url-pattern>*.do</url-pattern> 22 </servlet-mapping> 23 24 <filter> 25 <filter-name>characterEncodingFilter</filter-name> 26 <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> 27 <init-param> 28 <param-name>encoding</param-name> 29 <param-value>utf-8</param-value> 30 </init-param> 31 </filter> 32 <filter-mapping> 33 <filter-name>characterEncodingFilter</filter-name> 34 <url-pattern>*.do</url-pattern> 35 </filter-mapping> 36 </web-app>
login.jsp:
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>Insert title here</title> 8 </head> 9 <body> 10 <a href="user/ajax.do">测试ajax</a> 11 <form action="user/login.do" method="post"> 12 <table> 13 <tr> 14 <td>用户名:</td> 15 <td><input type="text" name="userName"/></td> 16 </tr> 17 <tr> 18 <td>密码:</td> 19 <td><input type="password" name="password"/></td> 20 </tr> 21 <tr> 22 <td> 23 <input type="submit" value="登录"/> 24 </td> 25 </tr> 26 </table> 27 </form> 28 </body> 29 </html>
spring-mvc.xml:
1 <?xml version="1.0" encoding="UTF-8"?> 2 <beans xmlns="http://www.springframework.org/schema/beans" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xmlns:p="http://www.springframework.org/schema/p" 5 xmlns:context="http://www.springframework.org/schema/context" 6 xmlns:mvc="http://www.springframework.org/schema/mvc" 7 xsi:schemaLocation=" 8 http://www.springframework.org/schema/beans 9 http://www.springframework.org/schema/beans/spring-beans.xsd 10 http://www.springframework.org/schema/mvc 11 http://www.springframework.org/schema/mvc/spring-mvc.xsd 12 http://www.springframework.org/schema/context 13 http://www.springframework.org/schema/context/spring-context.xsd"> 14 15 <!-- 使用注解的包,包括子集 --> 16 <context:component-scan base-package="com.wishwzp"/> 17 18 <!-- 支持对象与json的转换。 --> 19 <mvc:annotation-driven/> 20 21 <!-- 视图解析器 --> 22 <bean id="viewResolver" 23 class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 24 <property name="prefix" value="/WEB-INF/jsp/" /> 25 <property name="suffix" value=".jsp"></property> 26 </bean> 27 28 </beans>
ResponseUtil.java:
1 package com.wishwzp.util; 2 3 import java.io.PrintWriter; 4 5 import javax.servlet.http.HttpServletResponse; 6 7 8 public class ResponseUtil { 9 10 public static void write(HttpServletResponse response,Object o)throws Exception{ 11 response.setContentType("text/html;charset=utf-8"); 12 PrintWriter out=response.getWriter(); 13 out.println(o.toString()); 14 out.flush(); 15 out.close(); 16 } 17 }
User.java:
1 package com.wishwzp.model; 2 3 public class User { 4 5 private int id; 6 private String userName; 7 private String password; 8 9 public User() { 10 super(); 11 // TODO Auto-generated constructor stub 12 } 13 public User(String userName, String password) { 14 super(); 15 this.userName = userName; 16 this.password = password; 17 } 18 19 public int getId() { 20 return id; 21 } 22 public void setId(int id) { 23 this.id = id; 24 } 25 public String getUserName() { 26 return userName; 27 } 28 public void setUserName(String userName) { 29 this.userName = userName; 30 } 31 public String getPassword() { 32 return password; 33 } 34 public void setPassword(String password) { 35 this.password = password; 36 } 37 38 }
UserController.java:
1 package com.wishwzp.controller; 2 3 import javax.servlet.http.Cookie; 4 import javax.servlet.http.HttpServletRequest; 5 import javax.servlet.http.HttpServletResponse; 6 import javax.servlet.http.HttpSession; 7 8 import org.springframework.stereotype.Controller; 9 import org.springframework.web.bind.annotation.RequestMapping; 10 import org.springframework.web.bind.annotation.ResponseBody; 11 12 import com.wishwzp.model.User; 13 14 @Controller 15 @RequestMapping("/user") 16 public class UserController { 17 18 @RequestMapping("/login") 19 public String login(HttpServletRequest request,HttpServletResponse response){ 20 System.out.println("----登录验证---"); 21 String userName=request.getParameter("userName"); 22 String password=request.getParameter("password"); 23 Cookie cookie=new Cookie("user",userName+"-"+password); 24 cookie.setMaxAge(1*60*60*24*7); 25 User currentUser=new User(userName,password); 26 response.addCookie(cookie); 27 HttpSession session=request.getSession(); 28 session.setAttribute("currentUser", currentUser); 29 return "redirect:/main.jsp"; 30 } 31 32 @RequestMapping("/login2") 33 public String login2(HttpServletRequest request){ 34 return "redirect:/main.jsp"; 35 } 36 37 @RequestMapping("/login3") 38 public String login3(HttpSession session){ 39 return "redirect:/main.jsp"; 40 } 41 42 @RequestMapping("/ajax") 43 public @ResponseBody User ajax(){ 44 User user=new User("zhangsan","123"); 45 return user; 46 } 47 }
main.jsp:
1 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" 2 pageEncoding="ISO-8859-1"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 7 <title>Insert title here</title> 8 </head> 9 <body> 10 Main.jsp ${currentUser.userName } 11 </body> 12 </html>