springboot前后端交互(小白教学)

这篇具有很好参考价值的文章主要介绍了springboot前后端交互(小白教学)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

1.添加路由守卫

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

springboot前后端交互(小白教学)

 springboot前后端交互(小白教学)

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

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

springboot前后端交互(小白教学)

 2.验证token

添加token一块有4步:

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

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

package com.ffyc.common;


import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Service;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

@Service
public class JWTUtil {

    /**
     * jwt 生成 token
     *
     * @param id
     * @param account * @return
     */
    public static String token(Integer id, String account) {
        String token = "";
        try {
            //过期时间 为 1970.1.1 0:0:0 至 过期时间 当前的毫秒值 + 有效时间
            Date expireDate = new Date(new Date().getTime() + 60 * 60 * 24 * 1000);//过期时间
            //秘钥及加密算法  加盐
            Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
            //设置头部信息
            Map<String, Object> header = new HashMap<>();
            header.put("typ", "JWT");//生成的类型
            header.put("alg", "HS256");//加密算法
            //携带 id,账号信息,生成签名
            token = JWT.create()
                    .withHeader(header)//头部
                    .withClaim("id", id)//用户id
                    .withClaim("account", account)//用户账号
                    .withExpiresAt(expireDate)
                    .sign(algorithm);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
        return token;
    }

    public static boolean verify(String token) {
        try {
            //验签
            Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
            JWTVerifier verifier = JWT.require(algorithm).build();
            DecodedJWT jwt = verifier.verify(token);
            return true;
        } catch (Exception e) {//当传过来的 token 如果有问题,抛出异常
            return false;
        }
    }

    /**
     * 获得 token 中 playload 部分数据,按需使用
     *
     * @param token
     * @return
     */
    public static DecodedJWT getTokenInfo(String token) {
        return JWT.require(Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE")).build().verify(token);
    }
}

将生成Token添加到admin对象中

springboot前后端交互(小白教学)

 2.前端接收,并保存

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

springboot前后端交互(小白教学)

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

在main.js中添加

springboot前后端交互(小白教学)

 4.后端拦截器验证token

后端token拦截器:

package com.ffyc.common;

import com.fasterxml.jackson.databind.json.JsonMapper;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

//Token 验证拦截器
public class Token implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        System.out.println("后端Token拦截器");
        String adminToken=request.getHeader("token");
        boolean res=JWTUtil.verify(adminToken);
        if(!res){
            CommonResult commonResult=new CommonResult(202,res,"token失效");
            JsonMapper jsonMapper=new JsonMapper();
            String json=  jsonMapper.writeValueAsString(commonResult);
            response.getWriter().print(json);
        }
        return res;
    }
}

注册拦截器:

package com.ffyc.common;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;

@Configuration
public class WebConfig implements WebMvcConfigurer{

	public void addInterceptors(InterceptorRegistry registry) {
		InterceptorRegistration inter =  registry.addInterceptor(new Token());
		inter.addPathPatterns("/admin/**"); //管理员需要拦截过滤地址
		inter.excludePathPatterns("/admin/loginCtl/login");//放行地址


		//放行行前台首页,文章详细信息等地址
		//inter.excludePathPatterns("/swagger*/**"); //放行swagger
		//inter.excludePathPatterns("/v2/**");//放行swagger
		//inter.excludePathPatterns("/webjars/**");//放行swagger
	}


}

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

springboot前后端交互(小白教学)

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

springboot前后端交互(小白教学)

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

 3.1  dao层

在dao层创建接口

package com.ffyc.dao;

import com.ffyc.model.Admin;
import org.springframework.stereotype.Repository;

@Repository//使spring创建并管理对象
public interface LoginDao {
    public Admin Login(Admin admin);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE
        mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--接口的添加-->
<mapper namespace="com.ffyc.dao.LoginDao">
    <select id="Login" resultType="Admin">
        select * from admin where account=#{account} and password=#{password}
    </select>
</mapper>

