SpringMVC交互页面

1.项目依赖

1.1pom.xml依赖

尤其要注意Springboot的版本，可以参考上一篇文章中的介绍

在pom.xml文件的元素中加入如下依赖信息，内容如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-context</artifactId>
  <version>5.2.8.RELEASE</version>
</dependency>
<!--Spring MVC-->
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-webmvc</artifactId>
  <version>5.2.8.RELEASE</version>
</dependency>
<!-- servlet -->
<dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>javax.servlet-api</artifactId>
  <version>3.1.0</version>
  <scope>provided</scope>
</dependency>
<!--JSP-->
<dependency>
  <groupId>javax.servlet.jsp</groupId>
  <artifactId>jsp-api</artifactId>
  <version>2.1</version>
  <scope>provided</scope>
</dependency>

1.2spring-mvc.xml配置

在src/main/resources中创建config文件夹，并在其中创建Spring MVC配置文件spring-mvc.xml，内容如下：

这里有一个Bean依赖，注意位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd">
    <context:component-scan base-package="com.javaee.ex08.controller"/>
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/pages/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

1.3web.xml配置

在web.xml文件中，加入前端控制器的配置：

这里有spring-mvc.xml位置的添加，要注意位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd"
         version="6.0">
    <display-name>SpringMVC</display-name>
    <!-- 定义前端控制器springmvc -->
    <servlet>
        <servlet-name>spring-mvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 指定路径 -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc-servlet.xml</param-value>
        </init-param>
        <!-- 随spring启动而启动 -->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>spring-mvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

2.页面交互

2.1UserController

创建一个控制器com.javaee.ex08.controUserControllerller.UserController类，用于账户管理、登录及注册（为简单起见，这里仅给出登录），内容如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

@Controller
@RequestMapping("/user") // 公共请求路径
public class UserController {
    @RequestMapping("/to_login")
    public String toLogin(){
        return "user/login"; // 经过视图解析器解析
    }
    @RequestMapping("/login")
    public String login(@RequestParam("login_name") String loginName,
    String password, Model model){
        if (!password.equals("888888")){
             model.addAttribute("login_error","登录失败，请重试！");
             return "forward:to_login";
            // 转发请求（不含公共路径）
            //return "redirect:to_login"; 
            // 重定向请求（不含公共路径）
}
        model.addAttribute("login_name",loginName);
        model.addAttribute(password);
        return "user/main";
    }
    @RequestMapping("/to_index")
    public String toIndex(){
        return "redirect:/index.jsp"; 
        // 重定向到页面，不被解析，“/”表示从根相对路径开始，若无“/”，
        //则从当前公共路径“user”开始
    }
}

****说明****：控制器方法的return语句中，若含redirect或forward，则不受视图解析器解析。

2.2html、jsp页面

修改index.jsp文件（该文件在创建项目时，自动生成），在其中添加一超链接，内容如下:

1
2
3
4
5
6
<html>
<body>
<h2>Hello World!</h2>
<a href="user/to_login">登录</a>
</body>
</html>

在WEB-INF/pages/user下，新建login.jsp和main.jsp文件，用作登录页面及成功登录后要跳转的页面，内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- login.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored ="false" %>
<html>
<head>
    <title>用户登录</title>
</head>
<body>
    <form id="form1" name="form1" method="post" action="login">
        <table width="344" height="95" border="0" cellpadding="0" cellspacing="1"
               style="background-color: #3A8ECD; color: #000000;">
            <tr>
                <td height="30" colspan="2" align="center" valign="middle" style="color: #FFF">用户登录</td>
            </tr>
            <tr>
                <td width="114" height="30" align="right" valign="middle" bgcolor="#FFFFFF">登录名：</td>
                <td width="227" height="20" align="left" valign="middle" bgcolor="#FFFFFF">
                    <input type="text" name="login_name" /></td>
            </tr>
            <tr>
                <td height="30" align="right" valign="middle" bgcolor="#FFFFFF">密码：</td>
                <td height="20" align="left" valign="middle" bgcolor="#FFFFFF">
                    <input type="password" name="password" /></td>
            </tr>
            <tr>
                <td height="30" colspan="2" align="center" valign="middle" bgcolor="#FFFFFF">
                    <input type="submit" name="button" id="button" value="提交" />&nbsp;&nbsp;
                    <input type="reset" name="button2" id="button2" value="重置" /></td>
            </tr>
        </table>
        <p style="color: #F00">${login_error}</p>
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- main.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored ="false" %>

<html>
<head>
    <title>成绩管理系统</title>
</head>
<body>
<p>[${login_name}]用户您好！欢迎使用成绩管理系统</p>
<p><a href="${pageContext.request.contextPath}/user/to_index">回到首页</a></p>
</body>
</html>

配置tomcat后启动项目

3.页面效果

3.1index.jsp页面

top1.jpg

3.2login.jsp页面截图（正常）

top2.jpg

3.3login.jsp页面截图（含错误提示信息）

image-20241123221433760

3.4main.jsp页面截图

top04.jpg

4.实现用户注册交互

4.1注册功能

参照登录过程，在UserController中添加方法，实现注册过程的跳转。修改后的UserController类代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@RequestMapping("/to_register")
public String toRegister(){
    return "user/register"; // 经过视图解析器解析
}
@RequestMapping("/register")
public String register(@RequestParam("login_name") String loginName,
                       @RequestParam("user_name") String userName,
                        String password, String password1, String email, Model model){
    if (password.compareTo(password1) != 0){
        model.addAttribute("register_error","密码不一致");
        return "forward:to_register";
    }
    return "user/login";
}

