SSM前后端分离技术

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


前言

本篇记录一下使用前后端分离来开发SSM项目。


一、前后端分离技术和跨域

目前,前后端分离项目早已占据市场的主流开发方式。因为它能把web端的代码和java业务实现的代码完全分离开来,使得协同开发变得更加便捷。即,前端工程师和后端工程师只需要预先规定好统一的API,就可以同步开发,大大降低项目的开发周期。
实现前后端分离需要解决的文体就是跨域传输。

我们都知道,在SSM项目中我们使用JSP来访问Servlet接口,实现前后端的交互,归根结底还是在同一个域进行传输,即端口号是相同的。但是在使用前后端分离开发的时候,我们需要在不同的域中间进行数据传输。最直观的就是,后端我们一般使用8080端口,前端可能会使用5500端口,这就意味着,前端和后端处在不同的域内。

跨域传输的根本原因是浏览器端的一种保护程序的机制。当前端域向后端域发送了请求,一般情况下,会有正常的响应数据。但是由于浏览器的保护机制,使得我们无法使用这些响应数据。浏览器需要的是后端必须返回给它一个允许跨域的请求头,否则,返回的数据就无法呈现在前端。那么怎么让后端返回的数据携带正确的请求头就是我们需要解决的问题。

二、两种不同的实现方案

1.使用注解实现简单请求的跨域传输

代码如下:

@Controller
@RequestMapping( "/login")
@CrossOrigin("*")
public class LoginController {
    //自动注入业务层
    @Autowired
    private LoginService service;

    @RequestMapping(value = "loginVerify",method = RequestMethod.POST)
    @ResponseBody
    public ResultLayUi<User> login(String username, String password, HttpServletRequest request){
            createLoginSession(username,request);
        return service.verifyLogin(username,password);
    }
}

我们可以使用@CrossOrigin注解来实现一个临时的跨域传输访问。注解后边的括号可以填写允许跨域访问的域,例如@CrossOrigin(" * ")表示,允许所有的域访问。@CrossOrigin(“http://127.0.0.1:5500/login.html”)允许该IP访问。但是这种解决方案只适合简单请求。不适合复杂请求。

2.通过设置请求头和参数实现复杂请求的跨域传输

通过注解,我们只能实现简单的跨域请求,但无法实现复杂的跨域请求。但是我们可以通过在controller中设置请求头和请求参数来实现复杂请求的跨域传输。代码如下:

@Controller
@RequestMapping( "/login")
//@CrossOrigin("*")
public class LoginController {
    //自动注入业务层
    @Autowired
    private LoginService service;

    @RequestMapping(value = "loginVerify",method = RequestMethod.POST)
    @ResponseBody
    public ResultLayUi<User> login(String username, String password, HttpServletRequest request){

 String origin = request.getHeader("Origin");
        // 允许的跨域
        response.setHeader("Access-Control-Allow-Origin",origin);
        // 允许携带Cookie
        response.setHeader("Access-Control-Allow-Credentials","true");
        // 允许的请求头  预检请求需要这个设置
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization,Access-Token,token");
        response.setHeader("Access-Control-Expose-Headers", "*");//响应客户端的头部 允许携带Token 等等
        response.setHeader("Access-Control-Max-Age", "3600");   // 预检请求的结果缓存时间
        if (request.getMethod().equals("OPTIONS")){
            return false;
        }
            
        return service.verifyLogin(username,password);
    }
}

通过这种方式,我们可以实现跨域请求。但是我们需要在每一个Controller方法中都设置这些代码。

3.将跨域解决方案的代码写进拦截器,或者过滤器实现跨域。

上边说到,我们需要在每一个controller中都配置如上代码,造成大量的代码冗余。我们可以把这些代码放进拦截器或者过滤器来实现一个封装的效果。

拦截器

package com.glls.java2212.interceptor;

import org.springframework.web.servlet.HandlerInterceptor;

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

/**
 * @date 2022/10/10
 * @desc  拦截器   一个临时的  跨域解决方案
 */
public class MyInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        String origin = request.getHeader("Origin");
        // 允许的跨域
        response.setHeader("Access-Control-Allow-Origin",origin);
        // 允许携带Cookie
        response.setHeader("Access-Control-Allow-Credentials","true");
        // 允许的请求头  预检请求需要这个设置
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization,Access-Token,token");
        response.setHeader("Access-Control-Expose-Headers", "*");//响应客户端的头部 允许携带Token 等等
        response.setHeader("Access-Control-Max-Age", "3600");   // 预检请求的结果缓存时间
        if (request.getMethod().equals("OPTIONS")){
            return false;
        }
        return true;

    }
}

过滤器

package com.glls.java2212.filter;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @date 2022/10/10
 * @desc
 */