  3.2 model层

在model层创建admin类

package com.ffyc.model;

import lombok.Data;
import lombok.Getter;
import lombok.Setter;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
@Component
@Data//lombok 可以自动创建get set方法
@Getter
@Setter
public class Admin {
    private Integer id;
    private String account;
    private int password;
    private String token;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getAccount() {
        return account;
    }

    public void setAccount(String account) {
        this.account = account;
    }

    public int getPassword() {
        return password;
    }

    public void setPassword(int password) {
        this.password = password;
    }

    public String getToken() {
        return token;
    }

    public void setToken(String token) {
        this.token = token;
    }
}

  3.2 service层

  在service层写逻辑部分

package com.ffyc.service;

import com.ffyc.common.CommonResult;
import com.ffyc.common.JWTUtil;
import com.ffyc.dao.LoginDao;
import com.ffyc.model.Admin;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional
public class LoginService {
     @Autowired
     LoginDao loginDao;
     public Admin login(Admin admin){
        Admin a = loginDao.Login(admin);

         return a;

     }

}

3.4 web层

package com.ffyc.web;

import com.ffyc.common.CommonResult;
import com.ffyc.common.JWTUtil;
import com.ffyc.model.Admin;
import com.ffyc.service.LoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping(path= "/admin/loginCtl")
public class Controller {
    @Autowired
    LoginService loginService;
    @RequestMapping(path= "/login")
    //后端可以接收前端提交的json数据,但是必须是对象接收,必须要在参数前面添加@RequestBody
    public CommonResult login(@RequestBody Admin admin){
     Admin a = loginService.login(admin);
        CommonResult commonResult=null;
        if(a!=null) {
            a.setToken(JWTUtil.token(a.getId(),a.getAccount()));
            commonResult = new CommonResult(200, a, "登录成功");//可以对创建方法进封装
        }else{
            commonResult = new CommonResult(201, a, "账号密码错误");//可以对创建方法进封装
        }
     return commonResult;
    }

}

springboot前后端交互(小白教学)

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

springboot前后端交互(小白教学)文章来源地址https://www.toymoban.com/news/detail-459233.html

