Spring Web MVC 快速入门

  • 🎥 个人主页:Dikz12
  • 🔥个人专栏:Spring学习之路
  • 📕格言:吾愚多不敏,而愿加学
  • 欢迎大家👍点赞✍评论⭐收藏

目录

什么是Spring MVC? 

MVC模式介绍 

​编辑学习Spring MVC

建立连接 

@RequestMapping 使⽤

​编辑实战练习 

加法计算器

用户登录 

接口定义


什么是Spring MVC? 

 官方描述:

来自:Spring Web MVC :: Spring Framework 

 翻译为中文:

Spring Web MVC是基于Servlet API构建的原始Web框架,从一开始就包含在Spring框架中。正式名称“Spring Web MVC”来自其源模块的名称( spring-webmvc ),但它更常被称“Spring MVC”。

MVC 是⼀种架构设计模式, 也⼀种思想, ⽽ Spring MVC 是对 MVC 思想的具体实现. 除此之外, Spring MVC还是⼀个Web框架.
所以,, Spring MVC 是⼀个实现了 MVC 模式的 Web 框架.

MVC模式介绍 

MVC 是 Model View Controller 的缩写,它是软件⼯程中的⼀种软件架构设计模式,它把软件系统分 为 模型、视图和控制器 三个基本部分.
  •  View(视图)指在应⽤程序中专⻔⽤来与浏览器进⾏交互,展⽰数据的资源.
  •  Model(模型)是应⽤程序的主体部分,⽤来处理程序中数据逻辑的部分.
  • Controller(控制器)可以理解为⼀个分发器,⽤来决定对于视图发来的请求,需要⽤哪⼀个模型来处理,以及处理完后需要跳回到哪⼀个视图。即⽤来连接视图和模型.

 不过Spring在实现MVC时,也结合⾃⾝项⽬的特点,做了⼀些改变,相对⽽⾔,下⾯这个图或许更加合适.(前后端分离)

学习Spring MVC

学习SpringMVC,重点也就是学习如何通过浏览器和⽤⼾程序进⾏交互.

主要分以下三个⽅⾯:

  1. 建⽴连接:将⽤⼾(浏览器)和Java程序连接起来,也就是访问⼀个地址能够调⽤到我们的Spring程序。
  2. 请求:  ⽤⼾请求的时候会带⼀些参数,在程序中要想办法获取到参数,所以请求这块主要是获取参数的功能.
  3. 响应:  执⾏了业务逻辑之后,要把程序执⾏的结果返回给⽤⼾,也就是响应.

⽐如⽤⼾去银⾏存款:

  1. 建⽴连接:去柜台
  2. 请求:带着银⾏卡,⾝份证去存款
  3. 响应:银⾏返回⼀张存折.

对于Spring MVC来说,掌握了以上3个功能就相当于掌握了Spring MVC.

建立连接 

在Spring MVC中使⽤ @RequestMapping 来实现 URL路由映射,也就是浏览器连接程序的作⽤.
 创建⼀个UserController类,实现⽤⼾通过浏览器和程序的交互,具体实现代码如下:

@RestController
public class UserController {@RequestMapping("/hello")public String test() {return "hello,spring mvc";}
}

 浏览器查看:127.0.0.1:8080/hello  ,就可以看到程序返回的数据了.

 

@RequestMapping 使⽤

@RequestMapping 是Spring Web MVC 应⽤程序中最常被⽤到的注解之⼀,它是⽤来注册接⼝的路由映射的.

@RequestMapping 即可修饰类,也可以修饰⽅法,当修饰类和⽅法时,访问的地址是类路径 + ⽅法路径.

@RestController
@RequestMapping("/user")
public class UserController {@RequestMapping("/hello")public String test() {return "hello,spring mvc";}
}

访问地址: 127.0.0.1:8080/user/hello


实战练习 

加法计算器

需求:输⼊两个整数,点击"点击相加"按钮,显⽰计算结果.

