MVC架构||简要了解MVC程序设计模型及模型示例

系统管理员 2024-04-17 05:35 65阅读 0赞

## MVC模型 ##

MVC起源于JSP和Servlet，他们两个拥有其各自的区别和特点，因此我们在编程中要运用到这两个语言，就需要构建一个模型来支撑JSP/Servlet这个平台，这就是MVC模型。

MVC模式（Model-View-Controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）：

*  **Controller**——负责转发请求，对请求进行处理（Servlet控制这个操作）
 *  **View**——负责界面显示（JSP平台控制这个操作）
 *  **Model**——业务功能编写（例如算法实现）、数据库设计以及数据存取操作实现

## 结构原理： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70][]

通过原理图我们知道：

1.  Web浏览器通过HTTP请求到服务端，由Servlet获取并进行处理（例如参数解析、请求转发）
2.  Servlet调用核心业务逻辑（Model），获得结果（例如，访问数据库）
3.  Servlet将逻辑处理的结果交给View（JSP部分），jsp为输出HTML的内容
4.  JSP生成的HTML内容在浏览器显示

模式的架构很清晰，就是Servlet是实现的方法（后端），Jsp为展示的界面（前端），Model为后台数据的管理（服务）

**现在我们以CMS后台管理平台为例，做个实现用户登录的项目**

## MVC示例--实现用户登录 ##

首先，我们想想啊，后台管理员要想登录服务就必须在服务器里有他的帐号和密码，也就是说，我们需要在数据库里有他的信息，所以，我们要在数据库里建立管理员信息。

### 建立数据库，存储用户信息： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 1][]

之后，我们将这个数据库导出，放到cms管理平台的项目中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 2][]

这样，服务端就算弄好了，服务端就像上面我们说的，是被Servlet调用的，所以，我们接下来做Servlet实现的方法

### Servlet--校验用户名和密码 ###

servlet说简单点就是Servlet服务以及实现这个服务的各个方法。

建立service、dao及tools分层，实际建立两个包，把事务的边界和数据访问的代码分出去service层是事务的边界，主要就是下面的代码以及业务逻辑

try{
    
    conn.setAutoCommit(false);
    
    //dao层代码
    
    conn.commit();
    
    }catch(Exception e){
    
    conn.rollback();
    
    }

dao层主要就是单一需求的数据库访问

tools是整个项目都可以用到的工具类

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 3][]

下面先创建数据库的工具类

*  创建DB工具

