Java配置方式使用Spring MVC：实战练习

news2024/11/29 14:30:52

文章目录

  • 续写
  • 任务1、创建登录页面、登录成功与登录失败页面
    • 1、创建登录页面
    • 2、创建登录成功页面
    • 3、创建登录失败页面
  • 任务2、首页添加登录链接，单击可跳转到登录页面
    • 1、 修改首页，添加超链接
    • 2、修改Spring MVC配置类，定义视图控制器
    • 3、创建登录控制器
    • 4、启动服务器，查看效果
  • 任务3、添加静态资源，让Spring MVC正确处理
    • 1、准备图片素材
    • 2、创建登录样式文件
    • 3、创建脚本文件
    • 4、修改Spring MVC配置类，添加静态资源映射
    • 5、修改首页
    • 6、修改登录页面
    • 7、启动服务器，查看效果

续写

承接上文《Java配置方式使用Spring MVC》

任务1、创建登录页面、登录成功与登录失败页面

1、创建登录页面

登录页面 - login.jsp
在这里插入图片描述

注：这个页面没有JSP代码，其实可以做成静态页面 - login.html

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>用户登录</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
        <script src="js/check.js" type="text/javascript"></script>
    </head>
    <body>
        <h3 style="text-align: center">用户登录</h3>
        <form id="frmLogin" action="login" method="post">
            <table class="tb" border="1" cellpadding="10" style="margin: 0px auto">
                <tr>
                    <td align="center">账号</td>
                    <td><input id="username" type="text" name="username"/></td>
                </tr>
                <tr>
                    <td align="center">密码</td>
                    <td><input id="password" type="password" name="password"/></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit" value="登录"/>
                        <input type="reset" value="重置"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

2、创建登录成功页面

登录成功页面 - success.jsp（必须是动态页面，因为要获取会话对象中的数据）
在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>登录成功</title>
    </head>
    <body>
        <h1 style="text-align: center">${username}，登录成功！</h1>
    </body>
</html>

如果不用JSP的标签库，要获取会话中的数据，要复杂一点

<h1 style="text-align: center">${username}，登录成功！</h1>
<h1 style="text-align: center"><%= request.getSession().getAttribute("username")%>，登录成功！</h1>

3、创建登录失败页面

登录失败页面 - failure.jsp（必须是动态页面，因为要获取会话对象中的数据）

在这里插入图片描述

任务2、首页添加登录链接，单击可跳转到登录页面

1、 修改首页，添加超链接

首页 - index.jsp
在这里插入图片描述

<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>首页</title>
    </head>
    <body style="text-align: center">
        <h1>Welcome to Spring MVC World~</h1>
        <h3><%= new Date() %></h3> <!--JSP表达式元素-->
        <a href="toLogin">跳转到登录页面</a>
    </body>
</html>

说明：超链接的href属性值不能直接写页面文件名login.jsp，没有经过Spring MVC的处理，访问不了的

2、修改Spring MVC配置类，定义视图控制器

对应的就是spring-mvc-config里的 <mvc:view-controller path="/toLogin" view-name="login" />
在这里插入图片描述

注意：SpringMvcConfig类必须要实现WebMvcConfigurer接口

package net.army.spring.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import org.springframework.web.servlet.view.JstlView;

/**
 * 作者：梁辰兴
 * 日期：2023/5/11
 * 功能：Spring MVC配置类
 */
@Configuration // 表明当前类是配置类
@EnableWebMvc  // 启用Web MVC功能
@ComponentScan("net.army.spring") // 组件扫描
public class SpringMvcConfig implements WebMvcConfigurer{
    // 定义内部资源视图解析器
    @Bean
    public InternalResourceViewResolver viewResolver() {
        // 创建内部资源视图解析器对象
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        // 设置内部资源视图解析器对象属性
        viewResolver.setViewClass(JstlView.class); // 设置视图类
        viewResolver.setPrefix("/WEB-INF/classes/templates/"); // 设置前缀
        viewResolver.setSuffix(".jsp"); // 设置后缀
        // 返回内部资源视图解析器对象
        return viewResolver;
    }
    // 添加视图控制器，实现纯粹的页面跳转
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // addViewController的参数是请求路径，setViewName的参数是逻辑视图名
        registry.addViewController("/toLogin").setViewName("login");
    }
}

