快捷導(dǎo)航

SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡單的前后端交互

更新時間：2023年08月24日 11:48:44 作者：zhang2383906154

本文主要介紹了SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡單的前后端交互,結(jié)合實(shí)際案例,說明了如何實(shí)現(xiàn)前后端數(shù)據(jù)的交互,具有一定的?參考價值,感興趣的可以了解一下

前端：Vue3

創(chuàng)建項(xiàng)目：

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

項(xiàng)目結(jié)構(gòu)圖如下：

1、查看入口文件內(nèi)容：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'
//創(chuàng)建axios實(shí)例
const axiosInstance = axios.create({
    //api的BaseUrl 
    baseURL : '/aa',
    setTimeout: 5000, //設(shè)置超時時間
    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 =>{
? ? ? ? ? ? //處理響應(yīng)數(shù)據(jù)
? ? ? ? ? ? console.log(response.data);
? ? ? ? ? ? this.msg = response.data;
? ? ? ? })
? ? ? ? .catch(error =>{
? ? ? ? ? ? //處理錯誤消息
? ? ? ? ? ? console.error(error);
? ? ? ? })
? ? ? }
? }
</script>
<!-- 支持less語法格式 scoped代表樣式只在本組件中起作用 lang="less" -->
<style scoped>
</style>

6、無代理情況向后端發(fā)請求會有跨域的問題：

代碼如下：

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': {
            //目標(biāo)服務(wù)器的地址
            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 "登錄成功";
    }
}

到此這篇關(guān)于SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡單的前后端交互的文章就介紹到這了,更多相關(guān)SpringBoot Vue3前后端交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: