Detailed explanation and summary of JAVAEE development process (front-end + back-end) hotel management system - course design

I. Overview

Due to the increase in the number of team members, the original shopping mall project was replaced by the "hotel management system" project.
Learning without summarizing is equivalent to learning in vain, Fixed in the final review + postgraduate review review, take time out and record it here.
Note: This article mainly introduces the user login function

Second, the foundation of knowledge

1. What is MVC

The MVC pattern stands for the Model-View-Controller pattern. This pattern is used for layered development of applications.

  • Model - Model represents an object or JAVA POJO that accesses data. It can also have logic to update the controller when the data changes.
  • View Views represent visualizations of the data contained in the model.
  • Controller - Controllers act on models and views. It controls the flow of data to model objects and updates views as data changes. It keeps the view separate from the model.


Use this picture to illustrate the problem and delete it.
This makes the MVC design pattern more simple and clear.

2. What is SSM

Knowing the name, insert image description here
note that when we use the SSM framework for project development, in order to better decouple the code, we addedServicelayer

insert image description here
insert image description here

The Service layer is built on the DAO layer. After the DAO layer is established, the Service layer can be established, and the Service layer is under the Controller layer. Therefore, the Service layer should not only call the interface of the DAO layer, but also provide an interface to The class of the Controller layer is called, which happens to be in a middle layer. Each model has a Service interface, and each interface encapsulates its own business processing methods.

We use a diagram to illustrate the workflow of these four layers.
insert image description here

3. SSM assigns tasks to 4 layers

1. spring MVC + spring
+ mybatis is a standard MVC design pattern, which divides the whole system into display layer, controller layer, service layer, and DAO layer. Spring MVC is used for request forwarding and view management to realize business object management. mybatis as a persistence engine for data objects.
2. Spring is an open source framework. Spring is a lightweight Inversion of Control (IoC) and Aspect-Oriented (AOP) container framework, which can better integrate other frameworks.
3. The Spring MVC framework has an MVC framework that separates data, business and presentation well by implementing the Model-View-Controller pattern.
4. MyBatis is a Java-based persistence layer framework

4. Introduction to JavaScript

insert image description here
Because in the front-end JSP, we use JS in the From form. For a better description below, we will explain it here first. With the introduction of the project below, we will further analyze it.
JavaScript W3School Learning URL

5. What is a servlet

1. A class in the java library, Servlet is a program running on the server side. When the web container starts and executes, the servlet class is initialized.
3. When the user enters the url through the browser, the request arrives at the servlet to receive and process it according to the servlet configuration.
Usually different web containers are used in the project, I use the more common Tomcat here. Create a java web project in eclipse, there will be a WEB-INF folder, in order not to be easily accessed by the outside world, the files under this folder are protected. The folder includes a very important configuration file, web.xml. The different Serviets we want to implement should also be configured here before they can be used.

For more details, you can take a look at this blog post, the big guy explained it very well

6.DispatchServlet

The front-end controller (DispatcherServlet) is similar to the previous Servlet, which is used to receive user requests.
SpringMVC is also an implementation of Servlet, but SpringMVC adds a DispatchServlet, all http requests are mapped to this Servlet, and requests enter After entering this servlet, even if it enters the framework, the servlet will uniformly distribute http requests to each Controller.

3. The project runs through

1. Configure web.xml

insert image description here

<?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. Enter the URL to enter the login homepage

insert image description here
The front-end code is described in detail below

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

insert image description here


insert image description here

insert image description here
insert image description here
insert image description here
Record it here first, and continue when you have time.

Guess you like

Origin blog.csdn.net/qq_30336973/article/details/118161324