当前位置:   article > 正文

springmvc的form标签的modelAttribute

springmvc的form标签的modelAttribute

一、前言:

spring的一些页面标签都需要先用一个controller类的方法跳转到此网页:

modelAttribute="user"要求需要先用一个controller类的方法跳转到此网页,并且此方法的Model中必须绑定一个user对象,而且必须和单词user一模一样,否则就会报错

注意: 如果不设置modelAttribute="user",则默认会认为modelAttribute的值是command,完整如右:modelAttribute="command"。 同时也需要用一个controller类的方法跳转到此网页,并且此方法的Model中必须绑定一个command对象,而且必须和单词command一模一样,否则就会报错

<form:form method="post"  modelAttribute="user"  action="login"></form>

二、具体实现:

2.1.web.xml:

  1. <!DOCTYPE web-app PUBLIC
  2. "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
  3. "http://java.sun.com/dtd/web-app_2_3.dtd" >
  4. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  5. xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  6. xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  7. version="3.1">
  8. <!-- 注册springmvc框架核心控制器 -->
  9. <servlet>
  10. <servlet-name>DispatcherServlet</servlet-name>
  11. <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  12. <init-param>
  13. <param-name>contextConfigLocation</param-name>
  14. <param-value>classpath:app-ssm0415.xml</param-value>
  15. </init-param>
  16. </servlet>
  17. <servlet-mapping>
  18. <servlet-name>DispatcherServlet</servlet-name>
  19. <url-pattern>/</url-pattern>
  20. </servlet-mapping>
  21. <absolute-ordering />
  22. <filter>
  23. <filter-name>encodingFilter</filter-name>
  24. <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  25. <init-param>
  26. <param-name>encoding</param-name>
  27. <param-value>UTF-8</param-value>
  28. </init-param>
  29. <init-param>
  30. <param-name>forceEncoding</param-name>
  31. <param-value>true</param-value>
  32. </init-param>
  33. </filter>
  34. <filter-mapping>
  35. <filter-name>encodingFilter</filter-name>
  36. <url-pattern>/*</url-pattern>
  37. </filter-mapping>
  38. </web-app>

2.2.app-ssm0415.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:aop="http://www.springframework.org/schema/aop"
  6. xmlns:mvc="http://www.springframework.org/schema/mvc"
  7. xmlns:util="http://www.springframework.org/schema/util"
  8. xmlns:context="http://www.springframework.org/schema/context"
  9. xmlns:jee="http://www.springframework.org/schema/jee"
  10. xsi:schemaLocation="
  11. http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd
  12. http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
  13. http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
  14. http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee.xsd
  15. http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
  16. http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd">
  17. <!--扫描day0411中标注有spring注解的类并创建这些类的对象-->
  18. <context:component-scan base-package="day0415"/>
  19. <mvc:annotation-driven/>
  20. <!-- 浏览器的地址中写"/static/",最终会访问项目中的/static/文件夹 -->
  21. <!-- 浏览器的地址中写"/static/",最终会访问项目中的/static/文件夹 -->
  22. <mvc:resources mapping="/static/" location="/static/"/>
  23. <mvc:default-servlet-handler/>
  24. <!-- 2.配置数据源(采用dbcp连接池) -->
  25. <bean id="ds"
  26. class="org.apache.commons.dbcp.BasicDataSource">
  27. <property name="url" value="jdbc:mysql://localhost:3306/test_db?characterEncoding=utf-8&amp;serverTimezone=GMT%2B8" />
  28. <property name="driverClassName" value="com.mysql.cj.jdbc.Driver" />
  29. <property name="username" value="root" />
  30. <property name="password" value="root" />
  31. <property name="initialSize" value="2" />
  32. <property name="maxActive" value="10" />
  33. </bean>
  34. <!-- 3.配置SqlSessionFactoryBean -->
  35. <bean class="org.mybatis.spring.SqlSessionFactoryBean">
  36. <!-- 指定数据源 -->
  37. <property name="dataSource" ref="ds" />
  38. <!-- 指定XML文件的位置 -->
  39. <property name="mapperLocations" value="classpath:mappers/*.xml" />
  40. </bean>
  41. <!-- 4.配置MapperScannerConfigurer -->
  42. <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
  43. <!-- 接口文件在哪里 -->
  44. <property name="basePackage" value="day0415" />
  45. </bean>
  46. <!-- 3.视图解析器 -->
  47. <bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  48. <property name="prefix" value="/views/" />
  49. <property name="suffix" value=".jsp" />
  50. </bean>
  51. </beans>

2.3.day0415.model.User

  1. package day0415.model;
  2. import lombok.AllArgsConstructor;
  3. import lombok.Data;
  4. import lombok.NoArgsConstructor;
  5. @Data//提供类的get、set、equals、hashCode、canEqual、toString方法
  6. @AllArgsConstructor
  7. @NoArgsConstructor
  8. public class User {
  9. private String username;
  10. private String password;
  11. private int uid;
  12. public User(String username, String password) {
  13. this.username = username;
  14. this.password = password;
  15. }
  16. }

2.4.day0415.controller.UserController415

  1. package day0415.controller;
  2. import day0415.model.User;
  3. import day0415.service.UserService;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.ui.Model;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import org.springframework.web.servlet.ModelAndView;
  9. @Controller
  10. public class UserController415 {
  11. @RequestMapping("/user/toLogin")
  12. String toLogin( Model model){
  13. model.addAttribute("user",new User());
  14. return "login2";
  15. }
  16. @RequestMapping("/user/login")
  17. ModelAndView login( User u, Model model){
  18. ModelAndView mv=new ModelAndView();
  19. mv.setViewName("success");
  20. model.addAttribute("user", u);
  21. return mv;
  22. }
  23. }

2.5.login2.jsp:

  1. <%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
  3. <%
  4. String basePath = request.getScheme()+"://" +
  5. request.getServerName() + ":" + request.getServerPort() +
  6. request.getContextPath();
  7. %>
  8. <!DOCTYPE html>
  9. <html lang="en">
  10. <head>
  11. <meta charset="UTF-8">
  12. <title>登录界面</title>
  13. <style>
  14. html,body{
  15. height: 100%;
  16. }
  17. body{
  18. background: #006666;
  19. }
  20. h1{
  21. color: #FFF;
  22. text-align: center;
  23. }
  24. .container{
  25. margin: 100px auto;
  26. width: 30%;
  27. }
  28. form{
  29. background: #FFF;
  30. height: 300px;
  31. width: 100%;
  32. border-radius: 10px;
  33. position: relative;
  34. }
  35. label{
  36. color: #000;
  37. font-weight: bold;
  38. font-size: 20px;
  39. margin-left: 40px;
  40. }
  41. input{
  42. text-align: left;
  43. margin: 10px;
  44. }
  45. .input{
  46. width: 80%;
  47. height: 35px;
  48. margin-left: 40px;
  49. }
  50. .checkbox{
  51. margin-left: 30px;
  52. }
  53. a{
  54. text-decoration: none;
  55. font-weight: bold;
  56. }
  57. .submit{
  58. display: inline-block;
  59. margin-top: 0;
  60. margin-left:145px;
  61. background: #000;
  62. border: none;
  63. color: #FFF;
  64. height: 35px;
  65. width: 100px;
  66. text-align: center;
  67. font-weight: bold;
  68. border-radius: 5px;
  69. }
  70. .left{
  71. margin: 20px;
  72. }
  73. .right{
  74. position: absolute;
  75. right: 20px;
  76. }
  77. </style>
  78. </head>
  79. <body>
  80. <div class="container">
  81. <h1>用户登录2</h1>
  82. <h6>${msg}</h6>
  83. <%--@elvariable id="user" type="day0415.model.User"--%>
  84. <form:form method="post" modelAttribute="user" action="login">
  85. <br>
  86. <label for="username">用户名</label><br>
  87. <form:input type="text" path="username" id="username" class="input" value="" placeholder="用户名admin"/><br>
  88. <label for="pwd">密码</label><br>
  89. <form:input type="password" path="password" id="pwd" class="input" value="" placeholder="密码admin"/>
  90. <div class="checkbox">
  91. <input type="checkbox" name="">
  92. <span>记住密码</span>
  93. </div>
  94. <button type="submit" class="submit">登录</button>
  95. </form:form>
  96. </div>
  97. </body>
  98. </html>

2.6.success.jsp

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>CodePen - Happy New Year!</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  9. <style>
  10. @import url("https://fonts.googleapis.com/css?family=Caveat");
  11. html, body {
  12. background: linear-gradient(to bottom, #090513 0%, #964987 75%, #fdbca3 100%);
  13. height: 100%;
  14. display: flex;
  15. align-items: center;
  16. justify-content: center;
  17. overflow: hidden;
  18. }
  19. .stars {
  20. position: absolute;
  21. top: 0;
  22. right: 0;
  23. bottom: 0;
  24. left: 0;
  25. -webkit-animation: rotation 360s infinite linear;
  26. animation: rotation 360s infinite linear;
  27. }
  28. .stars:after, .stars:before {
  29. content: "";
  30. display: block;
  31. position: absolute;
  32. top: 0;
  33. left: 0;
  34. bottom: 0;
  35. right: 0;
  36. background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABlBMVEVHcEz///+flKJDAAAAAXRSTlMAQObYZgAAAIVJREFUeAHt2SEOwkAQhtFJKuqKRRGOgKzgUMgKRI/G0ZDoacNkN/ue/zJ+/ugBcI+01/EEAGBc04FkP58AVFoi7VaSLAEAAPB/j0hbK678AADMkXbZG03mGA0AAKsP3JgAAGDa88knsuZ8Mp1M6gEAPFtNrtEjtkh7lyRb3/PAWpS0BPgC0PMMdOEjXqoAAAAASUVORK5CYII=");
  37. }
  38. .stars:after {
  39. background-size: 100px;
  40. opacity: 0.4;
  41. }
  42. .stars:before {
  43. background-size: 200px;
  44. opacity: 0.6;
  45. }
  46. @-webkit-keyframes rotation {
  47. 0% {
  48. transform: rotate(0);
  49. }
  50. 100% {
  51. transform: rotate(360deg);
  52. }
  53. }
  54. @keyframes rotation {
  55. 0% {
  56. transform: rotate(0);
  57. }
  58. 100% {
  59. transform: rotate(360deg);
  60. }
  61. }
  62. h1 {
  63. font-size: calc(1.5em + 5vw);
  64. color: #fff;
  65. font-family: "Caveat", sans-serif;
  66. text-align: center;
  67. padding: 0.5em;
  68. transform: rotate(-4deg) translateY(-15vh);
  69. }
  70. .mountains {
  71. position: absolute;
  72. bottom: 0;
  73. left: 0;
  74. right: 0;
  75. width: auto;
  76. min-width: 100%;
  77. height: 60px;
  78. fill: #000022;
  79. }
  80. .mountains--layer1 {
  81. z-index: 2;
  82. }
  83. .mountains--layer2 {
  84. fill: #9D5189;
  85. z-index: 0;
  86. }
  87. </style>
  88. <script>
  89. const B_CHILD = {
  90. fill: { '#ffffff': '#ef1cec' },
  91. delay: 'rand(300, 359)',
  92. duration: 700,
  93. pathScale: 'rand(0.8, 1)',
  94. isSwirl: true,
  95. swirlSize: 'stagger(-2,2)',
  96. swirlFrequency: 1 };
  97. const B_OPTS = {
  98. count: 'rand(15,20)',
  99. top: '100%',
  100. children: {
  101. ...B_CHILD } };
  102. const burst1 = new mojs.Burst({
  103. ...B_OPTS,
  104. radius: { 0: 'rand(150,170)' },
  105. x: -45,
  106. y: -335 });
  107. const burst1_2 = new mojs.Burst({
  108. ...B_OPTS,
  109. radius: { 0: 'rand(150,170)' },
  110. x: -45,
  111. y: -335,
  112. children: {
  113. ...B_CHILD,
  114. delay: 'rand(260, 350)',
  115. pathScale: 'rand(0.7, 0.8)',
  116. degreeShift: 20 } });
  117. const burst2 = new mojs.Burst({
  118. ...B_OPTS,
  119. radius: { 0: 'rand(100,150)' },
  120. x: 140,
  121. y: -315,
  122. children: {
  123. ...B_CHILD,
  124. fill: { '#ffffff': '#d8ff00' } } });
  125. const burst2_2 = new mojs.Burst({
  126. ...B_OPTS,
  127. radius: { 0: 'rand(100,150)' },
  128. x: 140,
  129. y: -315,
  130. children: {
  131. ...B_CHILD,
  132. fill: { '#ffffff': '#d8ff00' },
  133. delay: 'rand(260, 350)',
  134. pathScale: 'rand(0.7, 0.8)',
  135. degreeShift: 20 } });
  136. // Create interactive burst
  137. const burst_tune = new mojs.Burst({
  138. ...B_OPTS,
  139. radius: { 0: 'rand(100,150)' },
  140. left: 0,
  141. top: 0,
  142. x: 0,
  143. y: 0,
  144. children: {
  145. ...B_CHILD,
  146. delay: 'rand(0, 50)',
  147. fill: { '#ffffff': '#d8ff00' } } });
  148. const burst_tune_2 = new mojs.Burst({
  149. ...B_OPTS,
  150. radius: { 0: 'rand(100,150)' },
  151. left: 0,
  152. top: 0,
  153. children: {
  154. ...B_CHILD,
  155. fill: { '#ffffff': '#d8ff00' },
  156. delay: 'rand(10, 150)',
  157. pathScale: 'rand(0.7, 0.8)',
  158. degreeShift: 20 } });
  159. document.addEventListener('click', function (e) {
  160. burst_tune.
  161. generate().
  162. tune({ x: e.pageX, y: e.pageY }).
  163. replay();
  164. burst_tune_2.
  165. generate().
  166. tune({ x: e.pageX, y: e.pageY }).
  167. replay();
  168. });
  169. // Create the firework lines
  170. const FW_OPTS = {
  171. shape: 'curve',
  172. fill: 'none',
  173. isShowStart: false,
  174. strokeWidth: { 3: 0 },
  175. stroke: '#ffffff',
  176. strokeDasharray: '100%',
  177. strokeDashoffset: { '-100%': '100%' },
  178. duration: 1000 };
  179. const fw1 = new mojs.Shape({
  180. ...FW_OPTS,
  181. radius: 170,
  182. radiusY: 20,
  183. top: '100%',
  184. y: -165,
  185. angle: 75,
  186. onStart: function () {
  187. burst1.replay(0);
  188. burst1_2.replay(0);
  189. } });
  190. const fw2 = new mojs.Shape({
  191. ...FW_OPTS,
  192. radius: 180,
  193. radiusY: 50,
  194. top: '100%',
  195. x: 50,
  196. y: -155,
  197. strokeDashoffset: { '100%': '-100%' },
  198. angle: -60,
  199. delay: 200,
  200. onStart: function () {
  201. burst2.replay(0);
  202. burst2_2.replay(0);
  203. } });
  204. // Underline under title
  205. const underline = new mojs.Shape({
  206. parent: document.getElementById('title'),
  207. shape: 'curve',
  208. strokeLinecap: 'round',
  209. fill: 'none',
  210. isShowStart: false,
  211. strokeWidth: { '1em': '5em' },
  212. stroke: '#ffffff',
  213. strokeDasharray: '200%',
  214. strokeDashoffset: { '200%': '100%' },
  215. radius: 150,
  216. radiusY: 10,
  217. y: '1.1em',
  218. angle: -10,
  219. duration: 2000,
  220. delay: 1000 }).
  221. then({
  222. strokeWidth: { '5em': '1em' },
  223. strokeDashoffset: { '100%': '-200%' },
  224. duration: 2000,
  225. delay: 10000 });
  226. const timelineText = new mojs.Timeline({
  227. repeat: 2018 }).
  228. add(underline).
  229. play();
  230. // Fire off the explosions
  231. const timeline = new mojs.Timeline({
  232. repeat: 2018 }).
  233. add([fw1, fw2]).
  234. play();
  235. // Create sounds
  236. // var explosion = new Audio("https://www.freesound.org/data/previews/21/21410_21830-lq.mp3"); // buffers automatically when created
  237. // explosion.play();
  238. </script>
  239. </head>
  240. <body>
  241. <!-- partial:index.partial.html -->
  242. <h1 id="title">欢迎 ${user.username} 访问京淘网页</h1>
  243. ${allUsers}
  244. <div class="stars"></div>
  245. <svg class="mountains mountains--layer1" xmlns="http://www.w3.org/2000/svg" width="1920" height="200"
  246. viewBox="0 0 1920 200" preserveAspectRatio="none">
  247. <title>bergskedja</title>
  248. <path
  249. d="M0,41.57s21.25,2.19,27.33,2.19,22.27-4.37,28.34,0-1,22.94,6.07,19.67S72.87,52,81,52.81s16.19,10.15,22.27,0,25.3-1.41,30.36,6.24,21.25,7.33,26.32,4.76,8.1-20.66,16.19-22,17.21-6.31,18.22,0,5.06,3,12.15,3,20.24-10.93,25.3-14.2S238.86,11,259.1,11s35.42,4.37,43.52,0S316.79.05,321.86.05,337-1,337,6.61s6.07,24.92,15.18,26.12,30.36,11,34.41,14.31,18.22-2.19,18.22-2.19c11.13,7.65,20.24,0,20.24,0S441.29,23,453.43,18.63s17.21,4.37,20.24,7.65S497,32.62,500,32.73s19.23-10.82,23.28-10.82,27.33-4.37,34.41-3.28,16.19,10.72,16.19,14.1S582,52.5,586,52.5s15.18,2.19,21.25,2.19,14.17,1.09,17.21,1.09,6.07-3.28,26.32-13.11S669,21.91,677.11,24.09s9.11,14.2,16.19,13.11,0-17.48,24.29-17.48a140.45,140.45,0,0,1,44.53,7.65s3,29.5,17.21,29.5c0,0,28.34-7.65,36.44-7.65s39.47,7.33,47.57,16.23,32.39,12.18,42.51,12.18,25.3,15.3,28.34,15.3,23.28,3.28,28.34-5.46S967.59,66.7,975.69,58s10.12-21.3,17.21-11.2,13.16,8.47,16.19,0,14.17-16.12,17.21-16.12,19.23,3.28,19.23,6.56,25.3-2.19,35.42-12,39.47-9.83,65.79-9.83,54.65,9.83,61.74,14.2,33.4,7.65,42.51,7.65,20.24,4.37,26.32,4.37,5.06,9.83,17.21,13.11,25.3-8.19,28.34-7.92,10.12-16.12,19.23-16.12,27.33,16.94,34.41,16.12,22.27,22.12,28.34,24.31,2,12.13,18.22,22.45,22.27,32.18,34.41,32.18,50.61-8.74,54.65-15.3,22.27-19.67,27.33-19.67,34.41-7.65,38.46-4.37,29.35,22.94,48.58,22.94,46.56-14.2,54.65-14.2,23.28-9.83,35.42-9.83,46.56,12,57.69,14.2,42.51,8.74,58.7,8.74,38.67-42.77,66.8-45.89c6.12-.68,20.24,1.09,20.24,1.09V200H0Z" />
  250. </svg>
  251. <svg class="mountains mountains--layer2" xmlns="http://www.w3.org/2000/svg" width="1920" height="200"
  252. viewBox="0 0 1920 200" preserveAspectRatio="none">
  253. <title>bergskedja2</title>
  254. <path
  255. d="M0,82.09s21.14-13,30.14-19,24-16,45-17.5,49.5-23.86,63-17c0,0,62.87.71,70.5,6.67s81,40.83,127.49,40.83,88.5-20.16,126-24.33,68.23-29.63,90-24.33,31.5,3.89,46.5-.72,25.5-19.61,42-19.61,25.5-7.1,51-7.1,39,11.59,63,11.59,60-3,75,3S864.1,4,882.09,4,934.41,22.09,960,17.59s58.59-7.5,75.09-4.5,36,16.9,61.5,25,82.5,17,97.5,18.55,51.77-6,67.5-10.5S1313,30,1330.81,38s23.76,44,44.76,44,45-6,57-12,31.5-22.5,45-22.5,12,7.5,31.5,7.5,42-4.5,57-4.5,24-25.5,49.5-22.5,66,1.9,90,13,49.5,30.55,78,33.55,54-16.5,69-12,44.91,19.5,67.45,19.5V200H0Z" />
  256. </svg>
  257. <!-- partial -->
  258. <script src='https://cdn.jsdelivr.net/mojs/latest/mo.min.js'></script>
  259. <script src="./script.js"></script>
  260. </body>
  261. </html>

注:modelAttribute="user"要求需要先用一个UserController类的toLogin方法跳转到login.jsp网页,并且toLogin方法的Model中必须绑定一个user对象,而且必须和单词user一模一样,否则就会报错

modelAttribute="user"用于将表单中的表单项的数据绑定到Model中的user对象中。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/470246
推荐阅读
相关标签
  

闽ICP备14008679号