 4.配置application.yml

#配置内置服务器的端口号
server:
 port: 8080

#spring相关的配置
spring:
  #配置数据库的连接信息,生成默认的数据源对象,生成JdbcTemplate,事务管理功能进行初始化
 datasource:
   url: jdbc:mysql://127.0.0.1:3306/map?serverTimezone=Asia/Shanghai
   username: root
   password: root
   driver-class-name: com.mysql.cj.jdbc.Driver
   type: com.alibaba.druid.pool.DruidDataSource #指定数据源类型,还需要创建其对象
   initialSize: 5 #初始化时建立物理连接的个数   数据库连接池相关的配置
   minIdle: 1 #最小连接池数量
   maxActive: 20 #最大连接池数量

#mybatis配置  创建SqlsessionFactory
mybatis:
   type-aliases-package: com.ffyc.model
   mapper-locations: classpath:mappers/*Mappers.xml
   configuration: #mybatis settings配置
     map-underscore-to-camel-case: true
     cache-enabled: true

到了这里,关于springboot前后端交互(小白教学)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Gpt微信小程序搭建的前后端流程 - 前端小程序部分-2.确定交互所需的后端API(二)

    Gpt微信小程序搭建的前后端流程 - 前端小程序部分-2.确定交互所需的后端API(二) 参考微信小程序- 小柠AI智能聊天 ,可自行先体验。 根据上一节的小程序静态页面设计,需要从后端获取数据的主要4个点: 登录流程; 获取今日已提问次数; 获取聊天记录; 发起聊天和响应。

    2024年02月13日
    浏览(43)
  • springboot+vue 前后端交互实现(mysql+springboot+vue)

    编译器:vscode、idea、mysql5.7 技术:springboot+mybatis+mysql+lombok+vue 实现内容:实现前后端数据交互。 实现效果: 因为vue和springboot是前后端分离的,所以在开始交互前首先需要解决跨域问题,可以在前端做也可以在后端加配置类,这里我是在后端加的CORS策略配置类。 还需要在前

    2024年02月17日
    浏览(41)
  • 若依ruoyi前端vue使用jsencrypt.js加密后端java进行RSA解密(前后端交互RSA加解密)

    目录 1、前后端RSA加解密实现思路 2、前端 3、后端 按照约定来说公钥一般用来加密,大家都可以获取得到,私钥用来解密,当然你也可以混着用,以下示例是前端通过加密,后端解密.  -----BEGIN PUBLIC KEY----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ81AMIIBCgKCAQEA1+05vAf7m5NcLNLkRtsm gp+QdzcW6MVdayGTGBJG0v

    2024年02月06日
    浏览(78)
  • 后端SpringBoot+前端Vue前后端分离的项目(二)

    前言:完成一个列表,实现表头的切换,字段的筛选,排序,分页功能。 目录 一、数据库表的设计 二、后端实现 环境配置 model层  mapper层 service层  service层单元测试 controller层 三、前端实现 interface接口 接口api层 主要代码 效果展示 引入mybatis-plus依赖 MerchandiseDetailsService文

    2024年02月09日
    浏览(61)
  • 后端SpringBoot+前端Vue前后端分离的项目(一)

    前言:后端使用SpringBoot框架,前端使用Vue框架,做一个前后端分离的小项目,需求:实现一个表格,具备新增、删除、修改的功能。 目录 一、数据库表的设计 二、后端实现 环境配置 数据处理-增删改查 model层 mapper层 XML配置 Service层 controller层 单元测试 三、前后端交互 配置

    2024年02月10日
    浏览(72)
  • SpringBoot +Vue3 简单的前后端交互

    前端:Vue3 创建项目: npm create vue@latest cd your-project-name npm install npm run dev 项目结构图如下: 1、查看入口文件内容:main.js 代码如下: 在main.js中,首先引入了Vue组件和APP根组件 2、APP跟组件代码如下: 3、路由文件配置:router/index.js 代码如下: 4、Axios请求公共方法:utils/ax

    2024年02月10日
    浏览(38)
  • Springboot+vue的教学资料管理系统(有报告)。Javaee项目,springboot vue前后端分离项目

    Springboot+vue的教学资料管理系统(有报告)。Javaee项目,springboot vue前后端分离项目 本文设计了一个基于Springboot+vue的前后端分离的教学资料管理系统,采用M(model)V(view)C(controller)三层体系结构,通过Spring + SpringBoot + Mybatis+Vue+Maven来实现。MySQL数据库作为系统数据储存平

    2024年02月04日
    浏览(56)
  • 115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】

    在SpringBoot+Vue的整合项目中我们使用的编译软件分别有: Vscode来编写Vue脚手架和IDEA来编写SpringBoot。vue脚手架是3.0以上的。 1.App.vue 这里的router-view一定要写出来,因为我们最终呈现到App.vue这个组件中去的 2.src/pages/Login.vue 将前端数据传递给后端,后端并响应的操作 3.src/pages/I

    2024年02月12日
    浏览(38)
  • 实现vue项目和springboot项目前后端数据交互

    太高版本的win7不支持 这里安装node-v12.16.2-x64.msi,指定安装位置后直接按下一步就可以。 npm是node内置的工具 这里配置npm的镜像cnpm(提高下载速度,以后用到npm的命令都可以用cnpm命令替换)不指定cnpm版本使用如下命令会报错: 错误信息: 检查错误,参照网上的对应版本图,

    2024年04月25日
    浏览(38)
  • (十七)前后端分离的Echart图表--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建

    任务十 VUE侧边菜单栏导航 中我们留了一个home.vue页面一直没有做,它还是这样的 一般情况home就是对整个系统的一些核心数据的图表展示。这次任务,我们将使用echarts图表工具,简单实现用户统计数据展示。通过本次任务,大家能够: (1)了解Echart图表工具的使用方法;

    2024年02月03日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包