SpringBoot前后端交互

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

1.SpringBoot概述:

          Spring Boot 是在 spring 框架基础之上开发的框架, 其设计目的是用来简化应用的初始搭建以及开发过程。虽然 spring 的组件代码是轻量级的,但它的配置却是重量级的, 即使 spring 引入了注解功能,但是仍然需要编写大量的模板化配置文件. 项目的依赖管理也是一件耗时耗力的事情,在环境搭建时,需要分析要导入大量库的坐标,而且还需要分析导入与之有依赖关,一旦选错依赖的版本,随之而来的不兼容问题就会严重阻碍项目的开发进度,    Spirng Boot 本身并不提供 Spring 框架的核心特性以及扩展功能,只是用于快速、敏捷地开发新一代基于 Spring 框架的应用程序。也就是说,它并不是用来替代 Spring 的解决方案,而是和 Spring 框架紧密结合用于提升 Spring 开 发者体验的工具. 

2.交互

        1.前端发送一个登陆请求

 submitForm(form) {
         this.$refs[form].validate((valid) => {
           if (valid) {
			   this.$http.post("admin/loginCtl/login",this.form).then((resp)=>{

2.后端根据前端地址接受请求

@RequestMapping(path = "/admin/loginCtl")
public class LoginController {
 @RequestMapping(path = "/login")
    public CommonResult login(@RequestBody Admin admin2){

(1)跨域的配置

@Configuration
加入@Configuration 注解,表明这就是一个配置类。
@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1,允许任何来源
        corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
        //2,允许任何请求头
        corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
        //3,允许任何方法
        corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);
        //4,允许凭证
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}

(2)验证token(token拦截器)

先进行配置

@Configuration
public class WebConfig implements WebMvcConfigurer{

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

再验证token,  登录时前端没有token,所以要对登录请求放行,登录成功后生成token再返回给前端保存在请求头中,再次交互时进行验证

public class TokenInterceptor implements HandlerInterceptor {

    //预处理
    //当请求经过映射处理器检测对应的控制器是存在,判断该请求可以进入拦截器,执行调用
    //返回true,继续向下执行
    //返回false,请求不在向下执行
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("token");
        boolean res = JWTUtil.verify(token);
        if (!res){
            CommonResult commonResult = new CommonResult(202,"token验证失效");
            JsonMapper jsonMapper = new JsonMapper();
            String json = jsonMapper.writeValueAsString(commonResult);
            response.getWriter().print(json);
        }
        return res;
    }
}

(3)application.yml yml 是 YAML(YAML Ain’t Markup Language)语言的文件,以数据为中心,时springboot的配置文件

server:
  port: 8080
#spring相关配置
spring:
  #配置数据库连接信息,生成默认的数据源队形,生成jdbcTemplate,事务管理功能初始化
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/ssmdb?serverTimezone=Asia/Shanghai
    username: root
    password: 12121212
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource #指定数据源类型,还需要创建对象
    initialSize: 5 #配置数据库连接池相关的配置
    maxActive: 20



  main:
    allow-circular-references: true  #开始支持spring循环依赖
#myatis配置  创建sqlsessionFactory
  mvc:
    pathmatch:
      matching-strategy: ant_path_matcher
mybatis:
    type-aliases-package: com.ffyc.news.model
    mapper-locations: classpath:mappers/*Mapper.xml
    configuration: #mybatis配置  setting配置
         map-underscore-to-camel-case: true
         cache-enabled: true
         log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

由Druid数据源来进行读取

/*
 @Configuration  配置注解  表示此类是springBoot项目中一个配置类,sprngboot启动时会扫描
*/
@Configuration
public class DruidDataSourceConfig {

	/*
	   @Bean  == <bean  id=""  class="">  作用在方法上,方法中会产生一个对象,最终把此对象交给spring容器
	 */
	@Bean
	@ConfigurationProperties(prefix = "spring.datasource")
	public DataSource druid() {
		//创建对象,从yml配置文件读值,赋值
		DruidDataSource  dataSource = new DruidDataSource();
		//dataSource.setInitialSize();
		return dataSource;//此方法产生的当对象最终返回并交给spring容器去管理
	}
}

3.交互完成后将结果返回给前端

前端将返回的数据接收并进行相应的处理,其中携带的token也被aoixs保存在请求头中

//axios 请求拦截 
axios.interceptors.request.use(config =>{
	//向请求头中添加一个自定义请求头
	config.headers.token = sessionStorage.getItem('token'); 
	   return config; 
})

3.完整的登录前后端交互

1.前端发送登录请求,将用户输入的账号密码发送到后端

  methods: {
       submitForm(form) {
         this.$refs[form].validate((valid) => {
           if (valid) {
			   this.$http.post("admin/loginCtl/login",this.form).then((resp)=>{
				   console.log(resp);
				   if(resp.data.code==200){
					   //sessionStorage.setItem浏览器提供的一个会话级别的存储空间,浏览器关闭后立刻清除
					   sessionStorage.setItem("account",resp.data.data.account);
					   sessionStorage.setItem("token",resp.data.data.token);
					   //localStorage.setItem("key","value");//长久保存
					   this.$router.push("/main");
				   }else if(resp.data.code==201){
					   this.$message({message:resp.data.message,type:'warning'});
				   }else{
					   this.$message.error(resp.data.message);
				   }
			   })
              
           } 
         });
       },
       resetForm(form) {
         this.$refs[form].resetFields();
       }
     }

2.web层(接收.处理,响应)

@RestControllerAdvice
@RestController
@RequestMapping(path = "/admin/loginCtl")
public class LoginController {

    //static Logger logger = LoggerFactory.getLogger(LoginController.class);
    @Autowired
    LoginService loginService;
    @RequestMapping(path = "/login")
    public CommonResult login(@RequestBody Admin admin2){
        //将日志信息写入到一个文件中,长久保存
       // logger.debug("进入到后端登录功能:account={},password={}",admin2.getAccount(),admin2.getPassword());
        admin2.setPassword(DigestUtils.md5DigestAsHex(admin2.getPassword().getBytes()));
        Admin admin = loginService.login(admin2);
       // logger.debug("登录成功:account={},password={}",admin.getAccount(),admin.getPassword());
        if(admin!=null){
            CommonResult commonResult = new CommonResult(admin,200,"保存成功");
            return commonResult;
        }
        CommonResult commonResult1 = new CommonResult(null,201,"保存失败");
        return commonResult1;
    }

3.service层(业务上的一些处理)

@Service(value = "loginService")
@Transactional
public class LoginService {

    @Resource
    LoginDao loginDao;

    public Admin login(Admin admin2){
        Admin admin1 = loginDao.login(admin2);
        String token = new JWTUtil().token(admin1.getId(),admin1.getAccount(),admin1.getType());
        admin1.setToken(token);
        return admin1;
    }

    public List<Menu> findmenus(String token) {
        DecodedJWT decodedJWT = JWTUtil.getTokenInfo(token);
        Integer id = decodedJWT.getClaim("id").asInt();
        Integer type = decodedJWT.getClaim("type").asInt();
        List<Menu> list = loginDao.findmenus(id,type);
        return list;
    }
}

4.model类(封装一些用户的信息或管理员的信息)

@ApiModel(value = "管理员实体类",description = "管理员实体类2")
@Data
public class Admin {
    @ApiModelProperty(value = "管理员主键")
    private Integer id;
    private String account;
    private String password;
    private Integer type;
    private String token;
    private String gender;
    private String phone;
    private Admin admin;//操作人
    private int pageNum;//当前页数
    private int pageSize;//页数大小
    @JsonFormat(pattern = "yyyy-MM-dd  HH:mm:ss", timezone = "GTM+8")
    private Date operTime;
    private List<Role> roles;
    private Integer[] roleIds;
}

5.dao层(与数据库进行交互)文章来源地址https://www.toymoban.com/news/detail-424153.html

@Repository(value = "loginDao")
   public interface LoginDao {

    public Admin login(Admin admin);

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

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

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

相关文章

  • springboot+vue 前后端交互实现(mysql+springboot+vue)

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

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

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

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

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

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

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

    2024年02月10日
    浏览(69)
  • 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日
    浏览(37)
  • 实现vue项目和springboot项目前后端数据交互

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

    2024年04月25日
    浏览(36)
  • 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日
    浏览(37)
  • OpenHarmony:使用网络组件axios与Spring Boot进行前后端交互

    流程图: 前端请求函数 这两个函数是使用axios库发起HTTP GET请求的函数,用于与服务器进行通信 服务器端点: http://192.168.211.1:8090/test/1 这是我本机的ip地址和springboot运行端口,使用在windows终端输入ipconfig可查看 返回值: 该函数返回一个Promise,该Promise在请求成功时将包含

    2024年01月22日
    浏览(52)
  • 全面解析若依框架(springboot-vue前后分离--后端部分)

    前端启动 后端启动 创建数据库ry-vue,导入ry_2021xxxx.sql,quartz.sql,加载好依赖直接启动。 后端技术 SpringBoot Spring Security JWT MyBatis Druid Fastjson 分页实现 导入导出 上传下载(框架使用的简单,不做讲解) 权限控制 事务管理(这里使用@Transactional,不做讲解,具体和Spring的8种事务

    2024年01月16日
    浏览(55)
  • 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 后端

    配套视频地址:https://www.bilibili.com/video/BV1dG4y1T7yp/ 如果您需要原版笔记,请up喝口水,可以上我的淘宝小店 青菜开发资料 购买,或点击下方链接直接购买: 源码+PDF版本笔记 源码+原始MD版本笔记 感谢支持! 创建springboot项目:2.7.8 pom依赖 yml 测试 编写代码生成器 启动类加注

    2024年02月04日
    浏览(53)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包