前段向后端传递数据请求地址配置问题(springboot+vue)

简介: 前段向后端传递数据请求地址配置问题(springboot+vue)

1 .前端向后端传递数据问题



前提工作:

写好springboot后端controller如下

package com.peng.contriller;
import com.peng.common.Result;
import com.peng.pojo.User;
import com.peng.service.UserService;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
@RestController
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserService userService;
    @PostMapping("/save")
    public Result save(@RequestBody User user){
        if (user.getPassword()==null){
            user.setPassword("123456");
        }
        boolean save = userService.save(user);
        if (save){ return Result.success();}
        else{
            return Result.error("500","新增失败");
        }
    }
}


server.port=8082

若要请求后端地址http://localhost:8082/user/save

写好vue前端,使用axios交互,需要引入axios


在vue项目中创建request.js文件引入,并编写相关配置

import axios from 'axios'
const request = axios.create({
    baseURL: '/api',  // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!!
    timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
export default request


前端相关请求


image.png


此时前端请求地址变为/api/user/save


由于存在跨域问题需要在添加跨域配置 在vue项目添加vue.config.js

// 跨域配置
module.exports = {
  devServer: {                //记住,别写错了devServer//设置本地默认端口  选填
    port: 9876,
    proxy: {                 //设置代理,必须填
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字,名字可以自己定
        target: 'http://localhost:8082',     //代理的目标地址
        changeOrigin: true,              //是否设置同源,输入是的
        pathRewrite: {                   //路径重写
          '^/api': ''                     //选择忽略拦截器里面的内容
        }
      }
    }
  }
}


上方拦截器遇见/api会将它替换为http://localhost:8082


此时请求地址变为http://localhost:8082/user/save满足后端地址

相关文章
|
3天前
|
Java 应用服务中间件 API
京东面试:SpringBoot同时可以处理多少请求?
Spring Boot 作为 Java 开发中必备的框架,它为开发者提供了高效且易用的开发工具,所以和它相关的面试题自然也很重要,咱们今天就来看这道经典的面试题:SpringBoot同时可以处理多少个请求 ? 准确的来说,Spring Boot 同时可以处理多少个请求,并不取决于 Spring Boot 框架本身,而是取决于其内置的 Web 容器(因为 Web 容器的行为,决定了 Spring Boot 的行为,所以咱们姑且认为两个问题的回答是一样的)。 ## 1.Web三大容器 Web 容器目前也是三分天下,市面上最常见的三种 Web 容器分别是:Tomcat、Undertow 和 Jet
11 1
京东面试:SpringBoot同时可以处理多少请求?
|
9天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力,建立一个全面的、集成的、稳定的制造物流质量控制体系;对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进,满足精细化、透明化、自动化、实时化、数据化、一体化管理,实现企业柔性化制造管理。
37 3
|
12天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
12天前
|
Java 应用服务中间件 微服务
Spring Boot可以同时处理多少请求?
Spring Boot的并发处理能力受硬件、JVM配置、嵌入式Tomcat的线程池(默认最大连接数8192,最大等待数100)、应用效率、系统架构和网络条件影响。开发阶段可能处理数百个并发,优化后在适合的硬件上可处理数千乃至上万并发。大型系统常结合负载均衡器。
30 2
|
12天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
29 0
|
12天前
|
Web App开发 前端开发 Java
SpringBoot之请求的详细解析
SpringBoot之请求的详细解析
22 0
|
12天前
|
前端开发 安全 Java
springboot集成springdoc-openapi(模拟前端请求)
springboot集成springdoc-openapi(模拟前端请求)
|
12天前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
42 0
|
12天前
|
Java 关系型数据库 MySQL
基于SpringBoot后端实现连接MySQL数据库并存贮数据
基于SpringBoot后端实现连接MySQL数据库并存贮数据
|
18小时前
|
消息中间件 API 数据库
构建高性能微服务架构:后端开发的终极指南
【5月更文挑战第27天】随着现代业务需求的不断演进,传统的单体应用架构逐渐显得笨重且难以维护。微服务架构以其灵活性、可扩展性和技术多样性成为企业转型的首选。本文将深入探讨如何构建一个高性能的微服务系统,涵盖关键设计原则、常用技术和实践案例,为后端开发人员提供一份全面的指南。