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
位置如下
该配置文件内容如下：
(3).编写web.xml文件，配置Servlet初始化时加载spring容器
springMVC
org.springframework.web.servlet.DispatcherServlet
contextConfigLocation
classpath:applicationContext.xml
1
springMVC
*.do
spring_demo1
index.html
index.htm
index.jsp
default.html
default.htm
default.jsp
(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网站的登录页面，代码如下：
登录页面
用户名：
密码：
4.测试
接下来在浏览器地址栏输入：http://localhost:8080/spring_demo1/login.html
然后输入用户名：cdd，密码：1234。如下图：
点击登录，会弹出登录成功提示框，并且跳转到gitHub的登录页面，如下图：
到这里我们的就全部开发完了，针对一个业务，只要写好接口文档，前端工程师写页面，后台工程师写服务器，各干各的，互不影响。