springboot前后端交互小白教学

       在上次前后端交互，我们使用的是最基本的HTML Servlet的组合，比较基础，今天我们来讲一讲Html Springboot框架，前后端交互实现更为简便，大大降低了我们开发人员在代码上面所花费的时间，那今天让我们一探究竟吧。

1.添加路由守卫

      在前端我们在index.js中添加了路由守卫

 在网址中直接去http://localhost:8081/#/main

由于路由守卫，我们不能直接进入main页面中，自动给我们跳转到登录页面中

 2.验证token

添加token一块有4步：

1. 登录成功后，后端生成token
2. 前端接收，并保存
3. 前端拦截器向后端发送
4. 后端拦截器验证token

1. 登录成功后，后端生成token

1.  
   package com.ffyc.common;
2.  
    
3.  
    
4.  
   import com.auth0.jwt.JWT;
5.  
   import com.auth0.jwt.JWTVerifier;
6.  
   import com.auth0.jwt.algorithms.Algorithm;
7.  
   import com.auth0.jwt.interfaces.DecodedJWT;
8.  
   import org.springframework.context.annotation.Configuration;
9.  
   import org.springframework.stereotype.Service;
10.  
     
11.  
    import java.util.Date;
12.  
    import java.util.HashMap;
13.  
    import java.util.Map;
14.  
     
15.  
    @Service
16.  
    public class JWTUtil {
17.  
     
18.  
    /**
19.  
    * jwt 生成 token
20.  
    *
21.  
    * @param id
22.  
    * @param account * @return
23.  
    */
24.  
    public static String token(Integer id, String account) {
25.  
    String token = "";
26.  
    try {
27.  
    //过期时间 为 1970.1.1 0:0:0 至 过期时间 当前的毫秒值 有效时间
28.  
    Date expireDate = new Date(new Date().getTime() 60 * 60 * 24 * 1000);//过期时间
29.  
    //秘钥及加密算法 加盐
30.  
    Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
31.  
    //设置头部信息
32.  
    Map<String, Object> header = new HashMap<>();
33.  
    header.put("typ", "JWT");//生成的类型
34.  
    header.put("alg", "HS256");//加密算法
35.  
    //携带 id，账号信息，生成签名
36.  
    token = JWT.create()
37.  
    .withHeader(header)//头部
38.  
    .withClaim("id", id)//用户id
39.  
    .withClaim("account", account)//用户账号
40.  
    .withExpiresAt(expireDate)
41.  
    .sign(algorithm);
42.  
    } catch (Exception e) {
43.  
    e.printStackTrace();
44.  
    return null;
45.  
    }
46.  
    return token;
47.  
    }
48.  
     
49.  
    public static boolean verify(String token) {
50.  
    try {
51.  
    //验签
52.  
    Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
53.  
    JWTVerifier verifier = JWT.require(algorithm).build();
54.  
    DecodedJWT jwt = verifier.verify(token);
55.  
    return true;
56.  
    } catch (Exception e) {//当传过来的 token 如果有问题,抛出异常
57.  
    return false;
58.  
    }
59.  
    }
60.  
     
61.  
    /**
62.  
    * 获得 token 中 playload 部分数据,按需使用
63.  
    *
64.  
    * @param token
65.  
    * @return
66.  
    */
67.  
    public static DecodedJWT getTokenInfo(String token) {
68.  
    return JWT.require(Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE")).build().verify(token);
69.  
    }
70.  
    }

将生成Token添加到admin对象中

 2.前端接收，并保存

在main.js中添加验证token字段

3. 前端拦截器向后端发送

在main.js中添加

 4.后端拦截器验证token

后端token拦截器：

1.  
   package com.ffyc.common;
2.  
    
3.  
   import com.fasterxml.jackson.databind.json.JsonMapper;
4.  
   import org.springframework.web.servlet.HandlerInterceptor;
5.  
    
6.  
   import javax.servlet.http.HttpServletRequest;
7.  
   import javax.servlet.http.HttpServletResponse;
8.  
    
9.  
   //Token 验证拦截器
10.  
    public class Token implements HandlerInterceptor {
11.  
    @Override
12.  
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
13.  
    System.out.println("后端Token拦截器");
14.  
    String adminToken=request.getHeader("token");
15.  
    boolean res=JWTUtil.verify(adminToken);
16.  
    if(!res){
17.  
    CommonResult commonResult=new CommonResult(202,res,"token失效");
18.  
    JsonMapper jsonMapper=new JsonMapper();
19.  
    String json= jsonMapper.writeValueAsString(commonResult);
20.  
    response.getWriter().print(json);
21.  
    }
22.  
    return res;
23.  
    }
24.  
    }