注意：首页中超链接的href属性值toLogin不能加/，因为加了之后，访问的就不是http://localhost:8080/SpringMvcDemo02/toLogin而是http://localhost:8080/toLogin，这样就会报404错误；但是在Spring MVC配置类添加视图控制器，addViewController的参数/toLogin，必须加/，否则也会跳转不了。

3、创建登录控制器

在net.army.spring.controller包里创建LoginController类
在这里插入图片描述

package net.army.spring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.servlet.http.HttpSession;

/**
 * 作者：梁辰兴
 * 日期：2023/5/11
 * 功能：登录控制器
 */
@Controller
public class LoginController {
    @PostMapping("/login")  // 必须加“/”
    public String login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        HttpSession session) {
        // 将登录用户名写入会话对象
        session.setAttribute("username", username);
        // 直接判断用户是否登录成功
        if (username.equals("army") && password.equals("123456")) {
            // 通过逻辑视图名`success`跳转到成功页面
            return "success";
        } else {
            // 通过逻辑视图名`failure`跳转到失败页面
            return "failure";
        }
    }
}

如果session.setAttribute(“username”, username);代码里的属性名改成uname，那么登录成功和失败页面的代码里就要用${uname}来显示用户名。

4、启动服务器，查看效果

启动服务器，显示首页
在这里插入图片描述
单击【跳转到登录页面】超链接
在这里插入图片描述
输入错误的用户民或密码
在这里插入图片描述

单击【登录】按钮
在这里插入图片描述

从登录表单提交的数据，中文就是乱码了，怎么办呢？

修改代码
在这里插入图片描述

package net.army.spring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.servlet.http.HttpSession;

/**
 * 作者：梁辰兴
 * 日期：2023/5/11
 * 功能：登录控制器
 */
@Controller
public class LoginController {
    @PostMapping("/login")  // 必须加“/”
    public String login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        HttpSession session) throws Exception{
        // 对用户名编码，避免乱码
        String uname = new String(username.getBytes("ISO-8859-1"), "utf-8");
        // 将登录用户名写入会话对象
        session.setAttribute("username", uname);
        // 直接判断用户是否登录成功
        if (uname.equals("梁辰兴") && password.equals("123456")) {
            // 通过逻辑视图名`success`跳转到成功页面
            return "success";
        } else {
            // 通过逻辑视图名`failure`跳转到失败页面
            return "failure";
        }
    }
}

启动服务器，跳转到登录页面，输入正确的用户名和密码
在这里插入图片描述
单击【登录】按钮
在这里插入图片描述

任务3、添加静态资源，让Spring MVC正确处理

在resources里创建static目录，在static里创建images、css和js目录
在这里插入图片描述

1、准备图片素材

在images目录里添加一张图片 - bear.png
在这里插入图片描述

2、创建登录样式文件

登录样式文件 - login.css
在这里插入图片描述

代码：

/* 登录页面样式 */
body {
    margin: 0px;
    text-align: center;
    background: cornsilk;
}

3、创建脚本文件

脚本文件 - check.js
在这里插入图片描述

代码：

/**
 * 检验登录表单
 * 
 * @returns {Boolean}
 */
function checkLoginForm() {	
	// 获取用户名文本框
	var username = document.getElementById("username");
	// 获取密码文本框
	var password = document.getElementById("password");
	// 非空校验
	if (username.value == "") {
		alert("用户名不能为空！");
		// 让用户名文本框获得焦点
		username.focus();
		return false;
	}
	if (password.value == "") {
		alert("密码不能为空！");
		// 让密码文本框获得焦点
		password.focus();
		return false;
	}	
		
	return true; // 表明可以提交数据到服务器端
}

4、修改Spring MVC配置类，添加静态资源映射

Spring MVC配置类 - SpringMvcConfig
在这里插入图片描述

package net.army.spring.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
import org.springframework.web.servlet.view.JstlView;

/**
 * 作者：梁辰兴
 * 日期：2023/5/11
 * 功能：Spring MVC配置类
 */
