基於Spring MVC的前后端分離開發

一.后台服務器端開發：先搭建一個springMVC項目

1.新建一個web項目

2.引入相關jar包，編寫配置文件

(1).引入spring包

spring-framework-5.0.8.RELEASE，這個包里有相關Bean、context、core、web、webmvc、aop、aspect、jdbc、test等功能的相關包。就是把下載到spring-framework-5.0.8.RELEASE里所有包都加進來了。如下圖(注意：要記得右鍵項目名稱，選擇Build Path把這些jar包引入到項目中)

 

(2).在src目錄下編寫spring容器配置文件，applicationContext.xml

位置如下

 

 該配置文件內容如下： 

<?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" xmlns:aop="http://www.springframework.org/schema/aop"
    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
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd">
        
</beans>

(3).編寫web.xml文件，配置Servlet初始化時加載spring容器

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <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:applicationContext.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>
  
  <display-name>spring_demo1</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>
</web-app>

(4).在src目錄下新創建一個包：com.cdd，如下圖

 

(5).配置配置spring容器的文件applicationContext.xml

開啟組件掃描，配置其他要用到的bean，包括HandlerMapping、HandlerAdapter等bean，並且支持@RequestMaping、@ResponseBody等注解。

 

(6).啟動該項目

我們把該項目放進tomcat中，啟動如下，說明我們前面的都配置成功了。

 

3.配置數據庫

(1).數據說明

在這里我們用的數據庫類型是mysql，數據庫名稱是：jsd15077db，用的用戶表是user。如下圖：

 

(2).引入數據庫相關jar包
數據庫連接驅動包：
mysql-connector-java-5.1.39-bin.jar
數據庫連接池相關包：
commons-pool-1.6.jar、commons-dbcp-1.4.jar、commons-dbcp-1.4.jar

向lib/目錄下引入上面提到的jar包，如下圖：

 

(3).在Spring容器配置文件applicationContext.xml配置數據庫信息

注冊數據庫連接bean和jdbcTemplate的bean，如下圖：

 

(4).編寫個測試類來測下我們的數據庫是否配置成功

在com_cdd包下再建個包test。在com.cdd.test包下建個測試類TestDB，代碼如下：

package com.cdd.test;

import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import org.springframework.jdbc.core.JdbcTemplate;

public class TestDB {
    public static void main(String[] args){
        String conf = "applicationContext.xml";
        ApplicationContext ac = new ClassPathXmlApplicationContext(conf);
        JdbcTemplate jdbcTemplate = ac.getBean("jdbcTemplate", JdbcTemplate.class);
        System.out.println(jdbcTemplate);
    }
}

運行該測試類，查看控制台輸出結果：

 

已經打印出了JdbcTemplate類對象，說明我們的數據部分配置成功了。

4.業務分析
這次我們想要實現用戶的登錄功能，首先得有個用戶實體類。
我們希望以一個統一的數據結構向前端返回請求結果，得需要一個返回結果類。
在登錄中我們往往不希望暴露用戶的真實密碼，我們需要對密碼進行MD5加密，所以我們還需要一個MD5加密工具類。

(1).實體類
先看下這個用戶表user的字段，如下：

 

 在com.cdd包下新建一個包entity，在com.cdd.entity包下新建一個User類，代碼如下：

package com.cdd.entity;

import java.io.Serializable;

public class User implements Serializable {
    private Integer id;    //用戶id
    private String userName;  //用戶登錄名稱
    private String pwd;  //密碼
    private String name;     //昵稱
    private String gender;    //性別
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getPwd() {
        return pwd;
    }
    public void setPwd(String pwd) {
        this.pwd = pwd;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getGender() {
        return gender;
    }
    public void setGender(String gender) {
        this.gender = gender;
    }
    
    public String toString() {
        return "User [id=" + id + ", userName=" + userName + ", pwd=" + pwd + ", name=" + name + ", gender=" + gender
                + ", getId()=" + getId() + ", getUserName()=" + getUserName() + ", getPwd()=" + getPwd()
                + ", getName()=" + getName() + ", getGender()=" + getGender() + ", getClass()=" + getClass()
                + ", hashCode()=" + hashCode() + ", toString()=" + super.toString() + "]";
    }
    
}

(2).返回結果類

在com.cdd.entity包下編寫一個返回結果類，如下：

package com.cdd.entity;

public class DataResult {
    private int status;   //響應狀態碼
    private String msg;   //響應信息
    private Object data;  //響應數據
    public int getStatus() {
        return status;
    }
    public void setStatus(int status) {
        this.status = status;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Object getData() {
        return data;
    }
    public void setData(Object data) {
        this.data = data;
    }
    
    public String toString() {
        return "DataResult [status=" + status + ", msg=" + msg + ", data=" + data + "]";
    }
}

(3).MD5加密類

在com.cdd包下新建一個包util。接着在com.cdd.util包下新建一個FirstUtil類，代碼如下：

package com.cdd.util;

import java.security.MessageDigest;
import org.apache.tomcat.util.codec.binary.Base64;

public class FirstUtil {