在WEB-INF/pages中，添加register.jsp页面，提供注册表单（表单的action值要与后面的控制器方法对应）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// register.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored ="false" %>
<html>
<head>
    <title>注册新用户</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="register">
    <table width="344" height="95" border="0" cellpadding="0" cellspacing="1"
           style="background-color: #3A8ECD; color: #000000;">
        <tr>
            <td height="30" colspan="2" align="center" valign="middle" style="color: #FFF">注册</td>
        </tr>
        <tr>
            <td width="114" height="30" align="right" valign="middle" bgcolor="#FFFFFF">登录名：</td>
            <td width="227" height="20" align="left" valign="middle" bgcolor="#FFFFFF">
                <input type="text" name="login_name" /></td>
        </tr>
        <tr>
            <td height="30" align="right" valign="middle" bgcolor="#FFFFFF">密码：</td>
            <td height="20" align="left" valign="middle" bgcolor="#FFFFFF">
                <input type="password" name="password" /></td>
        </tr>
        <tr>
            <td height="30" align="right" valign="middle" bgcolor="#FFFFFF">密码确认：</td>
            <td height="20" align="left" valign="middle" bgcolor="#FFFFFF">
                <input type="password" name="password1" /></td>
        </tr>
        <tr>
            <td width="114" height="30" align="right" valign="middle" bgcolor="#FFFFFF">用户名：</td>
            <td width="227" height="20" align="left" valign="middle" bgcolor="#FFFFFF">
                <input type="text" name="user_name" /></td>
        </tr>
        <tr>
            <td width="114" height="30" align="right" valign="middle" bgcolor="#FFFFFF">邮箱：</td>
            <td width="227" height="20" align="left" valign="middle" bgcolor="#FFFFFF">
                <input type="text" name="email" /></td>
        </tr>
        <tr>
            <td height="30" colspan="2" align="center" valign="middle" bgcolor="#FFFFFF">
                <input type="submit" name="button" id="button" value="提交" />&nbsp;&nbsp;
                <input type="reset" name="button2" id="button2" value="重置" /></td>
        </tr>
    </table>
    <p style="color: #F00">${register_error}</p>
</form>
</body>
</html>

在index.jsp页面中，添加跳转到register.jsp页面的元素，内容如下。

1
<a href="user/to_register">注册</a>

4.2运行效果

运行项目，完成从index页到register页，从register页到register页（账号错误时），以及从register页到login页的跳转。给出跳转过程中每个页面的截图。

register.jsp页面截图（正常）

123.jpg

register.jsp页面截图（含错误提示信息）

cuowu.jpg

5.学生信息提交

5.1添加学生

在wepapp目录下，创建jsp文件add_student.jsp，提供提交学生信息的表单（表单的action值要与后面的控制器方法对应），内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加新同学</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="add_student">
    <table width="344" height="95" border="0" cellpadding="0" cellspacing="1"
           style="background-color: #3A8ECD; color: #000000;">
        <tr>
            <td height="30" colspan="2" align="center" valign="middle" style="color: #FFF">添加新同学</td>
        </tr>
        <tr>
            <td width="114" height="30" align="right" valign="middle" bgcolor="#FFFFFF">学号：</td>
            <td width="227" height="20" align="left" valign="middle" bgcolor="#FFFFFF">
                <input type="text" name="sno" /></td>
        </tr>
        <tr>
            <td height="30" align="right" valign="middle" bgcolor="#FFFFFF">姓名：</td>
            <td height="20" align="left" valign="middle" bgcolor="#FFFFFF">
                <input type="text" name="sname" /></td>
        </tr>
        <tr>
            <td height="30" align="right" valign="middle" bgcolor="#FFFFFF">性别：</td>
            <td height="20" align="left" valign="middle" bgcolor="#FFFFFF">
                <select name="ssex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </td>
        </tr>
        <tr>
            <td width="114" height="30" align="right" valign="middle" bgcolor="#FFFFFF">年龄：</td>
            <td width="227" height="20" align="left" valign="middle" bgcolor="#FFFFFF">
                <input type="number" name="age" /></td>
        </tr>
        <tr>
            <td height="30" colspan="2" align="center" valign="middle" bgcolor="#FFFFFF">
                <input type="submit" name="button" id="button" value="提交" />&nbsp;&nbsp;
                <input type="reset" name="button2" id="button2" value="重置" /></td>
        </tr>
    </table>
</form>
</body>
</html>

在/WEB-INF/pages目录下，创建jsp文件student_info.jsp，要求显示所有学生信息，内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- main.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored ="false" %>

<html>
<head>
    <title>学生信息</title>
</head>
<body>
<p>
<h3>学号：${sno}</h3>
<h3>姓名：${sname}</h3>
<h3>性别：${ssex}</h3>
<h3>年龄：${age}</h3>
</p>
</body>
</html>

在创建com.javaee.ex08.controller.StudentController控制器类，实现学生信息的接收，并转发给student_info.jsp文件，内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
@Controller
public class StudentController {
    @RequestMapping("/add_student")
    public String addStudent(String sno, String sname, String ssex, int age, String snative, String tel, Model model){
        model.addAttribute("sno", sno);
        model.addAttribute("sname", sname);
        model.addAttribute("ssex", ssex);
        model.addAttribute("age", age);
        System.out.println("asdkfkadsf");
        return "student_info";
    }
}

5.2运行效果

add_student.jsp

awio.jpg

end.png

6.错误

6.1中文乱码

当页面之间信息传递出现中文乱码问题时，可以在拦截器中添加对页面数据编的配置：

在web.xml中添加以下的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!--中文乱码过滤器-->
  <filter>
    <filter-name>encodingFilter</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>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>