SpringMVC实现接收前端的数据(从一个网页输入数据,然后将数据提交到另外一个网页,并进行输出)

发布于:2022-11-09 ⋅ 阅读:(10) ⋅ 点赞:(0) ⋅ 评论:(0)

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

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();
    }

效果展示:

 内容输出: