一、概述

由于小组人数增加，原购物商城项目换成“酒店管理系统”项目。
学习不总结，等于白学，固在期末复习+考研复习之中，抽出时间，记录在此。
注：此篇文章主要介绍用户登录功能

二、知识铺垫

1.什么是MVC

MVC 模式代表 Model-View-Controller（模型-视图-控制器）模式。这种模式用于应用程序的分层开发。

Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
View（视图）视图代表模型包含的数据的可视化。
Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

借此图来说明问题，侵删。
这里让MVC设计模式更简单明了的展示出来。

2.什么是SSM

见名知意，在这里插入图片描述
注意，在我们利用SSM框架进行项目开发时，为了更好的进行代码解耦，我们加入了Service层

在这里插入图片描述

Service层是建立在DAO层之上的，建立了DAO层后才可以建立Service层，而Service层又是在Controller层之下的，因而Service层应该既调用DAO层的接口，又要提供接口给Controller层的类来进行调用，它刚好处于一个中间层的位置。每个模型都有一个Service接口，每个接口分别封装各自的业务处理方法。

我们用一张图进行说明这四层的工作流程。
在这里插入图片描述

3.SSM对4层的任务分配

1、spring MVC ＋ spring
+mybatis，是标准的MVC设计模式，将整个系统划分为显示层，Controller层，Service层，DAO层四层使用Spring MVC负责请求的转发和视图管理 spring实现业务对象管理，mybatis作为数据对象的持久化引擎。
2、Spring是一个开源框架，Spring是一个轻量级的控制反转（IoC）和面向切面（AOP）的容器框架，还能更好的让其他框架整合。
3、Spring MVC框架是有一个MVC框架，通过实现Model-View-Controller模式来很好地将数据、业务与展现进行分离。
4、MyBatis 是一个基于Java的持久层框架

4.JavaScript简介

在这里插入图片描述
因为在前端JSP中，在From表单我们使用了JS，为了下面更好的说明，我们这里先进行说明。下面随着项目的介绍，我们进一步剖析。
JavaScript W3School学习网址

5.什么是servlet

1.java库里面的一个类，Servlet是服务器端运行的一个程序。当web容器启动的时候并且执行的时候，Servlet类就会被初始化。
3.用户通过浏览器输入url时，请求到达Servlet来接收并且根据servlet配置去处理。
通常项目中会用到不同的web容器，我这里用到是比较常见的Tomcat。在eclipse里面创建一个java web项目，会有一个WEB-INF的文件夹，为了不轻易被外界访问到，这个文件夹底下的文件都是受保护的。文件夹中包括了一个很重要的配置文件，web.xml ，我们要实现的不同Serviet也要在这里配置才能使用。

详细了解，可以看看这篇博文，大佬讲解的很不错

6.DispatchServlet

前端控制器的(DispatcherServlet)跟之前的Servlet作用相似，都是用来接收用户请求.
SpringMVC也是Servlet的实现，只不过SpringMVC增加了一个DispatchServlet，所有的http请求都是映射到这个Servlet上，请求进入到这个Servlet中之后，就算进入到了框架之中了，由这个Servlet来统一的分配http请求到各个Controller。

三、项目跑通

1.配置web.xml

在这里插入图片描述

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name></display-name>
  <!--实例化spring的容器 -->
  <context-param>
  <!-- 指定一下applicationContext的路径 -->
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext.xml,classpath:spring-mybatis.xml</param-value>
  </context-param>
  <listener>
    <description>spring监听器</description>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <!-- 配置请求过滤器，编码格式设为UTF-8，避免中文乱码-->
  <filter>
    <filter-name>characterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <session-config>
    <session-timeout>60</session-timeout>
  </session-config>
  <servlet>
    <description>springmvc servlet</description>
    <servlet-name>springMvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <description>springmvc 配置文件</description>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring-mvc.xml</param-value>
    </init-param>
    <init-param>
      <param-name>activeReverseAjaxEnabled</param-name>
      <param-value>true</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>springMvc</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
  <!-- 欢迎页，用于当用户在url中输入项目名称或者输入web容器url（如http://localhost:8080/）时直接跳转的页面.-->
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

2.输入网址，进入登录主页

在这里插入图片描述
下面详细介绍前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
  <head>
    <title>酒店管理系统</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css" type="text/css"></link>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/mycss.css" type="text/css"></link>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrapValidator.min.js"></script>
   <script>
        $(function(){
    
    
            $('#frmLogin').bootstrapValidator({
    
    
                feedbackIcons:{
    
    
                    valid:'glyphicon glyphicon-ok',
                    invalid:'glyphicon glyphicon-remove',
                    validating:'glyphicon glyphicon-refresh'
                },
                fields:{
    
    
                		userName:{
    
    
                        validators:{
    
    
                            notEmpty:{
    
    
                                message:'用户名不能为空'
                            }
                        }
                    },
                    password: {
    
    
                        validators: {
    
    
                            notEmpty: {
    
    
                                message: '密码不能为空'
                            }
                        }
                    }
                }
            });
        });
    </script>    
    
  </head>
  <body>
  	<!-- 使用自定义css样式 div-signin 完成元素居中-->
    <div class="container div-signin">
      <div class="panel panel-primary div-shadow">
      	<!-- h3标签加载自定义样式，完成文字居中和上下间距调整 -->
	    <div class="panel-heading">
	    	<h3>酒店管理系统</h3>
	    	<span>Hotel Management System</span>
	    </div>
	    <div class="panel-body">
	      <!-- login form start -->
	      <form action="${
    
    pageContext.request.contextPath }/Login/tomain.do" class="form-horizontal" 
	      method="post" id="frmLogin">
		     <div class="form-group">
		       <label class="col-sm-3 control-label">用户名：</label>
		       <div class="col-sm-9">
		         <input class="form-control" type="text" placeholder="请输入用户名" name="userName">
		       </div>
		    </div>
		     <div class="form-group">
		       <label class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
		       <div class="col-sm-9">
		         <input class="form-control" type="password" placeholder="请输入密码" name="password">
		       </div>
		    </div>
		    <div class="form-group">
		       <div class="col-sm-3">
		       </div>
		       <div class="col-sm-9 padding-left-0">
		       	 <div class="col-sm-4">
			         <button type="submit" class="btn btn-primary btn-block">登&nbsp;&nbsp;录</button>
		       	 </div>
		       	 <div class="col-sm-4">
			         <button type="reset" class="btn btn-primary btn-block">重&nbsp;&nbsp;置</button>
		       	 </div>
		       	 <div class="col-sm-4" style="padding:0;margin-left:-10px;width:auto;padding-top: 5px;">
		       	 	<c:if test="${msg!=null }">
			       		<span class="text-danger">${
    
    msg}</span>
			       </c:if>
		       	 </div>
		       </div>
		    </div>
	      </form>
	      <!-- login form end -->
	    </div>
	  </div>
    </div>
    <!-- 页尾 版权声明 -->
    <div class="container">
		<div class="col-sm-12 foot-css">
		        <p class="text-muted credit">
		            <!-- Copyright &copy;  版权所有 -->
		        </p>
	    </div>
    </div>
  </body>
</html>