SpringBoot&Vue&EmementUI前后端分离整合、统一封装axios、跨域配置

简介: SpringBoot&Vue&EmementUI前后端分离整合、统一封装axios、跨域配置

🌟Vue项目创建


1.进入到要创建项目的文件夹,目录输入CMD,打开黑白命令窗口。我的目录是在E:/VueWorkspacke。

a6412b5537c4dc7ab03f215fcd325e48_3eb14960a92046a3a550afd6889a27da.png

2.输入vue ui打开vue项目管理web界面。

a7061598508546cee170ec4dd0188f87_c08a1873b9564f138b0c7f3400641fdc.png

3.进入到红框的路径,进行项目创建。

27de0001d410e590fbcf64fd79ecde1c_8066d9daf18d4786a7c7a13f95a659f8.png

4.点击在此创建项目,输入项目相关信息,并点击下一步

e88dda87878edae47b7322c47391f426_c229ea9add094754ad350620989633b6.png

5.选择手动,并点击下一步。

3d8f3e0a3b4e7e5502cd9eee2338cf9b_08b42d27b82a4add99b6d9c0fafbede7.png

6.选择加入的依赖,也可以后期项目中手动添加。

3c3456855781bd4a3b916f4afa42ec5d_ff180d74dbca4c2bacb2fb74d6169fd4.png


7.创建项目,不保存预设。

3cfabcc399c9d9e9e631a56e9cae35ef_d732111cd82b4e488fe6adf1249c1e01.png

8ced9fcecefd1299150a6ea31b3d9f55_b015251bba6842478fac94a398072101.png


8.创建成功后就可以在路径中看到项目。

e18d9eae36da643247647211f3893168_c316216ad6fb43cfa8cab282e902401d.png


🌟Vue整合ElementUI


官网:ElementUI


1.打开项目,终端执行命令安装emelentui。


npm i element-ui -S


2.main.js中添加以下代码。


//导入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//使用ElementUI
Vue.use(ElementUI);


3.package.json中的eslintConfig中的rules添加代码,不然启动时报错。


"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "plugin:prettier/recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
    //只需要改动这里即可。
   "vue/multi-word-component-names": "off",
      "prettier/prettier": "off"
  }
  },


4.效果验证。官网复制相关样式,这里复制一个按钮到HomeView.vue。


<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  <el-button type="warning">警告按钮</el-button>
  </div>
</template>


5.启动项目,终端输入npm run serve

305af9e112d4a80944f582776fac4d60_163b02c17f3840f0b1a300b35486812c.png


🌟统一封装request.js


1.安装axios。npm i axios -S

2.创建request.js文件,放到utils目录下,代码如下


import axios from 'axios'
const request = axios.create({
  baseURL: 'http://localhost:8081',  // 注意!! 这里是全局统一加上了 后端接口前缀 前缀,后端必须进行跨域配置!
    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


3.main.js中全局配置封装的request。


import request from "./utils/request";
Vue.prototype.request = request


4.创建接口请求。


methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          //后端接口
            this.request.post("/api/v1/redis/generate", this.formData).then(res => {
            if(res.code === '0') {
              this.$message.success("生成成功")
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },


🌟跨域配置


后端项目创建这里就省略了。

1.在后端项目中创建跨域配置类CrosConfig。


@Configuration
public class CorsConfig {
    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}


2.application.properties配置文件添加配置。


server.port=8081


🌟写在最后


有关于SpringBoot&Vue&EmementUI前后端分离整合、统一封装axios、跨域配置到此就结束了。感谢大家的阅读,希望大家在评论区对此部分内容散发讨论,便于学到更多的知识。


目录
打赏
0
0
0
0
5
分享
相关文章
详细介绍SpringBoot启动流程及配置类解析原理
通过对 Spring Boot 启动流程及配置类解析原理的深入分析,我们可以看到 Spring Boot 在启动时的灵活性和可扩展性。理解这些机制不仅有助于开发者更好地使用 Spring Boot 进行应用开发,还能够在面对问题时,迅速定位和解决问题。希望本文能为您在 Spring Boot 开发过程中提供有效的指导和帮助。
27 12
手写模拟Spring Boot自动配置功能
【11月更文挑战第19天】随着微服务架构的兴起,Spring Boot作为一种快速开发框架,因其简化了Spring应用的初始搭建和开发过程,受到了广大开发者的青睐。自动配置作为Spring Boot的核心特性之一,大大减少了手动配置的工作量,提高了开发效率。
82 0
SpringBoot自动配置及自定义Starter
Java程序员依赖Spring框架简化开发,但复杂的配置文件增加了负担。SpringBoot以“约定大于配置”理念简化了这一过程,通过引入各种Starter并加载默认配置,几乎做到开箱即用。
126 10
SpringBoot自动配置及自定义Starter
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
40 1
SpringBoot配置跨模块扫描问题解决方案
在分布式项目中,使用Maven进行多模块开发时,某些模块(如xxx-common)没有启动类。如何将这些模块中的类注册为Spring管理的Bean对象?本文通过案例分析,介绍了两种解决方案:常规方案是通过`@SpringBootApplication(scanBasePackages)`指定扫描路径;推荐方案是保持各模块包结构一致(如com.xxx),利用SpringBoot默认扫描规则自动识别其他模块中的组件,简化配置。
SpringBoot配置跨模块扫描问题解决方案
Spring Boot 自动配置机制:从原理到自定义
Spring Boot 的自动配置机制通过 `spring.factories` 文件和 `@EnableAutoConfiguration` 注解,根据类路径中的依赖和条件注解自动配置所需的 Bean,大大简化了开发过程。本文深入探讨了自动配置的原理、条件化配置、自定义自动配置以及实际应用案例,帮助开发者更好地理解和利用这一强大特性。
180 14
|
3月前
|
SpringBoot入门(7)- 配置热部署devtools工具
SpringBoot入门(7)- 配置热部署devtools工具
175 1
SpringBoot入门(7)- 配置热部署devtools工具
springboot中路径默认配置与重定向/转发所存在的域对象
Spring Boot 提供了简便的路径默认配置和强大的重定向/转发机制,通过合理使用这些功能,可以实现灵活的请求处理和数据传递。理解并掌握不同域对象的生命周期和使用场景,是构建高效、健壮 Web 应用的关键。通过上述详细介绍和示例,相信读者能够更好地应用这些知识,优化自己的 Spring Boot 应用。
82 3
SpringBoot配置多数据源实战
第四届光学与机器视觉国际学术会议(ICOMV 2025) 2025 4th International Conference on Optics and Machine Vision
87 8
springboot启动配置文件-bootstrap.yml常用基本配置
以上是一些常用的基本配置项,在实际应用中可能会根据需求有所变化。通过合理配置 `bootstrap.yml`文件,可以确保应用程序在启动阶段加载正确的配置,并顺利启动运行。
481 2

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等