SpringMVC实现接收前端的数据(从一个网页输入数据,然后将数据提交到另外一个网页,并进行输出:集合,数组,自定义参数对象)

恰巧此时,两手空空才无限拥有。

7dee448613164395abba513560cf185a.jpg

实现简单数据的传递

实现网页数据的提交从一个网页输出数据,将输入的数据提交到另外的一个网页

注意:SpringMVC项目在实现之前都必须进行环境的搭建

SpringMVC项目环境的基础搭配

一:创建提交书单页面

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2022/11/5
  Time: 14:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Book</title>
</head>
<body>
<h1>图书</h1>
<form action="/book2" method="post">
    <table>
        <tr>
            <td>样书</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>作者</td>
            <td><input type="text" name="author"></td>
        </tr>
        <tr>
            <td>价格</td>
            <td><input type="text" name="price"></td>
        </tr>
        <tr>
            <td><input type="submit"value="提交"></td>
        </tr>
    </table>
</form>
</body>
</html>

二:获取第一步提交的数据,并打印在一个新的网页上

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
public class controller_book1 {
    @GetMapping("/book")
    public String book(){
        return "book";
    }

    @RequestMapping(value = "/book2",method = RequestMethod.POST,produces = "text/html;charset=utf-8")  //produces参数:设置字符格式UTF-8
    @ResponseBody
    public String play(String name,String author,double price){
        return name +"----"+author+"----"+price;  //打印获取的数据
    }
}

三:因为我们在网页输入的数据如果没有进行配置的话,肯定会显示乱码如下面情况

08fa16e740b147c683982f427f827373.png

 正常情况下,英文 数字都可以进行输出,但是汉字却无法进行正常的输出,对于这种情况我们要对web.xml进行配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
<!--    配置spring框架的基础内容,在这片内容并没有涉及到Spring的内容,所以就将它们注释起来-->
<!--    <context-param>-->
<!--        <param-name>contextConfigLocation</param-name>-->
<!--        <param-value>classpath:demo1.xml</param-value>-->
<!--    </context-param>-->
<!--    <listener>-->
<!--        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>-->
<!--    </listener>-->


<!--    springmvc的配置内容-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc_demo1.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

<!--下面代码就是对字符格式进行配置-->
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>forceResponseEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

结果演示:

执行项目

d0fdac736cbc4d64bc740078d4283510.png

 输入内容点击提交

网页跳转

e733a252df2a4fe68122bf16bc4f4a38.png

实现对象数据的传递

上面主要介绍了简单数据的传递,接下来介绍实体类的数据进行传递

创建book.jsp通过form将数据传递到控制器中

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2022/11/5
  Time: 14:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Book</title>
</head>
<body>
<h1>图书</h1>
<form action="/play3" method="post">
    <table>
        <tr>
            <td>样书</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>价格</td>
            <td><input type="text" name="price"></td>
        </tr>

        <tr>
            <td><input type="submit"value="提交"></td>
        </tr>
    </table>
</form>
</body>
</html>

在控制器接受数据,上面的方法是通过定义字符串来接受前端传入的数据。在这里将通过一种新的方法来接受数据,就是创一个实体类,将接受的数据传入的实体类,然后在进行打印输出

创建接受数据的实体类

package controller;

//将前端传入的数据全都保存在这个类,然后进行输出

import javax.xml.crypto.Data;
import java.util.Date;

public class book {
    private String name;
    private String author;
    private double price;

    @Override
    public String toString() {
        return "book{" +
                "name='" + name + '\'' +
                ", author=" + author +
                ", price=" + price +
                '}';
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }


    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }
}

在控制器中接收数据,并将接收的数据传递到创建的对象里,然后进行打印输出

    @RequestMapping(value = "/play3",produces = "text/html;charset=utf-8")
    @ResponseBody
    public String play3(book1 book){
        return book.toString();
    }

执行项目:

 点击提交:将前端传入的数据进行打印

自定义参数

在前端上传的数据,并不是全部都能够识别的,我们需要自定义参数的识别类能够识别前端传来的数据,上面所讲述的前端上传的数据类型都是系统自动转换的,但是还有一部分数据是系统无法自动转换的,这时候我们需要将前端传来的数据转换成能够识别的系统。

以时间为例:

配置网页:

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2022/11/5
  Time: 14:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Book</title>
</head>
<body>
<h1>图书</h1>
<form action="/play3" method="post">
    <table>
        <tr>
            <td>出版时间</td>
            <td><input type="date" name="time"></td>
        </tr>
        <tr>
            <td>样书</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>样书</td>
            <td><input type="text" name="author"></td>
        </tr>
        <tr>
            <td>作者</td>
            <td><input type="text" name="author.name"></td>
        </tr>

        <tr>
            <td>年龄</td>
            <td><input type="text" name="author.age"></td>
        </tr>
        <tr>
            <td>价格</td>
            <td><input type="text" name="price"></td>
        </tr>

        <tr>
            <td><input type="submit"value="提交"></td>
        </tr>
    </table>
</form>
</body>
</html>

结果:

 如果按照上面的配置内容点击提交,会出现下面错误,所以我们要通过自定义参数配置使系统来接收前端传来的数据

 配置自定义参数类:

package controller;

//参数接收并不是全部都能进行输出的,,但是我们可以自定参数类型

import org.springframework.core.convert.converter.Converter;

import org.springframework.stereotype.Controller;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
@Controller
public class custom implements Converter<String, Date> {   //实现Converter接口并将Date类型转换成String类型的数据
    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");  //配置显示时间样式