@Configuration // 表明当前类是配置类
@EnableWebMvc  // 启用Web MVC功能
@ComponentScan("net.army.spring") // 组件扫描
public class SpringMvcConfig implements WebMvcConfigurer{
    // 定义内部资源视图解析器
    @Bean
    public InternalResourceViewResolver viewResolver() {
        // 创建内部资源视图解析器对象
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        // 设置内部资源视图解析器对象属性
        viewResolver.setViewClass(JstlView.class); // 设置视图类
        viewResolver.setPrefix("/WEB-INF/classes/templates/"); // 设置前缀
        viewResolver.setSuffix(".jsp"); // 设置后缀
        // 返回内部资源视图解析器对象
        return viewResolver;
    }
    // 添加视图控制器，实现纯粹的页面跳转
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // addViewController的参数是请求路径，setViewName的参数是逻辑视图名
        registry.addViewController("/toLogin").setViewName("login");
    }
    // 添加资源处理器，实现静态资源的映射
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 处理图片静态资源（第一个参数是虚拟路径，第二个参数是物理路径）
        registry.addResourceHandler("/images/**")
                .addResourceLocations("classpath:/static/images/");
        // 处理样式静态资源（第一个参数是虚拟路径，第二个参数是物理路径）
        registry.addResourceHandler("/css/**")
                .addResourceLocations("classpath:/static/css/");
        // 处理脚本静态资源（第一个参数是虚拟路径，第二个参数是物理路径）
        registry.addResourceHandler("/js/**")
                .addResourceLocations("classpath:/static/js/");
    }
}

5、修改首页

添加图片元素
在这里插入图片描述

index.jsp

<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
</head>
<body style="text-align: center">
<h1>Welcome to Spring MVC World~</h1>
<h3><%= new Date() %></h3> <!--JSP表达式元素-->
<a href="toLogin">跳转到登录页面</a><br>
<img src="images/bear.jpg" width="300" height="250">
</body>
</html>

6、修改登录页面

导入脚本与样式，登录按钮绑定单击事件处理方法
login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <script src="js/check.js" type="text/javascript"></script>
    <link href="css/login.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3 style="text-align: center">用户登录</h3>
<form id="frmLogin" action="login" method="post">
    <table class="tb" border="1" cellpadding="10" style="margin: 0px auto">
        <tr>
            <td align="center">账号</td>
            <td><input id="username" type="text" name="username"/></td>
        </tr>
        <tr>
            <td align="center">密码</td>
            <td><input id="password" type="password" name="password"/></td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <input type="submit" value="登录" onclick="return checkLoginForm()"/>
                <input type="reset" value="重置"/>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

7、启动服务器，查看效果

启动服务器，显示首页，图片能正常显示
在这里插入图片描述
单击链接，跳转登录界面
在这里插入图片描述
输入正确账号和密码，进行登录
在这里插入图片描述

单击登录按钮
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/532713.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spark - 创建 _SUCCESS 文件与获取最新可用文件

Spark - 创建 _SUCCESS 文件与获取最新可用文件

目录 一.引言 二.增加 _SUCCESS 标识 1.SparkContext 生成 2.FileSystem 生成 3.Hadoop 生成 三.获取最新文件 1.获取 SparkContext 2.按照时间排序 3.遍历生成 Input 四.总结 一.引言 有任务需要每小时生成多个 split 文件分片&#xff0c;为了保证线上任务读取最新…
阅读更多...
Linux实操篇---常用的基本命令5（进程管理类和crontab系统定时任务）

Linux实操篇---常用的基本命令5（进程管理类和crontab系统定时任务）

一、进程管理类 进程是正在执行的一个程序或命令&#xff0c;每一个进程都是一个运行的实体&#xff0c;都有自己的地址空间&#xff0c;并占用一定的系统资源。 守护进程和系统服务就是一一对应的关系。 有系统级别的进程和用户级别的进程。 进程管理&#xff1a;所有的进…
阅读更多...
如何使用自定义知识库构建自定义ChatGPT机器人

如何使用自定义知识库构建自定义ChatGPT机器人

目录 隐藏 使用自定义数据源为您的 ChatGPT 机器人提供数据 1. 通过Prompt提示工程提供数据 2. 使用 LlamaIndex&#xff08;GPT 索引&#xff09;扩展 ChatGPT 如何添加自定义数据源 先决条件 怎么运行的 最后的总结 使用自定义数据源为您的 ChatGPT 机器人提供数据…
阅读更多...
rt-thread启动流程

rt-thread启动流程