    public static String md5(String str) throws Exception{
        //獲取MD5加密器（該加密器還有SHA加密）
        MessageDigest md = MessageDigest.getInstance("MD5");
        byte[] input = str.getBytes();
        byte[] output = md.digest(input);
        
        //將md5處理的output字節數組基於Base64位編碼轉換為字符串
        String strMD5 = Base64.encodeBase64String(output);
        return strMD5;
    }
    
//    //測試下MD5加密方法
//    public static void main(String[] args) throws Exception{
//        String res = FirstUtil.md5("1234");
//        System.out.println(res);
//    }
}

5.開始寫控制層，業務層，持久層
通常我們認為：控制層是controller層、業務層是service層、持久層是dao層。

(1).dao層
首先在com.cdd包下再新建個包dao。接下來我們在com.cdd.dao包下編寫UserDao類，代碼如下：
注意：JdbcTemplate的queryForObject方法此第2個參數Class requiredType只能是基本數據類型的封裝類，如Integer、String，Character等基本類型，並且只能查到一個值。

package com.cdd.dao;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;

@Repository  //標注數據庫訪問組件
public class UserDao {

    @Autowired
    private JdbcTemplate jdbcTemplate;
    
    /**
     * 驗證用戶登錄
     * @param name  用戶登錄名稱
     * @param pwd   密碼
     * @return
     */
    public Integer checkLogin(String name, String pwd){
        String sql = "select count(*) from user where username=? and pwd=?";
        Object[] args = {name,pwd};
        Integer isExist = jdbcTemplate.queryForObject(sql, Integer.class, args);
        return isExist;
    }
}

(2).service層

在com.cdd包下新建service包，在com.cdd.service包下新建UserService接口，代碼如下：

package com.cdd.service;
import com.cdd.entity.DataResult;
public interface UserService {    
    /**
     * 登錄
     * @param name  登錄名稱
     * @param pwd   密碼
     * @return
     */
    public DataResult Login(String name, String pwd);
}

在com.cdd包下新建serviceImpl包，在com.cdd.serviceImpl包下新建UserServiceImpl類，代碼如下：

package com.cdd.serviceImpl;

import java.security.NoSuchAlgorithmException;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.cdd.dao.UserDao;
import com.cdd.entity.DataResult;
import com.cdd.entity.User;
import com.cdd.service.UserService;
import com.cdd.util.FirstUtil;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserDao userDao;
    
    public DataResult Login(String name, String pwd) {
        DataResult dataResult = new DataResult();
        //給密碼進行md5加密
        try {
            pwd = FirstUtil.md5(pwd);
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
            throw new RuntimeException(e.getMessage());
        
        }
        Integer isExist = userDao.checkLogin(name, pwd);
        if(isExist==null || isExist==0){
            dataResult.setStatus(-1);
            dataResult.setMsg("用戶名或密碼錯誤");
        }else{
            dataResult.setStatus(0);
            dataResult.setMsg("登錄成功");
        }
        return dataResult;
    }
}

(3)Controller層
在寫Controller層之前，我們為了給前端返回DataResutl結構的json數據，在這里需要引入jackson-annotations-2.9.5.jar、jackson-core-2.9.5.jar、jackson-databind-2.9.5.jar這三個包，如下圖：

 

 在com.cdd包下新建controller包，在com.cdd.controller包下新建UserController類，代碼如下：

package com.cdd.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.cdd.entity.DataResult;
import com.cdd.service.UserService;

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;
    
    @RequestMapping("/login.do")
    @ResponseBody
    public DataResult login(@RequestParam(name="name",required=true) String name, @RequestParam(name="pwd",required=true) String pwd){
        DataResult dataResult = userService.Login(name, pwd);
        return dataResult;
    }
}

(4).測試

這里我們用登錄名稱：cdd，密碼：1234，來做登錄測試，在瀏覽器輸入：
http://localhost:8080/spring_demo1/user/login.do?name=cdd&pwd=1234
按下回車，可以看到下圖：

 

 到這里我們的服務器端，即，后台代碼已經開發完成了。

二，前端頁面開發：編寫登錄頁面

1.引入js包

在WebContent/目錄下新建一個js文件夾，在該文件夾下引入juqery包jquery.min.js。如下圖：

 

2.在WebContent/目錄下新建一個頁面login.html

如果登錄成功，頁面跳轉到gitHub網站的登錄頁面，代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登錄頁面</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //給登錄按鈕綁定點擊事件
        $("#login").click(function(){
            var name = $("#name").val().trim();  //獲取用戶名稱
            var pwd = $("#pwd").val().trim();     //獲取密碼
            //發送ajax登錄請求
            $.ajax({
                url:"http://localhost:8080/spring_demo1/user/login.do",
                type:"post",
                data:{"name":name,"pwd":pwd},
                dataType:"json",
                success:function(result){
                    //如果登錄成功
                    if(result.status==0){
                        window.location.href="https://github.com/login";
                    }
                    alert(result.msg);
                },
                error:function(){
                    alert("登錄發生異常");
                }
            });
        });
    });
</script>
</head>
<body>
    用戶名：<input type="text" name="name" id="name"><br>
    密碼：<input type="password" name="pwd" id="pwd"><br>
    <input type="button" value="登錄" id="login">
    <hr>
</body>
</html>

4.測試

接下來在瀏覽器地址欄輸入：http://localhost:8080/spring_demo1/login.html
然后輸入用戶名：cdd，密碼：1234。如下圖：

 

 點擊登錄，會彈出登錄成功提示框，並且跳轉到gitHub的登錄頁面，如下圖：

 

到這里我們的就全部開發完了，針對一個業務，只要寫好接口文檔，前端工程師寫頁面，后台工程師寫服務器，各干各的，互不影響。

 轉自：https://blog.csdn.net/weixin_41968788/article/details/83590848