Spring入門-使用SpringMVC完成一個登陸頁面

使用SpringMVC完成一個簡單的登錄頁面，並實現持久層，業務層和表示層，這樣可以更好的理解分層思想。

系統分層思想

MVC是屬於表示層的一種軟件架構思想，分層是更大的一種架構思想，更廣范圍更大，層級更靈活。

(1)為什么要分層

為了讓系統好維護，采用分層，系統設計應該做到高內聚，低耦合。簡單來說就是類的職責要單一，一個類拆成多個類，形成相互調用的層級關系，類之間不要直接依賴，采用依賴注入來完成調用。如寫個一交易的方法，里面需要有驗證權限、驗證安全、對數據庫的操作、提交事務、記錄日志等邏輯，如果全部寫到一個方法里，將讓項目不好維護，如果將其拆分開來變成單個的類，然后采用依賴注入的方式完成類調用，將提高代碼的可維護性。

(2)如何分層

上一層通過接口調用下一層提供的服務，下層實現類發生改變不會影響上一層，常用的分層結構就是表示層-業務層-持久層。

表示層 數據展現和操作界面，以及請求分發，表示層調用業務層，最好采用接口的方式依賴注入

業務層 封裝了業務邏輯處理，業務層調用持久層，最好使用接口方式依賴注入

持久層 封裝了數據訪問邏輯，需要調用連接池實現類

實現步驟

實現案例先提交准備好素材，本案例寫了一個有css美化效果的登錄頁面，用它來實現MVC登錄演示。

（1）導包

本例中需導入Spring-webmvc、junit、mysql驅動包、dbcp連接池包等

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.boe</groupId>
  <artifactId>SpringMVC02-Login-clyang</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  
  <dependencies>
      <!-- 添加Spring-webmvc -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>4.2.3.RELEASE</version>
    </dependency>    
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>4.2.3.RELEASE</version>
        <classifier>sources</classifier>
    </dependency>    
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>4.2.3.RELEASE</version>
        <classifier>javadoc</classifier>
    </dependency>
    <!-- 添加junit測試包 -->
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.12</version>
    </dependency>
    <!-- 添加dpcp -->
    <dependency>
        <groupId>commons-dbcp</groupId>
        <artifactId>commons-dbcp</artifactId>
        <version>1.4</version>
    </dependency>
    <!-- 添加mysql驅動包 -->
    <dependency>
        <groupId>org.wisdom-framework</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.34_1</version>
    </dependency>
    <!-- 添加jstl標簽包 -->    
    <dependency>
       <groupId>jstl</groupId>
       <artifactId>jstl</artifactId>
       <version>1.2</version>
    </dependency>
  
  </dependencies>
  
</project>

（2）配置DispatcherServlet

在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_2_5.xsd" version="2.5">
  <display-name>SpringMVC02-Login-clyang</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <!-- 配置DispatcherServlet -->
  <servlet>
      <servlet-name>springmvc</servlet-name>
      <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
      <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-mvc.xml</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>
  
</web-app>

（3）添加Spring-mvc.xml配置文件

里面需配置組件掃描，注解驅動，視圖解析，連接池bean配置

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context" xmlns:util="http://www.springframework.org/schema/util"  
    xmlns:jee="http://www.springframework.org /schema/jee" xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:jpa="http://www.springframework.org/schema/data/jpa" xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
        http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd
        http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.2.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
        http://www.springframework.org/schema/data/jpa http://www.springframework.org/schema/data/jpa/spring-jpa-1.3.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">    
        
    <!-- 配置組件掃描 -->
    <context:component-scan base-package="com.boe.*"></context:component-scan>
    <!-- 配置注解驅動 -->
    <mvc:annotation-driven></mvc:annotation-driven>
    <!-- 配置視圖解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>
    <!-- 配置連接池 -->
    <util:properties id="prop" location="classpath:config.properties"></util:properties>
    <bean id="dbcp" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
        <property name="driverClassName" value="#{prop.driver}"></property>
        <property name="url" value="#{prop.url}"></property>
        <property name="username" value="#{prop.user}"></property>
        <property name="password" value="#{prop.pwd}"></property>
    </bean>

