SpringBoot +Vue3 简单的前后端交互

这篇具有很好参考价值的文章主要介绍了SpringBoot +Vue3 简单的前后端交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端:Vue3

创建项目:

npm create vue@latest

> cd <your-project-name>

> npm install

> npm run dev

项目结构图如下:

SpringBoot +Vue3 简单的前后端交互,spring boot,后端,java

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>

测试代码:文章来源地址https://www.toymoban.com/news/detail-682688.html


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

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

        return "登录成功";
    }
}

到了这里,关于SpringBoot +Vue3 简单的前后端交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【一】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【一】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢

    2024年02月11日
    浏览(55)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,欢

    2024年02月10日
    浏览(57)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】的,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地方,

    2024年02月11日
    浏览(53)
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】

    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】的分享,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力😉😉 💕欢迎大家:这里是CSDN,我总结知识的地

    2024年02月11日
    浏览(60)
  • 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 后端

    配套视频地址:https://www.bilibili.com/video/BV1dG4y1T7yp/ 如果您需要原版笔记,请up喝口水,可以上我的淘宝小店 青菜开发资料 购买,或点击下方链接直接购买: 源码+PDF版本笔记 源码+原始MD版本笔记 感谢支持! 创建springboot项目:2.7.8 pom依赖 yml 测试 编写代码生成器 启动类加注

    2024年02月04日
    浏览(58)
  • springboot和vue3简单连接交互

    1.springboot 下载jdk1.8,以及配置国内镜像,使用alibaba的maven导入进去。 2.配置pom文件。参考代码 注意jdk1.8对应的spring-boot-starter-parent的版本应该是2.x.x.这里引入了mybatis-plus依赖

    2024年04月16日
    浏览(32)
  • spring boot 配合element ui vue实现表格的批量删除(前后端详细教学,简单易懂,有手就行)

    目录 一.前言: 二. 前端代码: 2.1.element ui组件代码   2.2删除按钮 2.3.data 2.4.methods 三.后端代码: 研究了其他人的博客,找到了一篇有含金量的,进行了部分改写实现前后端分离,参考博主为小白Rachel 先看看页面效果,要是符合你们所需的功能那就继续看下去         1406

    2024年02月04日
    浏览(70)
  • 2023 最新版IntelliJ IDEA 2023.1创建Java Web前(vue3)后端(spring-boot3)分离 项目详细步骤(图文详解)

    2023 最新版IntelliJ IDEA 2023.1创建Java Web 项目详细步骤(图文详解) 本篇使用当前Java Web开发主流的spring-boot3框架来创建一个Java前后端分离的项目,前端使用的也是目前前端主流的vue3进行一个简单的项目搭建,让你距离Java全栈开发更近一步 🏴‍☠️。 使用版本: “17.0.1”

    2024年02月12日
    浏览(88)
  • OpenHarmony:使用网络组件axios与Spring Boot进行前后端交互

    流程图: 前端请求函数 这两个函数是使用axios库发起HTTP GET请求的函数,用于与服务器进行通信 服务器端点: http://192.168.211.1:8090/test/1 这是我本机的ip地址和springboot运行端口,使用在windows终端输入ipconfig可查看 返回值: 该函数返回一个Promise,该Promise在请求成功时将包含

    2024年01月22日
    浏览(55)
  • springboot+vue 前后端交互实现(mysql+springboot+vue)

    编译器:vscode、idea、mysql5.7 技术:springboot+mybatis+mysql+lombok+vue 实现内容:实现前后端数据交互。 实现效果: 因为vue和springboot是前后端分离的,所以在开始交互前首先需要解决跨域问题,可以在前端做也可以在后端加配置类,这里我是在后端加的CORS策略配置类。 还需要在前

    2024年02月17日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包