资料下载 RT-Thread Simulator 例程 操作流程 将上面的仿真例程下载并解压&#xff0c;通过MDK打开&#xff0c;编译&#xff0c;调试&#xff0c;并打开串口点击运行&#xff0c;就可以看到如下输出了&#xff1a; 添加自己的 thread&#xff1a;在main()函数中添加即可&am…
阅读更多...
[Java基础]基本概念(上)(标识符,关键字,基本数据类型)

[Java基础]基本概念(上)(标识符,关键字,基本数据类型)

hello 大家好&#xff0c;计算机语言各有不同&#xff0c;但本质上都是操作内存和计算。这章的内容是介绍Java中的基本概念展开&#xff0c;包括&#xff1a;标识符&#xff0c;关键字&#xff0c;Java基本数据类型&#xff0c;运算符&#xff0c;表达式和语句&#xff0c;分支…
阅读更多...
前端架构师-week6-require源码解析

前端架构师-week6-require源码解析

require 源码解析——彻底搞懂 npm 模块加载原理 require 的使用场景 加载模块类型 加载内置模块&#xff1a;require(fs)加载 node_modules 模块&#xff1a;require(ejs)加载本地模块&#xff1a;require(./utils)支持文件类型 加载 .js 文件加载 .mjs 文件加载 .json 文件…
阅读更多...
AI女友同时和1000人谈恋爱，狂赚500万

AI女友同时和1000人谈恋爱，狂赚500万

AI女友&#xff0c;预计暴赚4亿 要说当下什么最火&#xff0c;AI首当其冲无可置疑。00后网络红人红卡琳玛乔丽&#xff08;Caryn Marjorie&#xff09;最近与Forever Voices公司合作&#xff0c;通过视频训练等方式打造出个人形象、声音和性格的AI虚拟女友&#xff0c;就像在和…
阅读更多...
Redis高可用--持久化

Redis高可用--持久化

在Web服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准实在多长时间内可以提供正常服务&#xff08;99.9%、99.99%、99.999%等等&#xff09;。 但是在Redis语境中&#xff0c;高可用的含义似乎要宽泛一些&#xff0c;除了保证提提供正常服务&a…
阅读更多...
大疆无人机 MobileSDK（遥控器/手机端）开发 v4版＜3＞

大疆无人机 MobileSDK（遥控器/手机端）开发 v4版＜3＞

导读 第三篇文章准备单独拿出来写，因为在大疆为人机的所有功能中，航线规划的功能最为复杂，也相当的繁琐，这里需要说仔细一点，可能会将代码进行多步分解。 航线规划 1）航线打点 点击 按钮进行打点，在地图中手动选择点位选择完成后点击**[完成]**按钮，即可完成航线打点…
阅读更多...
新展预告 | YT U LOVE——许峰个展即将亮相！

新展预告 | YT U LOVE——许峰个展即将亮相！

深圳东方美术馆荣幸地宣布&#xff0c;将于5月20日呈现艺术家许峰在鹏城的首次个展“YT U LOVE”&#xff0c;展出艺术家从2020年至2023年创作的油画、纸本及雕塑40余件作品。此次展览以“YT U LOVE”为题&#xff0c;恰逢兔年&#xff0c;yutu在中国意指玉兔&#xff0c;前后两…
阅读更多...
美创科技首家互联网医院数据安全建设案例实践

美创科技首家互联网医院数据安全建设案例实践

互联网医院作为医疗服务模式创新发展的新产物&#xff0c;在各项配套政策支持下快速发展。然而&#xff0c;蓬勃之势下&#xff0c;无数双“暗夜之手”也在蠢蠢欲动&#xff0c;试图从中渔利&#xff0c;关乎患者隐私、种类繁多的医疗数据迎来愈加严峻的安全挑战。 某市中心医院…
阅读更多...
劳有所学|文献可视化分析工具CiteSpace、vosviewer使用指南

劳有所学|文献可视化分析工具CiteSpace、vosviewer使用指南

【基于Citespace和vosviewer文献计量学相关论文 】 专题一&#xff1a;文献计量学方法与应用 1 文献计量学方法基本介绍 2 与其他综述方法区别联系 3 各学科领域应用趋势近况 4 主流分析软件优缺点对比 5 经典高分10SCI思路复盘 6 软件安装与Java环境配置 专题二&#…
阅读更多...
理解PMP的顺序

