spring(五).基于Spring MVC的前后端分离开发

好久没写博客了，哈哈哈！
时至今日，互联网技术发生了很大变化，新技术不断涌现，新的开发模式也不断出现，传统的jsp页面，前后端混合开发的模式已经被大家弃用，往往高效率的开发模式被大家所追捧。
众所周知，为了提高提高效率，我们的分工越来越明确，前端开发工程师专门写前端页面，后台开发工程师专门写服务器。前面的文章中从很基础开始讲，一直都是jsp页面，前后端混合编程。当然了，为了跟上时代的步伐，我们也要学会前后端分离开发模式，今天就来说说这个，也是实现一个简单的登录功能。
不说废话，那我们开始吧！

一.后台服务器端开发：先搭建一个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的登录页面，如下图：

到这里我们的就全部开发完了，针对一个业务，只要写好接口文档，前端工程师写页面，后台工程师写服务器，各干各的，互不影响。