JavaWeb_19_MVC开发模式

《MVC开发模式》

目录

  • MVC模式(熟练)
  • MVC实现(熟练)

一、MVC模式

经典MVC模式中,M是指业务模型,V是指视图,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。

请添加图片描述

二、MVC实现

库表初始化

-- 选择数据库
use test;

-- 创建表
drop table if exists user;
create table if not exists user(
	user_id int primary key auto_increment comment '账号',
	user_name varchar(20) comment '用户名',
	password varchar(12) comment '密码',
	phone_number char(11) comment '电话号码',
	info varchar(100) comment '个人信息'
) comment '用户表';

-- 初始化数据
insert into user values
(1001,'Alice','123456','18122223333','美丽动人'),
(1002,'Bob','123456','19938209623','帅气逼人'),
(1003,'Clover','123456','19066885344','活泼可爱'),
(1004,'Divid','123456','18023457788','暂无描述'),
(1005,'Elen','123456','10288889999','暂无描述');

项目初始化

  1. pom.xml
<dependencies>
    <dependency>
        <groupId>jstl</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    <dependency>
        <groupId>taglibs</groupId>
        <artifactId>standard</artifactId>
        <version>1.1.2</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.28</version>
    </dependency>
</dependencies>
  1. web.xml
<welcome-file-list>
    <welcome-file>./login.jsp</welcome-file>
</welcome-file-list>
  1. 字符集过滤器(略)

数据层

  1. JdbcUtil工具类;

请添加图片描述

  1. com.hpr.entity下书写对应User实体类(略);
  2. com.hpr.dao.UserDAO;
package com.hpr.dao;

import com.hpr.entity.User;
import com.hpr.util.JdbcUtil;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class UserDAO {

    /**
     * 登录方法
     *
     * @param userId   账号
     * @param password 密码
     * @return 查询到的用户数据
     */
    public User login(int userId, String password) {
        String sql = "select * from user where user_id=? and password=?";
        List<Map<String, Object>> maps = JdbcUtil.executeQuery(sql, userId, password);
        if (maps.size() == 0) {
            return null;
        } else {
            return ormUser(maps.get(0));
        }
    }

    /**
     * 查询所有用户信息
     *
     * @return 结果集
     */
    public List<User> selectAll() {
        String sql = "select * from user";
        List<Map<String, Object>> maps = JdbcUtil.executeQuery(sql);
        List<User> list = new ArrayList<>();
        maps.forEach(map -> list.add(ormUser(map)));
        return list;
    }

    /**
     * 将数据库查询结果集转化为对象集
     *
     * @param map 一条记录
     * @return User对象
     */
    private User ormUser(Map<String, Object> map) {
        User user = new User();
        if (map.get("user_id") != null) {
            user.setUserId((int) map.get("user_id"));
        }
        if (map.get("user_name") != null) {
            user.setUserName((String) map.get("user_name"));
        }
        if (map.get("password") != null) {
            user.setPassword((String) map.get("password"));
        }
        if (map.get("phone_number") != null) {
            user.setPhoneNumber((String) map.get("phone_number"));
        }
        if (map.get("info") != null) {
            user.setInfo((String) map.get("info"));
        }
        return user;
    }
}

视图层

  1. weapp/login.jsp;
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>首页</title>
    <meta charset="utf-8">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <style>
        form {
            width: 600px;
            margin: auto;
            margin-top: 100px;
        }

        form > div {
            margin-top: 20px;
            text-align: center;
        }

        form span {
            display: inline-block;
            width: 20%;
        }

        form input {
            width: 78%;
        }
    </style>
</head>

<body>
<form action="/index.do?action=login" method="post">
    <div>
        <span>账号:</span>
        <input name="userId" type="text">
    </div>
    <div>
        <span>密码:</span>
        <input name="password" type="password">
    </div>
    <div>
        <span></span>
        <input type="submit" value="登录">
    </div>
</form>
</body>

<script>
    var message = "${message}";
    if (message != "") {
        alert(message);
    }
</script>
</html>
  1. webapp/index.jsp;
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>首页</title>
    <meta charset="utf-8">
    <style>
        table {
            margin: 80px auto;
            border: 1px solid black;
        }

        td {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<table>
    <caption>用户信息列表</caption>
    <c:forEach items="${userList}" var="user">
        <tr>
            <td>${user.userId}</td>
            <td>${user.userName}</td>
            <td>${user.phoneNumber}</td>
            <td>${user.info}</td>
        </tr>
    </c:forEach>
</table>
</body>
</html>

逻辑层

  1. IndexServlet
@WebServlet("/index.do")
public class IndexServlet extends HttpServlet {

    private UserDAO userDAO = new UserDAO();

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        String action = request.getParameter("action");
        if (action.equals("login")) {
            String userId = request.getParameter("userId");
            String password = request.getParameter("password");
            User user = userDAO.login(Integer.parseInt(userId), password);
            if (user == null) {
                //登录验证失败,返回登录页并提示
                request.setAttribute("message", "账号或密码有误!");
                request.getRequestDispatcher("./login.jsp").forward(request, response);
            } else {
                //登录验证成功,查询所有用户,跳转至index.jsp
                List<User> list = userDAO.selectAll();
                request.setAttribute("userList", list);
                request.getRequestDispatcher("./index.jsp").forward(request, response);
            }
        }
    }
}

启动测试

  1. 错误账号密码测试

请添加图片描述

执行结果

请添加图片描述

  1. 正确账号密码测试

请添加图片描述

执行结果

请添加图片描述

总结

重点

  1. MVC模式概念;
  2. MVC代码实现。

难点

  1. MVC代码实现。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值