</beans>

（4）添加db.properties文件

里面包含數據庫連接的信息，包括url，driveClassName、user、password等

#MySQL路徑,其中Admin_ycl代表mysql建表時的scheme名稱
url=jdbc:mysql://localhost:3306/Admin_ycl
#用戶名
user=root
#用戶密碼
pwd=2688
#驅動名
driver=com.mysql.jdbc.Driver

nativetoascii config.properties
            
initsize=1

maxactive=200

maxwait=5000

minidle=1

maxidle=1

（5）添加靜態資源

包括css文件、登錄頁面jsp文件和圖片素材等

<%@page pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html>
    <head>
      <title>歡迎登錄Color Filter-JavaScript登錄驗證</title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="css/login.css" />
      <script type="text/javascript" src="script/login.js"></script>
    </head>
    <body>
       <!--logo區+段落區-->
       <div class="logo">
           <img src="image/LogoCF.jpg">
           <p id="logoDesc">Sign in to Color Filter</p>
       </div>
       <!--主體登錄區-->
       <div class="main">
          <div id="login">
              <!--5行2列-->
              <!--表單用於輸入登錄信息，提交給服務器  -->
              <!-- 
                onsubmit是表單提交事件，在點擊提交按鈕時觸發。觸發時先調用onsubmit內的方法，若該方法返回true則會自動提交表單
                返回false則不提交，此處聲明的方法可以起到攔截提交的作用，避免賬號名和密碼都不對時也能提交到服務器
                onsubmit="return ((check_username()+check_pwd())==2)"
               -->
              <form action="logincheck.do" method="get">
              <table>
              <tr>
                <td colspan="2" style="text-align: left;text-indent: 29px">Username or email address</td>
              </tr>
              <tr>
                <!-- 增加切換光標確認用戶名格式是否正確 -->
                <td colspan="2"><input type="text" name="user"  id="username" onblur="check_username();" value="${username }"></td>
              </tr>
              <tr>
                <td style="text-align: left;text-indent: 29px;width:15%">Password</td>
                <td style="text-align: left;text-indent: 0px;width:85%"><a href="#">Forget password?</a></td>
              </tr>
              <tr>
                <td colspan="2" style="width: 345px"><input type="password" name="pwd" id="pwd" onblur="check_pwd();" value="${password }"></td>
              </tr>
              <tr>
                <td colspan="2" style="text-align: left;text-indent: 29px">Security Code</td>
              </tr>
              <tr>
                <td style="padding-left:32px;width:60%;text-align:left;"><input type="text" name="valicode" id="valicode"/></td>
                <!-- <td style="padding-top:3px;width:40%;text-align:right;padding-right:32px"><img alt="驗證碼" src="createIMG.do" onclick="this.setAttribute('src','createIMG.do?x='+Math.random())"></td> -->
                <!-- 添加登錄失敗提示 -->
                <td>${login_fail}</td>
              </tr>     
              <tr>
                <td colspan="2" id="buttontd"><input type="submit" name="btn" value="Sign in" id="button"></td>
              </tr>                     
              </table>
              </form>  
          </div>
          <div id="regist">
             <p style="text-align: center;">New to Color Filter? <a href="#">Create an account.</a></p>
          </div> 
       </div>
       <!--版權、隱私、法律相關-->
       <div class="foot">
          <p><a href="#">Terms</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Privacy</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Security</a>&nbsp;&nbsp;&nbsp;&nbsp;Contact Color Filter</p>
       </div>   
    </body>

</html>

（6）寫持久層接口和實現類，在寫持久層前需准備好對應數據表的實體類，需完成junit測試

package com.boe.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.sql.DataSource;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Repository;
import com.boe.entity.Admin;

/**
 * 持久層實現類-JDBC
 * @author yangchaolin
 */
@Repository("loginJDBC")
public class LoginDAOImpl implements LoginDAO{
    @Autowired
    @Qualifier("dbcp")
    private DataSource ds;
    