package edu.xalead.cms.tools;
    
    import edu.xalead.cms.enity.Channel;
    
    import java.sql.*;
    import java.util.ArrayList;
    import java.util.List;
    
    public class DB {
    
        private static String driverClass = "com.mysql.jdbc.Driver";
        private static String url = "jdbc:mysql://192.168.93.88:3306/cms";
        private static String username = "root";
        private static String password = "";
        /**
         *
         * 获取数据库连接的方法
         */
        public static Connection getConn() {
            try {
                //注册驱动
                Class.forName (driverClass);
                //注册数据库连接
                conn = DriverManager.getConnection (url,username,password);
            }catch (Exception e){
                e.printStackTrace ();
            }
            return conn;
        }
    
        /**
         * 关闭数据库连接，语句对象，结果集对象等方法
         */
        public static void close(AutoCloseable t){
    
            try {
                if (t != null){
                    t.close ();
                }
            } catch (Exception e) {
                e.printStackTrace ();
            }
    
        }
    
        /**
         * 把结果集转换成频道列表离线集
         * @param rs 结果连线集
         * @return 频道列表离线集
         */
        public static List<Channel> resultSet2ChanenlList(ResultSet rs) {
            List<Channel> list = null;
            try {
                while(rs.next()){
                    //判断如果结果没实例化就实例化
                    if(list == null){
                        list = new ArrayList<>();
                    }
                    //把rs中当前记录封装Channel对象
                    Channel c = new Channel();
                    c.setCid(rs.getInt("cid"));
                    c.setCname(rs.getString("cname"));
                    c.setDescription(rs.getString("description"));
                    //把当前对象放进频道列表
                    list.add(c);
    
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            return list;
        }
    }

*  验证用户名

因为要访问数据，所有我们先创建实体类保存数据库中查询出的数据

package edu.xalead.cms.enity;
    
    import java.util.Date;
    
    public class User {
        private int uid;
        private String username;
        private String password;
        private Date createTime;
        private Date updateTime;
        private String unname;
    
        public String getUnname() {
            return unname;
        }
    
        public void setUnname(String unname) {
            this.unname = unname;
        }
    
        public int getUid() {
            return uid;
        }
    
        public void setUid(int uid) {
            this.uid = uid;
        }
    
        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 Date getCreateTime() {
            return createTime;
        }
    
        public void setCreateTime(Date createTime) {
            this.createTime = createTime;
        }
    
        public Date getUpdateTime() {
            return updateTime;
        }
    
        public void setUpdateTime(Date updateTime) {
            this.updateTime = updateTime;
        }
    
    
    }

*  因为验证用户名密码需要查询用户表，编写数据库访问层的UserDao类

package edu.xalead.cms.dao;
    
    import edu.xalead.cms.enity.User;
    import edu.xalead.cms.tools.DB;
    
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    
    public class UserDao {
        public User findUserByUserName(String user, Connection conn){
            User u = null;
            String sql = "select * from usertable";
            PreparedStatement prst = null;
            ResultSet rs = null;
            try {
                prst = conn.prepareStatement (sql);
                rs = prst.executeQuery ();
                if(rs.next ()){
                    u = new User ();
                    u.setUid(rs.getInt("uid"));
                    u.setUsername(rs.getString("username"));
                    u.setPassword(rs.getString("password"));
                    u.setCreateTime(rs.getDate("createTime"));
                    u.setUnname(rs.getString("unname"));
                }
    
            } catch (Exception e) {
                e.printStackTrace ();
            } finally {
                DB.close (prst);
            }
            return u;
        }
    }

光有dao层不太科学，因为实际业务往往并不是单一的一个数据库操作，而且有复杂业务逻辑，所以我们要创建service层的对象作为事务的边界，事务边界内再多的数据库访问，也会一致执行或一致回滚。

*  创建UserService类，这个类会调用dao层的代码

package edu.xalead.cms.service;
    
    import edu.xalead.cms.dao.UserDao;
    import edu.xalead.cms.enity.User;
    import edu.xalead.cms.tools.DB;
    
    import java.sql.Connection;
    import java.sql.SQLException;
    
    public class LoginService {
    
        public User chkUser(String user){
    
            User u = null;
            Connection conn = DB.getConn ();
            try {
    
                conn.setAutoCommit (false);
                //dao
                UserDao userDao = new UserDao();
                u = userDao.findUserByUserName(user,conn);
                conn.commit ();
            } catch (Exception e) {
                try {
                    e.printStackTrace ();
                    conn.rollback ();
                } catch (Exception e1) {
                    e1.printStackTrace ();
                }
    
    
            }
            return u;
        }
    
    }

*  web层需要数据库数据时，调用service层中的方法返回数据

package edu.xalead.cms.web.servlet;
    
    import edu.xalead.cms.enity.User;
    import edu.xalead.cms.service.LoginService;
    
    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.util.ArrayList;
    
    @WebServlet(name = "LoginServlet", urlPatterns = "/backend/login")
    public class LoginServlet extends HttpServlet {
        //比较验证码的函数
    
        public boolean isEq(ArrayList<String> chk, String chknum) {
            for (int i = 0; i < chk.size (); i++) {
                String ck = chk.get (i);
                String cn = String.valueOf (chknum.charAt (i));
    
                if (!ck.equals (cn)) {
                    return false;
                }
            }
            return true;
        }
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            String user = request.getParameter ("user");
            String password = request.getParameter ("pwd");
            //取验证码
            String chkNumber = request.getParameter ("chknumber");
            //取出session的验证码
            ArrayList<String> serchk = (ArrayList<String>) request.getSession ().getAttribute ("checkcode");
            if (chkNumber != null && chkNumber != "" && isEq (serchk, chkNumber)) {
                //校验用户名
                LoginService loginService = new LoginService ();
                User u = loginService.chkUser (user);
    
                if (u != null) {
                    if (password != null && password.equals (u.getPassword ())) {
                        //存储令牌
                        request.getSession ().setAttribute ("user",u);
    
                        //验证通过，转到后台页面
                        request.getRequestDispatcher ("/backend/main.jsp").forward (request, response);
                    } else {
                        request.setAttribute ("error", "密码不正确，请重新输入！");
                        request.getRequestDispatcher ("/backend/login.jsp").forward (request, response);
                    }
                } else {
                    request.setAttribute ("error", "用户名不正确，请重新输入！");
                    request.getRequestDispatcher ("/backend/login.jsp").forward (request, response);
                }
    
            } else {
                request.setAttribute ("error", "验证码输入错误，请重新输入");
                request.getRequestDispatcher ("/backend/login.jsp").forward (request, response);
    
            }
    
        }
    }

验证码的验证在小编的博客里，有疑难可以查看

注意，既然调用数据库，那么数据库的测试jar包不能少，所以，需要配置jar包到lib文件夹，这个不能忽视

[使用IDEA创建WEB应用项目][IDEA_WEB]

Servlet网络服务端，习惯上也称为后端，后端的结构相对复杂，需要读者耐心取领悟，接下来，我们将前端JSP部分，也就是在web浏览器响应的部分

### View页面 ###

展示这个页面也是JSP的工作，所以，我们创建一个JSP文件，展示我们需要的界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/backend/";
    //http://localhost:8080/backend/images/checkcode.png
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<base href="<%=basePath%>">
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>CMS 后台管理工作平台</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css"/>
    	<script type="text/javascript" src="js/js.js"></script>
    </head>
    <body>
    <div id="top" onload="reloadc()"> </div>
    <form id="login" action="/backend/login" method="post">
      <div id="center">
        <div id="center_left"></div>
        <div id="center_middle">
          <div class="user">
            <label>用户名：
            <input type="text" name="user" id="user" />
            </label>
          </div>
          <div class="user">
            <label>密　码：
            <input type="password" name="pwd" id="pwd" />
            </label>
          </div>
          <div class="chknumber">
            <label>验证码：
            <input name="chknumber" type="text" id="chknumber" maxlength="4" class="chknumber_input" />
            <c:if test="${not (empty error)}">
              <span style="color: red">${error}</span>
            </c:if>
    
            </label>
            <img src="images/checkcodes.png" onclick="var verify=document.getElementById('safecode');
        verify.setAttribute('src','images/checkcodes.png?'+Math.random());" id="safecode" />
          </div>
        </div>
        <div id="center_middle_right"></div>
        <div id="center_submit">
          <div class="button"> <img src="images/dl.gif" width="57" height="20" onclick="form_submit()" > </div>
          <div class="button"> <img src="images/cz.gif" width="57" height="20" onclick="form_reset()"> </div>
        </div>
        <div id="center_right"></div>
      </div>
    </form>
    <div id="footer">西安领航致远教育</div>
    </body>
    </html>

这个并不需要读者做太多的工作，因为CMS管理系统后台提供这个源码

### 测试 ###

打开服务器，运行代码，得到我们想要的结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/db6da0b069f04dc58ca2cad84fbd9457.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/1571b68332464d2b8efcead254fa8066.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/c7ed0e84e31746fd887ccb9dd2128468.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/e2a7e45bc6484a11b7ba7b7afca316a0.png
[IDEA_WEB]: https://blog.csdn.net/JockLiu/article/details/99418469
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/56b2366b8c9543d88b7df48a66b0228d.png