前端代码准备: 

<!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="num1" type="text"><br>数字2:<input name="num2" type="text"><br><input type="submit" value=" 点击相加 "></form>
</body>
</html>

 接口定义:

请求路径:calc/sum
请求⽅式:GET / POST
接⼝描述:计算两个整数相加

响应内容:计算器计算结果:18

请求参数 :

参数名类型是否必须备注
num1Integer参与计算的第⼀个数
num2Integer参与计算的第⼆个数

实例:num1 = 12 && num2 = 6

 后端实现:

@RestController
@RequestMapping("/calc")
public class CalcController {@RequestMapping("/sum")public String calc(Integer num1,Integer num2) {Integer sum = num1 + num2;return "<h1>计算机计算结果: "+sum+"</h1>";}
}

用户登录 

 需求: ⽤⼾输⼊账号和密码,后端进⾏校验密码是否正确.

  1. 如果不正确,前端进⾏⽤⼾告知
  2.  如果正确,跳转到⾸⻚. ⾸⻚显⽰当前登录⽤⼾
  3. 后续再访问⾸⻚,可以获取到登录⽤⼾信息

接口定义

1.校验接口

 接口定义:

请求路径:/user/login
请求⽅式:POST
接⼝描述:校验账号密码是否正确

请求参数:

参数名类型是否必须备注
userNameString校验的账号
passwordString校验的密码

响应数据:

Content-Type: text/html
响应内容:

    true // 账号密码验证成功

    false  //账号或密码错误

2.查询登录用户接口

接口定义:

请求路径:/user/getLoginUser
请求⽅式:GET
接⼝描述:查询当前登录的⽤⼾

响应数据:

 Content-Type: text/html


响应内容:
     用户名   // zhangsan

前端实现:

1.登录界面.

