好久没写博客了,哈哈哈!
时至今日,互联网技术发生了很大变化,新技术不断涌现,新的开发模式也不断出现,传统的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的登录页面,如下图:
到这里我们的就全部开发完了,针对一个业务,只要写好接口文档,前端工程师写页面,后台工程师写服务器,各干各的,互不影响。