使用MVC模式设计用户验证码登陆界面

最新推荐文章于 2024-05-31 18:48:10 发布

a1422346935

最新推荐文章于 2024-05-31 18:48:10 发布

阅读量2.3k

点赞数 6

文章标签： java

本文链接：https://blog.csdn.net/a1422346935/article/details/105689076

版权

MVC：

模型（model）-视图（view）-控制器（Controller）

在这里插入图片描述

1.model : 处理数据逻辑部分，对数据库进行操作，业务逻辑

2.view : 数据显示部分，用户操作

3.controller : 从视图层读取数据，通过模型层完成操作

4.MVC最初应用于桌面程序中，M指数据模型，V指用户界面，C指控制器

5.MVC设计模式 -好处： MVC模式不仅实现了功能模块和显示模块的分离，同时它还提高了应用系统的，可维护性，可扩展性，可移植性，组件的可复用性

第一步：先在WEB-INF/template建立三个jsp包

在这里插入图片描述

login是显示用户登陆验证码页面

fail是错误跳转页面

main是登陆成功页面

第二步：在java目录下LoginController包编辑java代码，实现用户需求

在这里插入图片描述

代码为：

package cn.edu.mju.project2.comtroller;

import cn.edu.mju.project2.utils.StrUtil;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.net.URLDecoder;
import java.net.URLEncoder;


@WebServlet("/login")

public class LoginController extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String msg = req.getParameter("msg");
        if (msg == null) {
            msg = " ";
        } else {
            msg = URLDecoder.decode(msg, "UTF-8");//处理乱码
        }
        req.setAttribute("msg", msg);
        req.getRequestDispatcher("/WEB-INF/template/login.jsp").forward(req, resp);//转发对象
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String loginName = req.getParameter("loginName");
        String loginPwd = req.getParameter("loginPwd");
        String validCode = req.getParameter("validCode");

        ServletContext application = this.getServletContext();
        application.setAttribute("c", 1);


        String saveCode = (String) req.getSession().getAttribute("code");
        //登陆名称是你的学号，密码是1234，那么显示下面的内容，否则显示账户或密码错误

        String msg = null;
        if (StrUtil.isBank(validCode)) {
            resp.sendRedirect("/login?msg=" + URLEncoder.encode("请输入校验码","UTF-8"));

        } else {
            if (validCode.equals(saveCode)) {
                if ("5197101214".equals(loginName) && "1234".equals(loginPwd)) {
                    req.getSession().setAttribute("name", loginName);
                    resp.sendRedirect("main");
//
                } else {
                    loginFail(req,resp,"账号或密码错误");
                }
            } else {
                loginFail(req,resp,"验证码错误");
            }

        }

    }
    private void loginFail(HttpServletRequest req, HttpServletResponse resp,String str) throws ServletException, IOException {
        req.setAttribute("msg",str);
        req.getRequestDispatcher("/WEB-INF/template/fail.jsp").forward(req,resp);
    }

}

第三步：编写三个jsp包的代码

login.jsp代码为：

<%@ page contentType="text/html;charset=UTF-8" errorPage="../../erroPage.jsp" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>
<%=request.getAttribute("msg")%>
<form action="./login" name="login" method="post">
    登陆名称：<input type="text" name="loginName"><br>
    登陆密码：<input type="passwoed" name="loginPwd"><br>
    验证码：<input type="text" name="validCode">
    <img src=./captche width='100' height='60'><br>
    <input type="submit" value="登陆">
    <input type="submit" value="取消">
</form>
</body>
</html>

fail.jsp代码为：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
登陆失败，原因是 <%=request.getAttribute("msg")%>,请<a href="login">重新登陆</a>>
</body>
</html>

main.jsp代码为：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
这是我们的主界面，您好：<%=session.getAttribute("name")%>
</body>
</html>

第四步：用户测试

在这里插入图片描述

用户名密码输入错误时：

在这里插入图片描述

验证码输入错误时：

在这里插入图片描述

登陆成功时：

在这里插入图片描述

总结：

MVC的目标是让系统开发易于分工，代码可读性强好维护，后续开发容易跟进等等。可能代码分离和开发分工，造成题主会有前后端分离的感觉，但是大多数MVC还是开发模式，并不是现在普通意义的前后端分离模式。

a1422346935

关注

6
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
使用MVC模式设计用户验证码登陆界面

MVC：模型（model）-视图（view）-控制器（Controller）1.model : 处理数据逻辑部分，对数据库进行操作，业务逻辑2.view : 数据显示部分，用户操作3.controller : 从视图层读取数据，通过模型层完成操作4.MVC最初应用于桌面程序中，M指数据模型，V指用户界面，C指控制器5.MVC设计模式 -好处： MVC模式不仅实现了功能模块和显示模块的...
复制链接

扫一扫