注册拦截器：

1.  
   package com.ffyc.common;
2.  
    
3.  
   import org.springframework.context.annotation.Configuration;
4.  
   import org.springframework.web.servlet.config.annotation.*;
5.  
    
6.  
   @Configuration
7.  
   public class WebConfig implements WebMvcConfigurer{
8.  
    
9.  
   public void addInterceptors(InterceptorRegistry registry) {
10.  
    InterceptorRegistration inter = registry.addInterceptor(new Token());
11.  
    inter.addPathPatterns("/admin/**"); //管理员需要拦截过滤地址
12.  
    inter.excludePathPatterns("/admin/loginCtl/login");//放行地址
13.  
     
14.  
     
15.  
    //放行行前台首页,文章详细信息等地址
16.  
    //inter.excludePathPatterns("/swagger*/**"); //放行swagger
17.  
    //inter.excludePathPatterns("/v2/**");//放行swagger
18.  
    //inter.excludePathPatterns("/webjars/**");//放行swagger
19.  
    }
20.  
     
21.  
     
22.  
    }

在网址中直接搜索127.0.0.1:8080/admin/loginCtl/test

 拦截器会进行验证，没有Token,返回CommomResult

 3.完成最基本的登录功能

 3.1  dao层

在dao层创建接口

1.  
   package com.ffyc.dao;
2.  
    
3.  
   import com.ffyc.model.Admin;
4.  
   import org.springframework.stereotype.Repository;
5.  
    
6.  
   @Repository//使spring创建并管理对象
7.  
   public interface LoginDao {
8.  
   public Admin Login(Admin admin);
9.  
   }

1.  
   <?xml version="1.0" encoding="UTF-8"?>
2.  
   <!DOCTYPE
3.  
   mapper
4.  
   PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
5.  
   "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
6.  
   <!--接口的添加-->
7.  
   <mapper namespace="com.ffyc.dao.LoginDao">
8.  
   <select id="Login" resultType="Admin">
9.  
   select * from admin where account=#{account} and password=#{password}
10.  
    </select>
11.  
    </mapper>

  3.2 model层

在model层创建admin类

1.  
   package com.ffyc.model;
2.  
    
3.  
   import lombok.Data;
4.  
   import lombok.Getter;
5.  
   import lombok.Setter;
6.  
   import org.springframework.beans.factory.annotation.Value;
7.  
   import org.springframework.stereotype.Component;
8.  
   @Component
9.  
   @Data//lombok 可以自动创建get set方法
10.  
    @Getter
11.  
    @Setter
12.  
    public class Admin {
13.  
    private Integer id;
14.  
    private String account;
15.  
    private int password;
16.  
    private String token;
17.  
     
18.  
    public Integer getId() {
19.  
    return id;
20.  
    }
21.  
     
22.  
    public void setId(Integer id) {
23.  
    this.id = id;
24.  
    }
25.  
     
26.  
    public String getAccount() {
27.  
    return account;
28.  
    }
29.  
     
30.  
    public void setAccount(String account) {
31.  
    this.account = account;
32.  
    }
33.  
     
34.  
    public int getPassword() {
35.  
    return password;
36.  
    }
37.  
     
38.  
    public void setPassword(int password) {
39.  
    this.password = password;
40.  
    }
41.  
     
42.  
    public String getToken() {
43.  
    return token;
44.  
    }
45.  
     
46.  
    public void setToken(String token) {
47.  
    this.token = token;
48.  
    }
49.  
    }

  3.2 service层

  在service层写逻辑部分

