Spring MVC练习

ops/2024/11/17 13:12:34/

上一篇文章介绍了Spring MVC的注解,这篇文章再来做一些练习来巩固。

html文件要放在static当中

1. 加法器

 

calc.html代码:<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<form action="calc/sum" method="post"><h1>计算器</h1>数字1:<input name="a" type="text"><br>数字2:<input name="b" type="text"><br><input type="submit" value=" 点击相加 ">
</form>
</body>
</html>

 

后端代码的形参名要跟前端html代码中的参数名相同

 

点击相加之后可以正确得到结果

2. 登录 

 login.html代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录页面</title>
</head><body>
<h1>用户登录</h1>
用户名:<input name="userName" type="text" id="userName"><br>
密码:<input name="password" type="password" id="password"><br>
<input type="button" value="登录" onclick="login()"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>function login() {$.ajax({type: "post",url: "/calc/login",data: {"userName": $("#userName").val(),"password": $("#password").val()},success: function (result) {if (result) {location.href = "/index.html"} else {alert("账号或密码有误.");}}});}</script>
</body></html>
这个index.html代码有一些问题,无法正常读取到登录的用户名
由于Java程序猿主要负责后端开发,前端的代码我不太擅长,
哪位大佬如果能看到问题在哪,麻烦指正一下,多谢!!<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户登录首页</title>
</head>
userName
<body>
登录人: <span id="userName"></span><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$.ajax({type: "get",url: "/calc/getLoginUser",success: function (result) {$("#userName").text(result);}});
</script>
</body></html>

下面使用了直接访问路由映射的方式,可以正常响应,说明后端代码是没问题的,问题出在前端代码上。 

 

3. 留言板

引入lombok

java"><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional>
</dependency>

先来看Java程序的运行原理

lombok的原理: 

 

lombok中有一个注解@Data,这个

@Data = @Getter + @Setter + @ToString + @EqualsAndHashCode+@RequiredArgsConstructor + @NoArgsConstructor

    注解   作用
@Getter自动添加getter方法
@Setter自动添加setter方法
@ToString自动添加toString方法
@EqualsAndHashCode自动添加equals和hashCode方法
@NoArgsConstructor自动添加无参构造方法
@AllArgsConstructor

自动添加全属性构造方法,

顺序按照属性的定义顺序

@NonNull属性不能为null
@RequiredArgsConstructor自动添加必需属性的构造方法,final+@NonNull的属性为必须

举例说明一下:

java">@Data
public class Person {public String name;public Integer id;public Integer password;
}使用@Data注解后不需要自己再写getter和setter方法和toString方法,全部自动生成
自动包含下面内容
@Overridepublic String toString() {return "Person{" +"name='" + name + '\'' +", id=" + id +", password=" + password +'}';}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;}public Integer getPassword() {return password;}public void setPassword(Integer password) {this.password = password;}

 下面是留言板的代码

java"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body>
<div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 对 B 说: hello</div> -->
</div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>function submit(){//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}//2. 构造节点var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";//3. 把节点添加到页面上$(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");}</script>
</body></html>

 


http://www.ppmy.cn/ops/134432.html

相关文章

实测运行容器化Nginx服务器

文章目录 前言一、拉取Nginx镜像二、创建挂载目录与文件三、运行容器化Nginx服务器四、访问网页测试 总结 前言 运行容器化Nginx服务器&#xff0c;首先确保正确安装docker&#xff0c;并且已启动运行&#xff0c;具体安装docker方法见笔者前面的博文《OpenEuler 下 Docker 安…

狼蛛F87Pro键盘常用快捷键的使用说明

基础调节 1、FN ESC &#xff1a;恢复默认 2、FN ~ &#xff1a;2.4G对码 3、FN 1 &#xff1a;蓝牙设备1# 4、FN 2 &#xff1a;蓝牙设备2# 5、FN 3 &#xff1a;蓝牙设备3# 6、FN Q &#xff1a;Android系统 7、FN W &#xff1a;Windows系统 8、FN E &#x…

Unity3D空中突袭(飞机大战)(1场景导入)

写在前面的话 除了自己建的模型以及无版权图片&#xff0c;其他我无法分享&#xff0c;请到Unity资源商店下载&#xff0c;链接如下。 用于制作游戏的优质资源 | Unity Asset Storehttps://assetstore.unity.com/zh-CN?localezh-CN本篇博客是简单的场景布置&#xff0c;你可以…

Go语言 HTTP 服务模糊测试教程

写在前面&#xff1a; 此博客内容已经同步到我的博客网站&#xff0c;如需要获得更优的阅读体验请前往https://blog.mainjay.cloudns.ch/blog/go/fuzzing-test 作为开发人员&#xff0c;我们并不总能预见到程序或函数可能接收到的所有可能输入。 即使我们可以定义主要的边界情…

T265相机双目鱼眼+imu联合标定(全记录)

最近工作用到t265&#xff0c;记录一遍标定过程 1.安装驱动 首先安装realsense驱动&#xff0c;因为笔者之前使用过d435i&#xff0c;装的librealsense版本为2.55.1&#xff0c;直接使用t265会出现找不到设备的问题&#xff0c;经查阅发现是因为realsense在2.53.1后就不再支持…

Android - Pixel 6a 手机OS 由 Android 15 降级到 Android 14 操作记录

Pixel 6a 手机由 Android 14 升级到 Android 15了&#xff0c;但是由于一些原因又想降级回 Android 14&#xff0c; 能降吗&#xff1f;该怎么降级呢&#xff1f;本篇文章来记述实际操作过程&#xff0c;希望能给想做相同操作的人一些帮助。 答案当然是能降&#xff0c;而且我…

什么是 Go 语言?

Go 语言&#xff08;也称为 Golang&#xff09;是由 Google 开发的一种开源编程语言。它最初由 Rob Pike、Ken Thompson 和 Robert Griesemer 等人于 2007 年设计&#xff0c;经过两年的研发&#xff0c;于 2009 年首次公开发布。Go 语言的设计目标是提高编程效率&#xff0c;特…

基于语法树的SQL自动改写工具开发系列(2)-使用PYTHON进行简单SQL改写的开发实战

一、前言 前面一篇写了如何搭建环境&#xff0c;本文接着讲怎么使用antlr4进行开发。 二、实战 根据上一篇&#xff0c;基于语法树的SQL自动改写工具开发系列&#xff08;1&#xff09;-离线安装语法树解析工具antlr4-DA-技术分享-M版,先在本地部署好开发环境。 DEMO 1 写…