    //根據用戶名查找用戶信息
    public Admin findAdminByAdmincode(String admincode) {
        Admin admin=null;
        Connection conn=null;
        try {
            conn=ds.getConnection();
            if(conn==null) {
                throw new RuntimeException("網絡異常，或數據庫被關閉");
            }
            //查詢
            String sql="select * from Admin where admincode=?";
            PreparedStatement ps=conn.prepareStatement(sql);
            ps.setString(1, admincode);
            ResultSet result=ps.executeQuery();
            if(result.next()) {
                admin=new Admin();
                admin.setAdminCode(admincode);
                admin.setAdminId(result.getInt("ADMINID"));
                admin.setEmail(result.getString("EMAIL"));
                admin.setEnrolldate(result.getTimestamp("ENROLLDATE"));
                admin.setName(result.getString("NAME"));
                admin.setPassword(result.getString("PASSWORD"));
                admin.setTelephone(result.getString("TELEPHONE"));
            }
        }catch(Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }finally {
            if(conn!=null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                    throw new RuntimeException(e);
                }
            }
        }
        return admin;
    }
}

（7）寫業務層接口和實現類，在寫業務層的同時自定義了一個異常類，實現自定義異常拋出給表示層，需完成junit測試

package com.boe.service;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.boe.dao.LoginDAO;
import com.boe.entity.Admin;
import com.boe.exception.ApplicationException;

/**
 * 業務層實現類
 * @author yangchaolin
 */
@Service("loginServiceImpl")
public class LoginServiceImpl implements LoginService{
    @Resource(name="loginJDBC")
    private LoginDAO dao;

    public Admin checkLogin(String adminCode, String pwd) {
        Admin admin=dao.findAdminByAdmincode(adminCode);
        if(admin==null) {
            throw new ApplicationException("用戶名錯誤");
        }
        if(!admin.getPassword().equals(pwd)) {
            throw new ApplicationException("密碼錯誤");
        }
        return admin;
    }
}

（8）寫表示層接口和實現類，實現登錄驗證，並返回登錄提示和結果

package com.boe.controller;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

import com.boe.entity.Admin;
import com.boe.entity.userInfo;
import com.boe.exception.ApplicationException;
import com.boe.service.LoginService;

@Controller
public class mainController {
    @Resource(name="loginServiceImpl")
    private LoginService service;
    
    //去到登錄頁面
    @RequestMapping("/toLogin.do")
    public String toLogin() {
        System.out.println("去到登錄頁面");
        return "login";
    }
    //驗證登錄
    @RequestMapping("/logincheck.do")
    public String login(userInfo data,ModelMap mm) {
        System.out.println("登錄驗證");
        System.out.println("用戶名為："+data.getUser());
        System.out.println("密碼為："+data.getPwd());
        //處理業務層異常
        try {
            Admin admin=service.checkLogin(data.getUser(), data.getPwd());
            if(admin!=null) {
                System.out.println("登錄成功");
                mm.addAttribute("user",data.getUser());
            }            
        }catch(Exception e) {
            //應用錯誤，即用戶填寫錯誤
            if(e instanceof ApplicationException) {
                mm.addAttribute("login_fail", e.getMessage());
                mm.addAttribute("username",data.getUser());
                mm.addAttribute("password", data.getPwd());
                return "login";
            }
            //系統錯誤
            return "loginNG";
        }
        return "loginOK";
    }
}

測試結果，正常進入登錄頁面，並展示css效果。

用戶名和密碼正確時

用戶名錯誤

密碼錯誤

以上就完成了使用SpringMVC完成登錄頁面。

另外在寫分層時發現上一層調用下一層時，只需要寫注解@Resource或@Autowired&@Qualifier就行，兩種都能實現依賴注入，並且發現沒set或構造器方法，這是怎么實例化對象的呢？因為Spring幫我們完成了set方法或構造器方法，因此看到不需要寫也能注入。

 

參考博文

（1）https://www.cnblogs.com/Jason-Xiang/p/5345342.html