1.  
   package com.ffyc.service;
2.  
    
3.  
   import com.ffyc.common.CommonResult;
4.  
   import com.ffyc.common.JWTUtil;
5.  
   import com.ffyc.dao.LoginDao;
6.  
   import com.ffyc.model.Admin;
7.  
   import org.springframework.beans.factory.annotation.Autowired;
8.  
   import org.springframework.stereotype.Service;
9.  
   import org.springframework.transaction.annotation.Transactional;
10.  
     
11.  
    @Service
12.  
    @Transactional
13.  
    public class LoginService {
14.  
    @Autowired
15.  
    LoginDao loginDao;
16.  
    public Admin login(Admin admin){
17.  
    Admin a = loginDao.Login(admin);
18.  
     
19.  
    return a;
20.  
     
21.  
    }
22.  
     
23.  
    }

3.4 web层

1.  
   package com.ffyc.web;
2.  
    
3.  
   import com.ffyc.common.CommonResult;
4.  
   import com.ffyc.common.JWTUtil;
5.  
   import com.ffyc.model.Admin;
6.  
   import com.ffyc.service.LoginService;
7.  
   import org.springframework.beans.factory.annotation.Autowired;
8.  
   import org.springframework.web.bind.annotation.RequestBody;
9.  
   import org.springframework.web.bind.annotation.RequestMapping;
10.  
    import org.springframework.web.bind.annotation.ResponseBody;
11.  
    import org.springframework.web.bind.annotation.RestController;
12.  
     
13.  
    @RestController
14.  
    @RequestMapping(path= "/admin/loginCtl")
15.  
    public class Controller {
16.  
    @Autowired
17.  
    LoginService loginService;
18.  
    @RequestMapping(path= "/login")
19.  
    //后端可以接收前端提交的json数据，但是必须是对象接收，必须要在参数前面添加@RequestBody
20.  
    public CommonResult login(@RequestBody Admin admin){
21.  
    Admin a = loginService.login(admin);
22.  
    CommonResult commonResult=null;
23.  
    if(a!=null) {
24.  
    a.setToken(JWTUtil.token(a.getId(),a.getAccount()));
25.  
    commonResult = new CommonResult(200, a, "登录成功");//可以对创建方法进封装
26.  
    }else{
27.  
    commonResult = new CommonResult(201, a, "账号密码错误");//可以对创建方法进封装
28.  
    }
29.  
    return commonResult;
30.  
    }
31.  
     
32.  
    }

 加这个标签之后，前端就不需要再添加JsonString的方法

 4.配置application.yml

1.  
   #配置内置服务器的端口号
2.  
   server:
3.  
   port: 8080
4.  
    
5.  
   #spring相关的配置
6.  
   spring:
7.  
   #配置数据库的连接信息，生成默认的数据源对象，生成JdbcTemplate,事务管理功能进行初始化
8.  
   datasource:
9.  
   url: jdbc:mysql://127.0.0.1:3306/map?serverTimezone=Asia/Shanghai
10.  
    username: root
11.  
    password: root
12.  
    driver-class-name: com.mysql.cj.jdbc.Driver
13.  
    type: com.alibaba.druid.pool.DruidDataSource #指定数据源类型，还需要创建其对象
14.  
    initialSize: 5 #初始化时建立物理连接的个数 数据库连接池相关的配置
15.  
    minIdle: 1 #最小连接池数量
16.  
    maxActive: 20 #最大连接池数量
17.  
     
18.  
    #mybatis配置 创建SqlsessionFactory
19.  
    mybatis:
20.  
    type-aliases-package: com.ffyc.model
21.  
    mapper-locations: classpath:mappers/*Mappers.xml
22.  
    configuration: #mybatis settings配置
23.  
    map-underscore-to-camel-case: true
24.  
    cache-enabled: true

这篇好文章是转载于：学新通技术网