目录
什么是MVC模式？
MVC 工作流程：
MVC模式（java示例.部分代码）
1、Model
java
2、View
HTML
CSS
JS
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;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
", email='" + email + '\'' +
'}';
}
}
2、View
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 {
@Autowired
private UserService userService;
//登录
@RequestMapping(value="login.action",method= RequestMethod.POST)
@ResponseBody
public 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";
}
}
运行结果：
适用场景：
适用于应用程序的分层开发：开发大型应用程序，需要清晰分离数据、业务逻辑和用户界面时，考虑使用MVC模式。要保证模型、视图、控制器交互清晰。