理解PMP的顺序

PMP&#xff0c;大量考的是“下一步”、“本应该”的顺序逻辑。在学习的时候&#xff0c;我们需要把整本书十个知识领域&#xff0c;穿起来形成一个线性的结构。 在整理的过程中&#xff0c;很多人都会认为&#xff0c;线性结构&#xff0c;应该是这样的&#xff1a; 每个过程…
阅读更多...
安卓播放H264/H265实时流(安卓实时预览H264/H265 安卓实时预览AVC/HEVC)

安卓播放H264/H265实时流(安卓实时预览H264/H265 安卓实时预览AVC/HEVC)

实际项目中经常遇到两种场景&#xff0c;第一种从无人机拿H264/H265码流转GB28181等协议&#xff0c;转协议的同时可能还需要实时预览无人机画面; 第二种是安卓接USB外置摄像头, 由于USB2.0传输带宽有限&#xff0c;对于高分辨率图像, 带宽无法满足YUV图像的传输, 摄像头只好先…
阅读更多...
数据的比较

数据的比较

前言 在学习Java过程中&#xff0c;数据的比较是必学的。 对于不同的数据有不同的比较方式。 目录 前言 一、算术比较器 二、equals() 三、Comparable接口 四、Comparator接口 结语 一、算术比较器 算数比较器有&#xff1a;、>、<、>、<、! 但是算数比较器…
阅读更多...
win下C++部署深度学习模型之clion配置pytorch+opencv教程记录

win下C++部署深度学习模型之clion配置pytorch+opencv教程记录

win下clion配置pytorch和OpenCV 一、clion配置vs编译器以及测试二、clion配置pytorch2.1、下载libtorch2. 2、环境变量配置2.3、cmakelist.txt编写2.4、main函数测试运行 三、clion配置opencv3.1、源码下载3.2、编译3.3、环境变量配置3.4、cmakelist.txt编写3.5 main函数测试运…
阅读更多...
揭 秘~月薪2-3万的程序员一天到底是怎么度过的？

揭 秘~月薪2-3万的程序员一天到底是怎么度过的？

程序员的高薪资&#xff0c;一直是大家热衷讨论的话题&#xff0c;几乎每隔一段时间就会在社交平台被网友们热议一番。 比如这条“月薪2万到3万的程序员的一天是怎么样度过的&#xff1f;”的帖子就一直排在知乎前列。 作为薪资可观的岗位&#xff0c;大家都非常好奇&#xff…
阅读更多...
【Fiddler移动端抓包】~抓包不是偷窥，Fiddler教你看透移动应用背后的秘密~

【Fiddler移动端抓包】~抓包不是偷窥，Fiddler教你看透移动应用背后的秘密~

目录 引言 抓包 什么是抓包 哪些场景下需要抓包 Fiddler Fiddler抓包原理 安装 Fiddler移动端抓包 第一步&#xff1a;允许远程计算机连接 第二步&#xff0c;设置手机网络代理 第三步&#xff0c;允许捕获HTTPS连接 第四步&#xff0c;手机安装证书 结语 引言 当…
阅读更多...
探寻生机 | 数说故事助力微播易第七届风向大会，研判新风向，洞察新趋势

探寻生机 | 数说故事助力微播易第七届风向大会，研判新风向，洞察新趋势

“过去一年&#xff0c;有的人用ChatGPT谁出具的北京烤鸭图片最准确搞怪&#xff0c;有的人却已经利用虚拟主播单场带货百万&#xff1b;有的人正在被AIGC淘汰&#xff0c;有的人却通过人机协作实现20秒制作100张创意图&#xff1b;有的百万粉丝接不到广告&#xff0c;有的仅靠…
阅读更多...
使用python实现微博评论分词与关键词提取（从MySQL数据库中读取数据）

使用python实现微博评论分词与关键词提取（从MySQL数据库中读取数据）

一、实验环境 &#xff08;1&#xff09;Windows 操作系统&#xff1b; &#xff08;2&#xff09;PyCharm 2019.1。 &#xff08;3&#xff09;数据库用户名为 root&#xff0c;密码为 123456. (4) 学校机房电脑&#xff0c;带有mysql 二、获取数据库信息 &#xff08;1&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023