SSM框架实现前后台交互-从零学习ssm框架（2）

旧城等待， 2022-05-28 01:20 373阅读 0赞

## 前言 ##

*  我的所有博客操作均有相应截图，所以只要跟着做，一定是能跑通的

这篇先从最简单的界面跳转到前后台交互以及后台的数据处理。  
如果还没有配置好ssm框架，那就赏脸看看  
[https://blog.csdn.net/babybabyup/article/details/79687097][https_blog.csdn.net_babybabyup_article_details_79687097] 呗。  
这一篇里面的文件路径均为配置篇所讲到的。

## 页面的简单跳转 ##

在一个完整的网站系统中，页面与页面之间的跳转是最常见的也是至关重要的。在ssm框架中，站内的页面跳转会经过后台的某些处理，即`controller`包中的java文件会起到作用。

### 站内的页面跳转 ###

#### 新建`test1.jsp` ####

在`views`路径下，新建`test1.jsp`，其中的代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>TEST</title>
    </head>
    <body>
    <b>This is test1.jsp!</b>
    </body>
    </html>

#### 在`index.jsp`添加链接 ####

在`index.jsp`中添加代码

<a href="/test1" target="_blank">前往test1.jsp</a>

#### 后台`controller`处理 ####

在`controller`包中新建class为`IndexController`，并且注解为`Controller`,贴代码：

@Controller
    public class IndexController {
        @RequestMapping(value = "/test1")
        public String tes1() {
            return "test1";
        }
    }

## 前台传数据到后台 ##

在一个网站中，用户难免要提交一些数据，这就涉及到了数据的前后台传递。在SSM框架中，数据可以通过两种方式传到后台即

*  通过url传值
 *  通过表单传值

当然，我觉得在实际中表单传值用到的更多一些，下面具体讲一讲这两种方式的代码实现喽

*  通过url传值：index页面上把a=5传递到后台后然后跳转到test1页面并且把a的值显示出来。index页面的代码：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Index</title>
        <script src="/js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
    这个是index页面<br>
    <a href="/test1?a=5">将a=5传值到后台</a>
    </body>
    </html>

在controller包中新建class`IndexController`,其中的代码为

package com.springmvc.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    
    import java.net.URL;
    
    @Controller
    public class IndexController {
        @RequestMapping(value = "/test1",method = RequestMethod.GET)
        public String testController(@RequestParam int a,Model model) {
            int pa = a;
            model.addAttribute("a",pa);
            return "test1";
        }
    }

test1页面的代码就是把传过来的a值显示出来。代码：

<%-- Created by IntelliJ IDEA. User: hulimin Date: 2017/10/28 Time: 21:31 To change this template use File | Settings | File Templates. --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>TEST</title>
        <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="/js/ajaxfileupload.js"></script>
    </head>
    <body>
    从index页面传过来的a=${a}
    </body>
    </html>

其中`${}` el语句，后边的文章会讲到的，现在知道怎么用就好了

各个页面截图如下：  
index页面：  
![70][]  
点击后到达test1页面 如下：  
![70 1][]

*  通过表单传值。在index页面输入表单内容，在test1页面显示出来

index页面新增一个表单代码

新增代码<br>
    <form action="test2" method="post">
        <table>
            <tr>
                <td>
                    姓名：
                </td>
                <td>
                    <input type="text" name="username" placeholder="username">
                </td>
            </tr>
            <tr>
                <td>
                    学号：
                </td>
                <td>
                    <input type="text" name="studentnumber" placeholder="studentnumber">
                </td>
            </tr>
            <tr>
                <td>
                     
                </td>
                <td>
                    <input type="submit" value="提交">
                </td>
            </tr>
        </table>
    </form>

后台`Indexcontroller` 类中新增方法

//测试表单传值
        @RequestMapping(value = "/test2",method = RequestMethod.POST)
        public String test2Controller(@RequestParam String username,@RequestParam String studentnumber,Model model) {
            String name = username;
            String number = studentnumber;
            model.addAttribute("name",name);
            model.addAttribute("number",number);
            return "test1";
        }

test1页面中新增

表单传值得到了：名字是${name},学号是${number}<br>

通过el语句把传来的值显示出来

*  运行结果截图

index页面

![70 2][]

test1 页面  
![70 3][]

*有任何讲的不对的地方欢迎提出来哦*

[https_blog.csdn.net_babybabyup_article_details_79687097]: https://blog.csdn.net/babybabyup/article/details/79687097
[70]: /images/20220528/05e29d79c0c34f65bc2398063ad36b19.png
[70 1]: /images/20220528/3307e709243f4853b3c699e5af288786.png
[70 2]: /images/20220528/f56f4596c40b4036aee2ab6b600c0746.png
[70 3]: /images/20220528/c01e2b3a242b447485e7c10bb670a117.png