设计模式之 —— MVC模式

news2025/10/31 11:30:15

什么是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;
    }

    @Override
    public 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 {

    @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";
    }

}