目录
什么是Spring MVC?
MVC模式介绍
编辑学习Spring MVC
建立连接
@RequestMapping 使⽤
编辑实战练习
加法计算器
用户登录
接口定义
官方描述:
来自: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 框架.
不过Spring在实现MVC时,也结合⾃⾝项⽬的特点,做了⼀些改变,相对⽽⾔,下⾯这个图或许更加合适.(前后端分离)
学习SpringMVC,重点也就是学习如何通过浏览器和⽤⼾程序进⾏交互.
主要分以下三个⽅⾯:
⽐如⽤⼾去银⾏存款:
对于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 是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
需求:输⼊两个整数,点击"点击相加"按钮,显⽰计算结果.
前端代码准备:
Document
接口定义:
请求路径:calc/sum
请求⽅式:GET / POST
接⼝描述:计算两个整数相加响应内容:计算器计算结果:18
请求参数 :
参数名 | 类型 | 是否必须 | 备注 |
num1 | Integer | 是 | 参与计算的第⼀个数 |
num2 | Integer | 是 | 参与计算的第⼆个数 |
实例:num1 = 12 && num2 = 6
后端实现:
@RestController @RequestMapping("/calc") public class CalcController { @RequestMapping("/sum") public String calc(Integer num1,Integer num2) { Integer sum = num1 + num2; return "计算机计算结果: "+sum+"
"; } }
需求: ⽤⼾输⼊账号和密码,后端进⾏校验密码是否正确.
1.校验接口
接口定义:
请求路径:/user/login
请求⽅式:POST
接⼝描述:校验账号密码是否正确
请求参数:
参数名 | 类型 | 是否必须 | 备注 |
userName | String | 是 | 校验的账号 |
password | String | 是 | 校验的密码 |
响应数据:
Content-Type: text/html
响应内容:true // 账号密码验证成功
false //账号或密码错误
2.查询登录用户接口
接口定义:
请求路径:/user/getLoginUser
请求⽅式:GET
接⼝描述:查询当前登录的⽤⼾
响应数据:
Content-Type: text/html
响应内容:
用户名 // zhangsan
前端实现:
1.登录界面.
用户登录
用户名:
密码:
2.登录成功界面.
登录人:
后端实现:
@RestController @RequestMapping("/user") public class loginController { @RequestMapping("/login") public boolean login(String userName, String password, HttpSession session){ //账号密码为空 hasLength() 为null ,返回false if (!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 ""; } }
测试效果:
上一篇:前端Chrome调试技巧最全汇总