<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({url: "/user/login",type : "post",data: {"userName": $("#userName").val(),"password": $("#password").val()},success:function(result) {if(result) {location.href = "/index.html";//location.assign();}else{alert("密码错误");}}});}</script>
</body>

2.登录成功界面.

<body>登录人: <span id="loginUser"></span><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>$.ajax({url : "user/getLoginUser",type : "get",success : function(result) {console.log("测试");$("#loginUser").text(result);}});</script></body>

后端实现:

@RestController
@RequestMapping("/user")
public class loginController {@RequestMapping("/login")public boolean login(String userName, String password, HttpSession session){//账号密码为空 hasLength() 为null ,返回falseif (!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {return false;}//校验密码是否正确 (正常情况下是要走下数据库,这里就简单实现了)if (!userName.equals("zhangsan") || !password.equals("123456")) {return false;}System.out.println(password);//密码验证成功,把用户存到session中】session.setAttribute("userName",userName);return true;}@RequestMapping("/getLoginUser")public String getLoginUser(HttpSession session) {//从session会话中直接拿String userName = (String) session.getAttribute("userName");if (StringUtils.hasLength(userName)) {return userName;}return "";}
}

测试效果:

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

导电材料——分类、性能与性质

本篇为西安交通大学本科课程《电气材料基础》的笔记。 导电材料指的是能在电场下传导电流的材料。导体价电子所在能带为半满带&#xff0c;且相邻能级间隔小&#xff0c;外电场下电子很容易从低能级跃迁到高能级上&#xff0c;大量的电子很容易获得能量进行共有化运动&#xf…

i春秋-Backdoor

题目 考点 git源码泄露 Linux文件恢复 代码审计 http 解题 参考wp https://blog.csdn.net/cbhjerry/article/details/105791056https://www.pianshen.com/article/19461342501/扫描 题目给出提示&#xff1a;敏感文件泄漏 于是使用dirsearch扫一下 python dirsearch.py -…

docker部署springboot+Vue项目

项目介绍&#xff1a;后台springboot项目&#xff0c;该项目环境mysql、redis 。前台Vue&#xff1a;使用nginx反向代理 方法一&#xff1a;docker run 手动逐个启动容器 1.docker配置nginx代理 将vue项目打包上传到服务器上。创建文件夹存储数据卷&#xff0c;html存放打包…

机器学习周报第41周

目录 摘要Abstract一、文献阅读1.1 摘要1.2 背景1.3 论文方法1.3.1 局部特征提取1.3.2 局部特征转换器 (LoFTR) 模块1.3.4 建立粗粒度匹配1.3.5 精细匹配 1.4 损失1.5 实现细节1.6 实验1.6.1 单应性估计1.6.2 相对位姿估计 二、论文代码总结 摘要 本周阅读了一篇特征匹配领域的…

前端开发工程师——ajax

express框架 终端输入 npm init --yes npm i express 请求报文/响应报文 // 1.引入express const express require(express);// 2.创建应用对象 const app express();// 3.创建路由规则 // request:是对请求报文的封装 // response&#xff1a;是对响应报文的封装 app.get(…

创新指南 | 生成式AI如何引领企业创新未来?

2023年麦肯锡全球数字战略调查了1000多名受访者&#xff0c;发现&#xff1a;建立创新文化的组织与它们应用包括生成式AI在内的最新数字技术提高产出的能力之间有着惊人的强关联。 本文探讨了顶尖创新企业采取的五项行动&#xff0c;使它们与同行之间拉开距离&#xff0c;并在使…

论文 学习 Transformer : Attention Is All You Need

目录 概述&#xff1a; 对摘要的理解&#xff1a; 框架解析 按比例缩放的点积注意力 多头注意力机制 前馈神经网络与位置编码 概述&#xff1a; transformer 是一个encoder ——decoder 结构的用于处理序列到序列转换任务的框架&#xff0c;是第一个完全依赖自注意力机制…

PC端与bluetooth蓝牙虚拟串口通信

应该采用RFCOMM虚拟串口方式来进行通信&#xff0c;原理跟socket通信类似&#xff0c;不同的是使用的通信协议不同&#xff0c;本人结合相关的API&#xff0c;做了以下最简单的封装。 1、获取本地蓝牙设备与附近蓝牙设备信息 2、通信类 /* 通信类&#xff1a;只是对于客户端通…

心理应用工具包 psychtoolbox 绘制小球走迷宫

psychtoolbox 是 MATLAB 中的一个工具包&#xff0c;对于科研人员设计实验范式来说是不二之选&#xff0c;因为它可以操作计算机的底层硬件&#xff0c;精度可以达到帧的级别。 文章目录 一、实验目的二、psychtoolbox 的下载安装三、Psychtoolbox 的基本使用四、完整代码 一、…

im(即时通讯)是什么?

在当今数字化时代&#xff0c;即时通讯&#xff08;IM&#xff09;已经成为企业内部沟通与协作中不可或缺的工具。作为一种实时的即时通讯方式&#xff0c;IM能够极大提高团队成员之间的沟通效率&#xff0c;帮助企业快速响应变化&#xff0c;并增强内部协作与创新能力。 Work…

【Java】/*逻辑控制语句和输入输出—快速总结*/

目录 前言 一、分支语句 1.1 if 语句 1.2 switch 语句 二、循环语句 2.1 while 循环 2.1.1 break 2.1.2 continue 2.2 for 循环 2.3 do_while 循环 三、逻辑语句的小结 四、Java 中的输入输出 4.1 输出到控制台 4.2 从键盘输入 前言 Java 中的逻辑控制语句和C语…

如何通过AI技术实现员工培训的革命性变革

AI个性化培训&#xff1a;开启员工潜力的新篇章 在当今这个信息爆炸的时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的影响力已经渗透到社会的各个层面&#xff0c;包括教育与培训行业。AI技术正在彻底改变我们获取知识与技能的方式&#xff0c;特别是在员工培训领域…