基于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