题目:定义一个员工实体(Employee),实现批量添加员工功能,在表单中可以一次添加多个员工,数据可以不持久化

1,新建一个项目

2, 然后选择Maven框架选择 maven-archetype-webapp     再--->Next

填写 GroupId、 ArtifactId

选择配置(选择自己的Maven本地仓库等等...)

选择自动导入

为了“ [  ]” 能通过请求还中文tk,把Tomcat修改conf/server.xml文件,如下所示:

  1. <Connector port="8080" protocol="HTTP/1.1"
  2. connectionTimeout="20000"
  3. redirectPort="8443" URIEncoding="utf-8" relaxedQueryChars="],["/>

如果不记得Tomcat的位子 方法如下:

自动导入后打开 pom.xml  添加版本号

  1. <spring.version>4.3.0.RELEASE</spring.version>

再把依赖包导入

  1. <!--Spring框架核心库 -->
  2. <dependency>
  3. <groupId>org.springframework</groupId>
  4. <artifactId>spring-context</artifactId>
  5. <version>${spring.version}</version>
  6. </dependency>
  7. <!-- Spring MVC -->
  8. <dependency>
  9. <groupId>org.springframework</groupId>
  10. <artifactId>spring-webmvc</artifactId>
  11. <version>${spring.version}</version>
  12. </dependency>
  13. <!-- JSTL -->
  14. <dependency>
  15. <groupId>javax.servlet</groupId>
  16. <artifactId>jstl</artifactId>
  17. <version>1.2</version>
  18. </dependency>
  19. <!-- Servlet核心包 -->
  20. <dependency>
  21. <groupId>javax.servlet</groupId>
  22. <artifactId>javax.servlet-api</artifactId>
  23. <version>3.0.1</version>
  24. <scope>provided</scope>
  25. </dependency>
  26. <!--JSP应用程序接口 -->
  27. <dependency>
  28. <groupId>javax.servlet.jsp</groupId>
  29. <artifactId>jsp-api</artifactId>
  30. <version>2.1</version>
  31. <scope>provided</scope>
  32. </dependency>

打开 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_3_0.xsd"
  5. id="WebApp_ID" version="3.0">
  6.  
  7. <!--注册servlet-->
  8. <servlet>
  9. <!--名称 -->
  10. <servlet-name>springmvc</servlet-name>
  11. <!-- Servlet类 -->
  12. <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  13. <init-param>
  14. <!--SpringMVC配置参数文件的位置 -->
  15. <param-name>contextConfigLocation</param-name>
  16. <!--这里是存放在resources目录下的springmvc-servlet.xml -->
  17. <param-value>classpath*:springmvc-servlet.xml</param-value>
  18. </init-param>
  19. <!-- 启动顺序,数字越小,启动越早 -->
  20. <load-on-startup>1</load-on-startup>
  21. </servlet>
  22.  
  23. <!--所有请求都会被springmvc拦截 -->
  24. <servlet-mapping>
  25. <servlet-name>springmvc</servlet-name>
  26. <url-pattern>/</url-pattern>
  27. </servlet-mapping>
  28.  
  29. </web-app>

但是会有一处报错 因为还没有新建  pringmvc-servlet.xml  文件

下面创建 java resources 并且指定文件类型

Shift+Ctrl+Alt+S 打开

指定文件类型

在resources 下新建 pringmvc-servlet.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" xmlns:context="http://www.springframework.org/schema/context"
  4. xmlns:mvc="http://www.springframework.org/schema/mvc"
  5. xsi:schemaLocation="http://www.springframework.org/schema/beans
  6. http://www.springframework.org/schema/beans/spring-beans.xsd
  7. http://www.springframework.org/schema/context
  8. http://www.springframework.org/schema/context/spring-context-4.3.xsd
  9. http://www.springframework.org/schema/mvc
  10. http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd">
  11.  
  12. <!-- 自动扫描包,实现支持注解的IOC -->
  13. <context:component-scan base-package="com.controller" />
  14.  
  15. <!-- Spring MVC不处理静态资源 -->
  16. <mvc:default-servlet-handler />
  17.  
  18. <!-- 支持mvc注解驱动 -->
  19. <mvc:annotation-driven />
  20.  
  21. <!-- 视图解析器 -->
  22. <bean
  23. class="org.springframework.web.servlet.view.InternalResourceViewResolver"
  24. id="internalResourceViewResolver">
  25. <!-- 前缀 -->
  26. <property name="prefix" value="/WEB-INF/views/" />
  27. <!-- 后缀 -->
  28. <property name="suffix" value=".jsp" />
  29. </bean>
  30.  
  31. </beans>

