SpringBoot结合Vue3实现简单的前后端交互

 更新时间:2023年08月24日 11:48:44   作者:zhang2383906154  
本文主要介绍了SpringBoot结合Vue3实现简单的前后端交互,结合实际案例,说明了如何实现前后端数据的交互,具有一定的 参考价值,感兴趣的可以了解一下

前端:Vue3

创建项目:

npm create vue@latest
> cd <your-project-name>
> npm install
> npm run dev

项目结构图如下:

1、查看入口文件内容:main.js

代码如下:

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router  from '@/router'
//import axios from 'axios'
// console.log(App)
const app = createApp(App)
//app.config.globalProperties.$axios = axios
app.use(router)
// app.use(axios)
app.mount('#app')

在main.js中,首先引入了Vue组件和APP根组件

2、APP跟组件代码如下:

<template>
    <div id="app">
      <!-- App跟组件 -->
      <router-view></router-view>
    </div>
</template>
<script setup>
    name: 'app'
</script>
<style scoped>
</style>

3、路由文件配置:router/index.js

代码如下:

import { createRouter,createWebHistory } from 'vue-router'
import Login from '../components/Login.vue' //引用Login组件
const routes = [
    {path: '/',redirect: '/login'},
    {path: '/login',component: Login}, //定义访问页面的路由地址
]
const router = createRouter({
    history:createWebHistory(),
    routes,
})
export default router

4、Axios请求公共方法:utils/axios.js

代码如下:

import axios from 'axios'
//创建axios实例
const axiosInstance = axios.create({
    //api的BaseUrl 
    baseURL : '/aa',
    setTimeout: 5000, //设置超时时间
    responseType: 'json',
    withDefaults : true, //是否允许带cookie这些
    headers: {
        'Content-Type' : 'application/json;charset=utf-8',
        'x-token' : '777'
    }
});
export default axiosInstance

5、测试消息页面:components/Login.vue

代码如下:

<template>
  <header>
    <img alt="Vue logo" class="logo" src="../assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
        登录组件:
        {{ msg }}
        <button onclick="login"> axios</button>
    </div>
  </header>
</template>
<script>
import axiosInstance from '../utils/Axios'
  export default {
      data(){
          return {
            msg : '开始'
          }
      },
      mounted(){
        axiosInstance.get('login/login')
        .then(response =>{
            //处理响应数据
            console.log(response.data);
            this.msg = response.data;
        })
        .catch(error =>{
            //处理错误消息
            console.error(error);
        })
      }
  }
</script>
<!-- 支持less语法格式 scoped代表样式只在本组件中起作用 lang="less" -->
<style scoped>
</style>

6、无代理情况向后端发请求会有跨域的问题:

代码如下:

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
      proxy: {
        //需要代理的路径
        '/aa': {
            //目标服务器的地址
            target: 'http://localhost:9100/',
            //是否要将请求中的路径重写
            rewrite: path => path.replace(/^\/api/,''),
            //是否要改变代理的源地址
            changeOrigin: true,
            //其他可选的代理配置
        }
      }
  }
})

后端代码:

引入的jar包:

  <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

测试代码:

@RestController
@RequestMapping("/login")
public class Login {
    @RequestMapping("/login")
    public String login(){
        return "登录成功";
    }
}

 到此这篇关于SpringBoot结合Vue3实现简单的前后端交互的文章就介绍到这了,更多相关SpringBoot Vue3前后端交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3中#default=“scope”的使用

    Vue3中#default=“scope”的使用

    在Vue3中,我们经常会遇到需要处理列表渲染的情况,Vue3引入了一种新的语法,即#default=“scope”,本文就来介绍一下Vue3中#default=“scope”的使用,感兴趣的可以了解一下
    2023-10-10
  • Vue中rules的写法使用小结

    Vue中rules的写法使用小结

    这篇文章主要介绍了Vue中rules的写法使用小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue-pdf插件实现pdf文档预览方式(自动分页预览)

    vue-pdf插件实现pdf文档预览方式(自动分页预览)

    这篇文章主要介绍了vue-pdf插件实现pdf文档预览方式(自动分页预览),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 用vue实现注册页效果 vue实现短信验证码登录

    用vue实现注册页效果 vue实现短信验证码登录

    这篇文章主要为大家详细介绍了用vue实现注册页,短信验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • VUE v-for中的:key详解

    VUE v-for中的:key详解

    这篇文章主要为大家介绍了v-for中的:key,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • vue 使用monaco实现代码高亮

    vue 使用monaco实现代码高亮

    这篇文章主要介绍了vue 使用monaco实现代码高亮的方法,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • Vue实现导入Excel功能步骤详解

    Vue实现导入Excel功能步骤详解

    这篇文章主要介绍了Vue实现导入Excel功能,本文分步骤给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07
  • vue开发公共组件之返回顶部

    vue开发公共组件之返回顶部

    这篇文章主要为大家详细介绍了vue开发公共组件之返回顶部,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Vue监听事件实现计数点击依次增加的方法

    Vue监听事件实现计数点击依次增加的方法

    今天小编就为大家分享一篇Vue监听事件实现计数点击依次增加的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue+Axios实现文件上传自定义进度条

    Vue+Axios实现文件上传自定义进度条

    这篇文章主要为大家详细介绍了Vue+Axios实现文件上传自定义进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论