@Component
@WebFilter(urlPatterns = "/*", filterName = "CorsFilter")
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;

        String origin = request.getHeader("Origin");

        // 允许的跨域
        response.setHeader("Access-Control-Allow-Origin",origin);
        // 允许携带Cookie
        response.setHeader("Access-Control-Allow-Credentials","true");
        //
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,content-type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization,Access-Token,token");
        response.setHeader("Access-Control-Expose-Headers", "*");//响应客户端的头部 允许携带Token 等等
        response.setHeader("Access-Control-Max-Age", "3600");   // 预检请求的结果缓存时间
        //
        if (!request.getMethod().equals("OPTIONS")){
            //非 预检请求 放行 ,预检请求  不放行  预检请求 直接响应允许跨域的信息即可 无需访问到后台接口
            filterChain.doFilter(request, response);
        }
    }
}


总结

跨域请求的方案有很多,此处只是简单的介绍了两种。分别对应简单的请求跨域和复杂的请求跨域。文章来源地址https://www.toymoban.com/news/detail-457643.html

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

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

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

相关文章

  • SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--具体功能实现【三】

    需求分析/图解 思路分析 完成后台代码从dao - serivce - controller , 并对每层代码进行测试, 到controller 这一层,使用Postman 发送http post 请求完成测试 完成前端代码, 使用axios 发送ajax(json 数据)给后台, 实现添加家居信息 代码实现 创建srcmainjavacomnlcfurnsserviceFurnService.java 和src

    2024年02月14日
    浏览(43)
  • 前后端分离------后端创建笔记(11)用户删除

     1.1 首先做一个删除的功能接口,第一步先来到后端,做一个删除的接口  3.1这里给他调一下删除方法,用下面这个 3.2 接口准备好了,但是这里存在了一个问题,它真的会把数据给改掉 9.1 10.1   12.1   15.1  18.1 在main.js中定义出来   25.1 把代码拿过来 27.1 删除成功了

    2024年02月12日
    浏览(52)
  • 前后端分离------后端创建笔记(07)表单验证

    4.1 定义一个方法  4.2 这里表单的数据在哪里,就是这个 4.3  this.userForm,这里能够让数据清空 6.1 有两种常规的验证,第一种是非空验证,另一种长度验证,这一种非常普遍,因此在ELEMTUI中做了一些封装,因此我们直接拿过来用就行,还有一种情况,像电子邮件,这种情况就

    2024年02月13日
    浏览(44)
  • SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--搭建Vue 前端工程[二]

    需求分析 效果图 思路分析 使用Vue3+ElementPlus 完成。 代码实现 修改ssm_vuesrcApp.vue 成如下形式, 会删除部分用不上的代码,增加 修改ssm_vuesrcviewsHomeView.vue , 删除ssm_vuesrccomponentsHelloWorld.vue 创建ssm_vuesrccomponentsHeader.vue 修改ssm_vuesrcApp.vue , 引入Header 组件 创建全局的global

    2024年02月13日
    浏览(45)
  • ssm+vue的论文管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

    ssm+vue的论文管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 采用M(model)V(view)C(controller)三层体系结构,通过 Spring + SpringMvc+ Mybatis+Vue+Maven 来实现。

    2024年02月05日
    浏览(50)
  • SSM+Shiro安全框架整合(完成安全认证--登录+权限授权)+ssm整合shiro前后端分离

    目录 1.搭建SSM框架  1.1.引入相关的依赖 1.2. spring配置文件 1.3. web.xml配置文件 1.4.配置Tomcat并启动 2.ssm整合shiro---认证功能  (1).引入依赖 (2).修改spring配置文件 (3).修改web.xml文件 (4).新建login.jsp(登录页面) (5).新建success.jsp(登录成功后跳转到此) (6).创建User实体类 (7).创建LoginVo

    2024年02月15日
    浏览(46)
  • SSM项目前后端分离+IDEA运行环境(含前端源码)(个人博客系统)

    目录  后端项目环境配置 1、创建一个SpringBoot项目,添加MyBatis框架和数据库MySQL驱动依赖 2、配置项目文件:application.yml 3、创建数据库表 4、创建分层结构目录 返回统一数据格式  创建统一数据格式返回类:AjaxResult 创建实现统一数据返回的保底类:ResponseAdvice 统一处理 登录

    2024年02月13日
    浏览(75)
  • 后端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日
    浏览(70)
  • 前后端分离------后端创建笔记(06)新增接口&页面布局

    本文章转载于【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 仅用于学习和讨论,如有侵权请联系 源码:https://gitee.com/green_vegetables/x-admin-project.git 素材:https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码:up4c 项目概述笔记:https://blog.c

    2024年02月13日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包