然后看几处报错误,没关系等下新建几个包就好了

接下来 在 WEB-INF 下的views下的foo新建 addStaff.jsp 文件

  1. <%--
  2. Created by IntelliJ IDEA.
  3. User: XIHEHUA
  4. Date: 2018/10/25
  5. Time: 20:06
  6. To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  10. <html>
  11. <head>
  12. <title>Title</title>
  13. <style>
  14. input{
  15. text-align: center;
  16. }
  17. .text{
  18. width: 800px;
  19. height: 900px;
  20. margin: 0 auto;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="text">
  26. <h1>员工信息</h1>
  27. <form action="/employee/add">
  28. <table id="mytab" border="1" width="50%" style="text-align: center;">
  29. <tr>
  30. <td>员工编号</td>
  31. <td>姓名</td>
  32. <td>性别</td>
  33. <td>学历</td>
  34. <td>月薪</td>
  35. <td>增加</td>
  36. <td>移除</td>
  37. </tr>
  38. <tr>
  39. <td><input type="text" name="list[0].id"/></td>
  40. <td><input type="text" name="list[0].name" /></td>
  41. <td>
  42. <select name="list[0].sex">
  43. <option value ="null">--请选择--</option>
  44. <option value ="男"></option>
  45. <option value ="女"></option>
  46. <option value="保密">保密</option>
  47. </select>
  48. </td>
  49. <td>
  50. <select name="list[0].xueli">
  51. <option value ="null">--请选择--</option>
  52. <option value="高中">高中</option>
  53. <option value ="专科">专科</option>
  54. <option value ="本科">本科</option>
  55. <option value="重点">重点</option>
  56. <option value="硕士">硕士</option>
  57. </select>
  58. </td>
  59. <td><input type="text" name="list[0].price"/></td>
  60. <td><input type="button" name="add" onclick="addRows(this)" style="width: 80px;" value="+" /></td>
  61. <td><input type="button" class='but' name="dele" onclick="delRows(this)" style="width: 80px;" value="-"/></td>
  62. </tr>
  63. </table>
  64. <div id="" style="width: 50%; margin: 30px 0 30px 25%;">
  65. <button id="allAdd" style="width: 120px; height: 40px;">批量添加</button>
  66. </div>
  67. </form>
  68.  
  69. <table border="1" width="50%" style="text-align: center;">
  70. <tr>
  71. <td>员工编号</td>
  72. <td >姓名</td>
  73. <td >性别</td>
  74. <td >学历</td>
  75. <td >月薪</td>
  76. </tr>
  77.  
  78. <c:forEach items="${msg.list}" var="user">
  79. <tr>
  80. <td>${user.id}</td>
  81. <td>${user.name}</td>
  82. <td>${user.sex}</td>
  83. <td>${user.xueli}</td>
  84. <td>${user.price}</td>
  85. </tr>
  86. </c:forEach>
  87. </table>
  88. </div>
  89. </body>
  90. <script type="text/javascript" src="../../../js/jquery-3.3.1.js">
  91. </script>
  92. <script type="text/javascript">
  93. function addRows(obj){
  94. var count=$("#mytab tr").length-1;
  95. var tr="<tr>"
  96. tr+="<td><input type='text' name='list["+count+"].id'/></td>"
  97. tr+="<td><input type='text' name='list["+count+"].name' /></td>"
  98. tr+="<td><select name='list["+count+"].sex'>" +
  99. "<option value=''>--请选择--</option>" +
  100. "<option value='男'>男</option>" +
  101. "<option value='女'>女</option>" +
  102. "<option value='保密'>保密</option>"+
  103. "</td>"
  104. tr+="<td><select name='list["+count+"].xueli' id=''>" +
  105. "<option value=''>--请选择--</option>" +
  106. "<option value='高中'>高中</option>" +
  107. "<option value='专科'>专科</option>" +
  108. "<option value='本科'>本科</option>" +
  109. "<option value='重点'>重点</option>" +
  110. "<option value='硕士'>硕士</option>" +
  111. "</select></td>"
  112. tr+="<td><input type='text' name='list["+count+"].price'/></td>"
  113. tr+="<td><input type='button' style='width: 80px' value='+'onclick='addRows(this)'></td>"
  114. tr+="<td><input type='button' class='but' style='width: 80px' value='-' onclick='delRows(this)'></td>"
  115. tr+="</tr>"
  116. $("#mytab").append(tr);
  117.  
  118. //alert(obj.parentNode.parentNode.tagName);
  119. //克隆当前行,返回一个Jquery对象,代表是一行元素
  120. // var newStr=$(obj.parentNode.parentNode).clone();
  121. // var count=$("#mytab tr").length;
  122. //从newStr这个Jquery对象中查找第一个td
  123. // newStr.find("td:eq(0)").text(count);
  124. //$("#mytab").append(newStr);
  125. }
  126. function delRows(obj){
  127. //取出当前行
  128. //var nowStr=$(obj.parentNode.parentNode);
  129. //nowStr.remove();
  130.  
  131. // var index=$("#mytab tr").index($(obj.parentNode.parentNode));
  132. // $("#mytab tr").remove("tr:eq("+index+")");
  133.  
  134. $("body").on("click", ".but", function (obj) {
  135. var tr = this.parentNode.parentNode;
  136. if ($("#mytab tr").length > 2) {
  137. $(tr).remove();
  138. } else {
  139. return false;
  140.  
  141. }
  142. });
  143.  
  144. }
  145. </script>
  146.  
  147. </html>

在 java 下的com文件夹中 的controller 新建控制器 EmpoyeeController.java

  1. package com.controller;
  2.  
  3. import com.entities.EmployeeList;
  4. import org.springframework.stereotype.Controller;
  5. import org.springframework.ui.Model;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7.  
  8. @Controller
  9. @RequestMapping("/employee")
  10. public class EmpoyeeController {
  11. @RequestMapping("/add")
  12. public String add(Model model, EmployeeList list){
  13. model.addAttribute("msg",list);
  14. return "foo/addStaff";
  15. }
  16.  
  17. }

在 java 下的com文件夹中 的entities 新建实体类与实体的Listw集合 Employee.java ,EmployeeList.java

  1. package com.entities;
  2.  
  3. public class Employee {
  4. private int id;
  5. private String name;
  6. private String sex;
  7. private String xueli;
  8. private Double price;
  9.  
  10. public Employee() {
  11. }
  12.  
  13. public Employee(int id, String name, String sex, String xueli, Double price) {
  14. this.id = id;
  15. this.name = name;
  16. this.sex = sex;
  17. this.xueli = xueli;
  18. this.price = price;
  19. }
  20.  
  21. @Override
  22. public String toString() {
  23. return "Employee{" +
  24. "id=" + id +
  25. ", name='" + name + '\'' +
  26. ", sex='" + sex + '\'' +
  27. ", xueli='" + xueli + '\'' +
  28. ", price=" + price +
  29. '}';
  30. }
  31.  
  32. public int getId() {
  33. return id;
  34. }
  35.  
  36. public void setId(int id) {
  37. this.id = id;
  38. }
  39.  
  40. public String getName() {
  41. return name;
  42. }
  43.  
  44. public void setName(String name) {
  45. this.name = name;
  46. }
  47.  
  48. public String getSex() {
  49. return sex;
  50. }
  51.  
  52. public void setSex(String sex) {
  53. this.sex = sex;
  54. }
  55.  
  56. public String getXueli() {
  57. return xueli;
  58. }
  59.  
  60. public void setXueli(String xueli) {
  61. this.xueli = xueli;
  62. }
  63.  
  64. public Double getPrice() {
  65. return price;
  66. }
  67.  
  68. public void setPrice(Double price) {
  69. this.price = price;
  70. }
  71. }
  1. package com.entities;
  2.  
  3. import java.util.List;
  4.  
  5. public class EmployeeList {
  6. private List<Employee> list;
  7.  
  8. public List<Employee> getList() {
  9. return list;
  10. }
  11.  
  12. public void setList(List<Employee> list) {
  13. this.list = list;
  14. }
  15. }

好,接下来把js文件夹引入jquery (用自己的就好了,但记得在jsp页面中修改引用)

最后配置 Tomcat

点击 OK  运行 Tomcat

最后就自己测试吧

Spring MVC Action参数类型 List集合类型(简单案例)的更多相关文章

  1. Spring MVC请求参数绑定 自定义类型转化 和获取原声带额servlet request response信息

    首先还在我们的框架的基础上建立文件 在domian下建立Account实体类 import org.springframework.stereotype.Controller; import org. ...

  2. spring mvc绑定参数之 类型转换 有三种方式:

    spring mvc绑定参数之类型转换有三种方式: 1.实体类中加日期格式化注解(上次做项目使用的这种.简单,但有缺点,是一种局部的处理方式,只能在本实体类中使用.方法三是全局的.) @DateTim ...

  3. { MySQL基础数据类型}一 介绍 二 数值类型 三 日期类型 四 字符串类型 五 枚举类型与集合类型

    MySQL基础数据类型 阅读目录 一 介绍 二 数值类型 三 日期类型 四 字符串类型 五 枚举类型与集合类型 一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己 ...

  4. Spring MVC接收参数(Map,List,JSON,Date,2个Bean)(记录一次面试惨状)

    题目Spring MVC 接收参数 MapListDate2个BeanJSON Spring MVC接收参数 -Map Spring MVC接收参数 -List Spring MVC接收参数 -dat ...

  5. Mysql数据类型《三》枚举类型与集合类型

    枚举类型与集合类型 字段的值只能在给定范围中选择,如单选框,多选框 enum 单选 只能在给定的范围内选一个值,如性别 sex 男male/女female set 多选 在给定的范围内可以选择一个或一 ...

  6. mysql枚举类型与集合类型

    枚举类型与集合类型 字段的值只能在给定范围中选择,如单选框,多选框 enum 单选 只能在给定的范围内选一个值,如性别 sex 男male/女female set 多选 在给定的范围内可以选择一个或一 ...

  7. SpringMVC由浅入深day02_1课程安排_2包装类型pojo参数绑定_3集合类型绑定

    springmvc第二天 高级知识 复习: springmvc框架: DispatcherServlet前端控制器:接收request,进行response HandlerMapping处理器映射器: ...

  8. 一起学Spring之三种注入方式及集合类型注入

    本文主要讲解Spring开发中三种不同的注入方式,以及集合数据类型的注入,仅供学习分享使用,如有不足之处,还请指正. 概述 Spring的注入方式一共有三种,如下所示: 通过set属性进行注入,即通过 ...

  9. ASP.NET MVC Action向视图传值之匿名类型

    在使用ASP.NET MVC过程中想必大家都有遇到过一个问题就是我们的Action如何向视图传递匿名类型的值呢,如果不做特殊处理则无法实现. 接下来我们来看一个示例: 在我们的控制中: using S ...

随机推荐

  1. What Does Reconciliation Mean in Accounting

    Account reconciliation is the process of comparing transactions you have recorded using internal rec ...

  2. Eigen

    Eigen: https://eigen.tuxfamily.org/dox/GettingStarted.html

  3. numpy模块的基本使用

    numpy(Numerical Python)提供了python对多维数组对象的支持:ndarray,具有矢量运算能力,快速.节省空间.numpy支持高级大量的维度数组与矩阵运算,此外也针对数组运算提 ...

  4. Selenium常用API的使用java语言之11-设置元素等待

    WebDriver提供了两种类型的等待:显式等待和隐式等待. 1.显示等待 WebDriver提供了显式等待方法,专门针对某个元素进行等待判断. import org.openqa.selenium. ...

  5. CSS display详解

    1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素): 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行 ...

  6. jquery轮播事件效果

    今天闲着有时间把轮播事件重新写了一下,发现以前用的很多插件大多支持度不算太友好,很多小问题 自己写了一个,不好地方请指教 先建立文件,css,js,图片,引入jquery <!DOCTYPE h ...

  7. HTML 005 段落

    HTML 段落 HTML 可以将文档分割为若干段落. HTML 段落 段落是通过 <p> 标签定义的. 实例 <p>这是一个段落 </p> <p>这是另 ...

  8. Greenplum 调优--VACUUM系统表

    Greenplum 调优--VACUUM系统表 1.VACUUM系统表原因 Greenplum是基于MVCC版本控制的,所有的delete并没有删除数据,而是将这一行数据标记为删除, 而且update ...

  9. (转)实验文档4:kubernetes集群的监控和日志分析

    改造dubbo-demo-web项目为Tomcat启动项目 Tomcat官网 准备Tomcat的镜像底包 准备tomcat二进制包 运维主机HDSS7-200.host.com上:Tomcat8下载链 ...

  10. WallpaperEngine 导入 mp4 文件出现 failed opening video

    WallpaperEngine 导入 mp4 文件出现 failed opening video 如图 下载这个插件 链接:点击打开链接 密码:dkf8