当前位置：首页 > news >正文

设计模式之 —— MVC模式

news 2025/5/1 0:23:30

什么是MVC模式？

MVC 工作流程：

MVC模式（java示例.部分代码）

1、Model

java

2、View

HTML

CSS

3、Controller

java

运行结果：

适用场景：

什么是MVC模式？

MVC模式提供了灵活的架构，方便开发者分离关注点，把应用程序分为三个大的主要组件：

M（Model）模型，V（View）视图，C（Controller）控制器：

Model：管理数据和业务逻辑。

View：显示模型中的数据，提供用户界面。

Controller：接收用户输入，调用模型和视图进行处理。

MVC 工作流程：

1、用户交互：用户通过视图与应用程序进行交互（如点击按钮、填写表单）。
2、请求处理：视图将用户输入转发给控制器。
3、业务逻辑：控制器处理请求，调用模型完成数据处理。
4、数据更新：模型更新后，控制器将数据传递回视图。
5、视图更新：视图根据模型数据更新界面，向用户展示结果。

MVC模式（java示例.部分代码）

博主学Spring框架的，所以我直接拿我的Spring MVC部分代码来做示例了 = . =

这是一个简单的登录功能。

1、Model

java

public class User {private Integer id;private String  username;private String password;private String email;public User() {}public User(Integer id, String username, String password, String email) {this.id = id;this.username = username;this.password = password;this.email = email;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}@Overridepublic String toString() {return "User{" +"id=" + id +", username='" + username + '\'' +", password='" + password + '\'' +", email='" + email + '\'' +'}';}
}

2、View

HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录界面</title><link rel="stylesheet" href="../static/css/login.css"><script src="../static/js/jquery.js"></script><script src="../static/js/jquery.cookie.js"></script><script src="../static/js/login.js" defer></script>
</head><body><div class="contanier"><div class="title">登录</div><input type="text" placeholder="账号" class="account"><input type="password" placeholder="密码" class="password"><input type="button" value="登录" class="btn"><span>没有账号？<a href="register.action">去注册</a> | <a href="forget.action">忘记密码</a></span></div>
</body></html>

CSS

* {padding: 0;margin: 0;
}body {height: 100vh;background: linear-gradient(30deg, rgb(47, 64, 85), rgb(93, 129, 172));display: flex;align-items: center;justify-content: center;
}.contanier {height: 350px;width: 300px;background: #fff;border-radius: 15px;display: flex;flex-direction: column;padding: 20px;
}.title {font-size: 40px;text-align: center;font-family: aaa;font-weight: 600;color: rgb(170, 170, 221);text-shadow: 1px 1px 2px rgb(47, 64, 85);margin-bottom: 30px;
}.account,
.confirm_password,
.password,
.email,
.confirm_password {margin: 20px 0;border: none;border-bottom: 1px solid #000;outline: none;padding: 5px;
}.btn,.btn2,.btn3 {margin-top: 80px;cursor: pointer;border: none;background: linear-gradient(90deg, rgb(47, 64, 85), rgb(93, 129, 172));padding: 5px;border-radius: 10px;color: #fff;
}span {font-size: 13px;margin-top: 10px;text-align: center;
}span a {text-decoration: none;
}.btn:hover,.btn2:hover,.btn3:hover
{background: linear-gradient(270deg, rgb(47, 64, 85), rgb(93, 129, 172));
}@font-face {font-family: "aaa";src: url("../font/HuXiaoBoSaoBaoTi-2.otf");
}

JS

$(".btn").on("click",function(){var account = $(".account").val()var password = $(".password").val()if(account=="" || password==""){alert('账号或密码不能为空！')return false;}$.ajax({url:"login.action",type:"post",data:{account,password},success:function(value){if(value>0){alert('登陆成功')location.href="index"$.cookie("account",account)}else{alert('登录失败')}}})
})

3、Controller

java

@Controller
public class UserController {@Autowiredprivate UserService userService;//登录@RequestMapping(value="login.action",method= RequestMethod.POST)@ResponseBodypublic int login(String account, String password, Model model, HttpSession session) {System.out.println("account " +account + ",password "+ password);User user = userService.findUser(account,password);int result=0;if(user != null){result++;session.setAttribute("User_SESSION",user);}System.out.println("result " +result);return result;}//向登录页面跳转@GetMapping("/login.action")public String toLogin() {return "login";}}