SpringBoot +Vue3 简单的前后端交互

前端：Vue3

创建项目：

npm create vue@latest

> cd

> 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跟组件代码如下：

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

代码如下：

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包：

  
            org.springframework.boot
            spring-boot-starter
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        

        
            org.springframework.boot
            spring-boot-starter-web
        

测试代码：

@RestController
@RequestMapping("/login")
public class Login {

    @RequestMapping("/login")
    public String login(){

        return "登录成功";
    }
}