    @Override
    public Date convert(String source) {
        System.out.println("kankan");
        try {
            return format.parse(source);

        } catch (ParseException e) {
            e.printStackTrace();
        }
        return null;
    }
}

创建接口数据对象类:

package controller;

//将前端传入的数据全都保存在这个类,然后进行输出

import javax.xml.crypto.Data;
import java.util.Date;

public class book {
    private String name;
    private String author;
    private double price;
    private Date time;

    public Date getTime() {
        return time;
    }

    public void setTime(Date time) {
        this.time = time;
    }

    @Override
    public String toString() {
        return "book{" +
                "name='" + name + '\'' +
                ", author='" + author + '\'' +
                ", price=" + price +
                ", time=" + time +
                '}';
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }


    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }
}

前面我们配置了自定义参数类,我们需要让框架加载我们创建自定义参数类

在配置文件进行配置:

<?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"
       xmlns:mvc="http://www.springframework.org/schema/mvc"

       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">

<!--    创建组件扫描功能-->
    <context:component-scan base-package="controller"></context:component-scan>
    <mvc:annotation-driven conversion-service="factoryBean"/>  <!--通过conversion-service="factoryBean"将自定义参数类的配置加载到mvc框架中-->
<!--配置类配置前面我们创建的自定义参数类-->
    <bean class="org.springframework.context.support.ConversionServiceFactoryBean" id="factoryBean">
        <property name="converters">
            <set>
                <ref bean="custom"></ref>
            </set>

        </property>

    </bean>
<!--配置视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="modelAndView">
        <property name="prefix" value="/jsp/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>

</beans>

 控制器配置:

    @RequestMapping(value = "/play3",produces = "text/html;charset=utf-8")
    @ResponseBody
    public String play3(book book){
        return book.toString();
    }

效果展示:

 内容输出:

通过数组来实现接收前端传入数据

配置前端,使数据能够按照各种方法传递给后端

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2022/11/5
  Time: 14:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Book</title>
</head>
<body>
<h1>图书</h1>
<form action="/play3" method="post">
    <table>
        <tr>
            <td>出版时间</td>
            <td><input type="date" name="time"></td>
        </tr>
        <tr>
            <td>样书</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>样书</td>
            <td><input type="text" name="author"></td>
        </tr>
        <tr>
            <!--通过Map集合来获取前端传来的数据-->

            <td>作</td>
            <td><input type="text" name="map['zuo']"></td>
        </tr>
        <tr>
            <td>者</td>
            <td><input type="text" name="map['zhe']"></td>
        </tr>

        <!--List集合获取传来的数据-->
        
        <tr>
            <td>爱好</td>
            <td>
                <input type="checkbox" name="favo" value="lan"> lan
                <input type="checkbox" name="favo" value="qiu"> qiu
                <input type="checkbox" name="favo" value="ni"> ni
                <input type="checkbox" name="favo" value="mm"> mm
            </td>
        </tr>

        <!--通过List类来实现数据的接收-->
        <tr>
            <td>listdemo</td>
            <td>
                <input type="checkbox" value="不想" name="book2[0].name">不想
                <input type="hidden" value="0" name="book2[0].id">
                <input type="checkbox" value="睡醒" name="book2[1].name">不想
                <input type="hidden" value="1" name="book2[1].id">
                <input type="checkbox" value="不想" name="book2[2].name">不想
                <input type="hidden" value="2" name="book2[2].id">
            </td>
        </tr>
        <tr>
            <td>年龄</td>
            <td><input type="text" name="author.age"></td>
        </tr>
        <tr>
            <td>价格</td>
            <td><input type="text" name="price"></td>
        </tr>

        <tr>
            <td><input type="submit"value="提交"></td>
        </tr>
    </table>
</form>
</body>
</html>

后端创建类来储存前端传来的数据‘

package controller;

//将前端传入的数据全都保存在这个类,然后进行输出

import javax.xml.crypto.Data;
import java.util.Date;
import java.util.List;
import java.util.Map;

public class book {
    private String name;
    private String author;
    private double price;
    private Date time;
    private List<String> favo;
    private List<book2> book2;
    private Map<String,Object> map;

    @Override
    public String toString() {
        return "book{" +
                "name='" + name + '\'' +
                ", author='" + author + '\'' +
                ", price=" + price +
                ", time=" + time +
                ", favo=" + favo +
                ", book2=" + book2 +
                ", map=" + map +
                '}';
    }

    public Map<String, Object> getMap() {
        return map;
    }

    public void setMap(Map<String, Object> map) {
        this.map = map;
    }

    public List<controller.book2> getBook2() {
        return book2;
    }

    public void setBook2(List<controller.book2> book2) {
        this.book2 = book2;
    }

    public List<String> getFavo() {
        return favo;
    }

    public void setFavo(List<String> favo) {
        this.favo = favo;
    }

    public Date getTime() {
        return time;
    }

    public void setTime(Date time) {
        this.time = time;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }


    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }
}

class book2{
    private String name;
    private Integer id;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    @Override
    public String toString() {
        return "book2{" +
                "name='" + name + '\'' +
                ", id=" + id +
                '}';
    }
}

执行项目:

 点击提交,获取前端所传来的数据

 上面网页所显示的内容就是通过各种方法去获取前端所传来的数据内容,但是比如像集合和数组等那些方法在实际开发基本上不大会使用,基本上都是通过对象来获取数据。

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不想睡醒的梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值