Explicación detallada y resumen del proceso de desarrollo JAVAEE (front-end + back-end) del sistema de gestión hotelera - diseño del curso

I. Resumen

Debido al aumento en el número de miembros del equipo, el proyecto original del centro comercial fue reemplazado por el proyecto del "sistema de gestión hotelera".
Aprender sin resumir equivale a aprender en vano, Corregido en la revisión final + revisión de revisión de posgrado, tómese un tiempo y regístrelo aquí.
Nota: este artículo presenta principalmente la función de inicio de sesión de usuario

En segundo lugar, la base del conocimiento.

1. ¿Qué es MVC?

El patrón MVC representa el patrón Modelo-Vista-Controlador. Este patrón se utiliza para el desarrollo en capas de aplicaciones.

  • Modelo: el modelo representa un objeto o JAVA POJO que accede a los datos. También puede tener lógica para actualizar el controlador cuando cambian los datos.
  • Vista Las vistas representan visualizaciones de los datos contenidos en el modelo.
  • Controlador: los controladores actúan sobre modelos y vistas. Controla el flujo de datos para modelar objetos y actualiza las vistas a medida que cambian los datos. Mantiene la vista separada del modelo.


Utilice esta imagen para ilustrar el problema y elimínelo.
Esto hace que el patrón de diseño de MVC sea más simple y claro.

2. ¿Qué es SSM?

Conociendo el nombre, inserte la descripción de la imagen aquí
tenga en cuenta que cuando usamos el marco SSM para el desarrollo de proyectos, para desacoplar mejor el código, agregamosServiciocapa

inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí

La capa de servicio se basa en la capa DAO. Después de establecer la capa DAO, se puede establecer la capa de servicio y la capa de servicio está debajo de la capa del controlador. Por lo tanto, la capa de servicio no solo debe llamar a la interfaz de la capa DAO, pero también proporciona una interfaz para La clase de la capa del controlador se llama, que pasa a estar en una capa intermedia. Cada modelo tiene una interfaz de servicio y cada interfaz encapsula sus propios métodos de procesamiento comercial.

Usamos un diagrama para ilustrar el flujo de trabajo de estas cuatro capas.
inserte la descripción de la imagen aquí

3. SSM asigna tareas a 4 capas

1. spring MVC + spring
+ mybatis es un patrón de diseño MVC estándar, que divide todo el sistema en capa de visualización, capa de controlador, capa de servicio y capa DAO. Spring MVC se utiliza para el reenvío de solicitudes y la gestión de vistas para realizar la gestión de objetos comerciales. mybatis como motor de persistencia para objetos de datos.
2. Spring es un marco de código abierto Spring es un marco de contenedor ligero de inversión de control (IoC) y orientado a aspectos (AOP), que puede integrarse mejor con otros marcos.
3. El marco Spring MVC tiene un marco MVC que separa bien los datos, el negocio y la presentación mediante la implementación del patrón Modelo-Vista-Controlador.
4. MyBatis es un marco de capa de persistencia basado en Java

4. Introducción a JavaScript

inserte la descripción de la imagen aquí
Porque en el front-end JSP, usamos JS en el formulario De. Para una mejor descripción a continuación, lo explicaremos aquí primero. Con la introducción del proyecto a continuación, lo analizaremos más a fondo.
URL de aprendizaje de JavaScript W3School

5. ¿Qué es un servlet?

1. Una clase en la biblioteca Java, Servlet es un programa que se ejecuta en el lado del servidor. Cuando el contenedor web se inicia y se ejecuta, la clase de servlet se inicializa.
3. Cuando el usuario ingresa la url a través del navegador, la solicitud llega al servlet para recibirla y procesarla de acuerdo con la configuración del servlet.
Por lo general, se usan diferentes contenedores web en el proyecto, yo uso el Tomcat más común aquí. Cree un proyecto web java en eclipse, habrá una carpeta WEB-INF, para que el mundo exterior no pueda acceder fácilmente a ellos, los archivos de esta carpeta están protegidos. La carpeta incluye un archivo de configuración muy importante, web.xml, los diferentes Serviets que queremos implementar también deben configurarse aquí antes de que puedan ser utilizados.

Para más detalles, puedes echarle un vistazo a este post del blog, el grandote lo explicó muy bien

6.DispatchServlet

El controlador front-end (DispatcherServlet) es similar al Servlet anterior, que se usa para recibir solicitudes de los usuarios.
SpringMVC también es una implementación de Servlet, pero SpringMVC agrega un DispatchServlet, todas las solicitudes http se asignan a este Servlet y las solicitudes ingresan después al ingresar a este servlet, incluso si ingresa al marco, el servlet distribuirá uniformemente las solicitudes http a cada controlador.

3. El proyecto transcurre

1. Configurar web.xml

inserte la descripción de la imagen aquí

<?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. Ingrese la URL para ingresar a la página de inicio de inicio de sesión

inserte la descripción de la imagen aquí
El código front-end se describe en detalle a continuación.

<%@ 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>

inserte la descripción de la imagen aquí


inserte la descripción de la imagen aquí

inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
Grábalo aquí primero y continúa cuando tengas tiempo.

Supongo que te gusta

Origin blog.csdn.net/qq_30336973/article/details/118161324
Recomendado
Clasificación