SpringBoot3 + Vue3 由浅入深的交互 基础交互教学

说明：这篇文章是适用于已经学过SpringBoot3和Vue3理论知识，但不会具体如何实操的过程的朋友，那么我将手把手从教大家从后端与前端交互的过程教学。

目录

一、创建一个SpringBoot3项目的和Vue3项目并进行配置

1.1后端配置:

1.1.1application.yml:

1.2前端配置：

1.2.1安装相应的依赖:

1.2.2utils/request.js:

1.2.3api/user.js:

1.2.4router/index.js:

1.2.5main.js:

1.2.6vite.config.js:

二、从打印一个字符串开始

2.1 后端：

2.1.1 Controller:

2.2前端：

2.2.1api/user.js:

2.2.2App.vue:

2.3 实现效果：

三、实现登录功能（多个参数的传递）

3.1后端：

3.1.1 Controller:

3.2前端：

3.2.1api/user.js:

3.2.2App.vue:

3.3 实现效果：

四、单个参数传递

4.1后端：

4.1.1 Controller:

4.2 前端：

4.2.1api/user.js:

4.2.2App.vue:

4.3 实现效果：

一、创建一个SpringBoot3项目的和Vue3项目并进行配置

Vue创建的过程可以参考我之前写的文章

Vue 工程化项目创建快速入门这篇就够了-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/qq_69183322/article/details/135747832

1.1后端配置:

1.1.1application.yml:

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/db_demo
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 1234

server:
  port: 8080

1.2前端配置：

要创建utils、api、router、views文件夹

1.2.1安装相应的依赖:

npm install axios
npm install element-plus --save
npm install vue-router@4

1.2.2utils/request.js:

import axios from "axios";
 
const baseURL = '/api';
 
const instance = axios.create({baseURL})
 
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务错误');
        return Promise.reject(err);
    }
 
)
 
export default instance;

1.2.3api/user.js:

注意：api里的js文件名和文件内容，要根据实际的接口文档写，这里先写了一个打印功能的接口，方便教学

import request from '@/utils/request.js'

export const userHelloService = ()=>{
    return request.get('/user/hello')
}

1.2.4router/index.js:

注意：别忘记在views文件夹下创建Login.vue和Layout.vue（本次教学没用到）

import { createRouter,createWebHistory } from "vue-router";
 
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'

//定义路由关系
const routes = [
    { path:'/login',component:LoginVue},
    { path:'/',component:LayoutVue}
]
 
//创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})
 
export default router

1.2.5main.js:

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);
app.use(router)
app.use(ElementPlus)
app.mount('#app')

1.2.6vite.config.js:

注意：target里的url要根据后端的端口号进行修改

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    proxy:{
      '/api':{
        target:'http://localhost:8080',
        changeOrigin:true,
        rewrite:(path)=>path.replace(/^\/api/,'')
      }
    }
  }
})

二、从打印一个字符串开始

2.1 后端：

2.1.1 Controller:

启动该SpringBoot项目后，通过Get方式访问locahost:8080/user/hello，就会返回"Hello World! 2024 year"字符串

package com.example.test_demo.Controller;


import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("user")
public class UserController {

    @GetMapping("/hello")
    public String hello(){
        return "Hello World! 2024 year";
    }
    

}

2.2前端：

2.2.1api/user.js:

import request from '@/utils/request.js'

export const userHelloService = ()=>{
    return request.get('/user/hello')
}

2.2.2App.vue:

为了方便演示，我直接在App.vue（Vue.js 项目的入口文件）中输出后端传递的字符串

<script setup>
import {ref} from 'vue'

import { userHelloService } from './api/user.js';

const variable1 = ref('')
const hello = async()=>{
  let result = await userHelloService();
  variable1.value = result
 
}

function clear(){
  variable1.value = ''
}
</script>

<template>
  <el-button type="default" @click="hello" style="margin-top:10px">Hello</el-button>
  <el-button type="primary" @click="clear" style="margin-top:10px">清空</el-button>
  <h1>输出:{{variable1}}</h1>
</template>

<style scoped>

</style>

2.3 实现效果：

 

点击Hello按钮时，打印后端返回的字符串"Hello World! 2024 year"

三、实现登录功能（多个参数的传递）

想要实现登录功能，那么在页面输入的username（用户名）和password（密码）信息要传递到后端，这样后端才能调用数据库进行验证该用户信息是否存在

3.1后端：

3.1.1 Controller:

package com.example.test_demo.Controller;


import com.example.test_demo.pojo.User;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("user")
public class UserController {

    @GetMapping("/hello")
    public String hello(){
        return "Hello World! 2024 year";
    }

    @PostMapping("/login")
    public String login(String username,String password){
        System.out.println("用户名:"+username);
        System.out.println("密码:"+password);

        return "用户名:"+username+"\n密码:"+password;
    }

}

3.2前端：

3.2.1api/user.js:

import request from '@/utils/request.js'

export const userHelloService = ()=>{
    return request.get('/user/hello')
}

export const userLoginService = (loginData)=>{
    const params = new URLSearchParams();
    for(let key in loginData){
        params.append(key,loginData[key])
    }
    return request.post('/user/login',params)
}

3.2.2App.vue:

<script setup>
import {ref} from 'vue'

import { userHelloService, userLoginService } from './api/user.js';

const variable1 = ref('')
const hello = async()=>{
  let result = await userHelloService();
  variable1.value = result
 
}

function clear(){
  variable1.value = ''
}



 const loginData = ref({
    username: '',
    password: ''
   
})

const login = async()=>{
  let result = await userLoginService(loginData.value);
  alert(result)
  
}


</script>

<template>
  <el-button type="default" @click="hello" style="margin-top:10px">Hello</el-button>
  <el-button type="primary" @click="clear" style="margin-top:10px">清空</el-button>
  <h1>输出:{{variable1}}</h1>
  <el-input v-model="loginData.username" placeholder="Please username" />
  <el-input v-model="loginData.password" placeholder="Please password" />
  <el-button type="primary" @click="login" style="margin-top:10px">登录</el-button>
  <h1>username:{{loginData.username}}</h1>
  <h1>password:{{loginData.password}}</h1>

</template>

<style scoped>

.el-input{
  width: 200px;
  display: flex;
  justify-items: flex-start;
}
</style>

3.3 实现效果：

在页面输入用户名和密码后点击登录按钮，弹出登录用户信息后点击确认

 后端显示：

 可以看到后端接收到页面输入的登录信息了

四、单个参数传递

我们常常需要获取单个参数进行查询或者校验，例如，我们想通过获取id来查询信息，或者获取某一类的名字来查询该类的内容，这时候就需要传递单个参数信息了

4.1后端：

4.1.1 Controller:

package com.example.test_demo.Controller;


import com.example.test_demo.pojo.User;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("user")
public class UserController {

    @GetMapping("/hello")
    public String hello(){
        return "Hello World! 2024 year";
    }

    @PostMapping("/login")
    public String login(String username,String password){
        System.out.println("用户名:"+username);
        System.out.println("密码:"+password);

        return "用户名:"+username+"\n密码:"+password;
    }

    @DeleteMapping("/{id}")
    public String delete(@PathVariable Integer id){
        System.out.println("获取删除的id="+id);
        return "删除 id="+id+"的用户信息";
    }
}

4.2 前端：

4.2.1api/user.js:

import request from '@/utils/request.js'

export const userHelloService = ()=>{
    return request.get('/user/hello')
}

export const userLoginService = (loginData)=>{
    const params = new URLSearchParams();
    for(let key in loginData){
        params.append(key,loginData[key])
    }
    return request.post('/user/login',params)
}

export const userDeletService = (id)=>{
    return request.delete('user/'+id)
}

4.2.2App.vue:

<script setup>
import {ref} from 'vue'

import { userDeletService, userHelloService, userLoginService } from './api/user.js';

const variable1 = ref('')
const hello = async()=>{
  let result = await userHelloService();
  variable1.value = result
 
}

function clear(){
  variable1.value = ''
}



 const loginData = ref({
    username: '',
    password: ''
   
})

const login = async()=>{
  let result = await userLoginService(loginData.value);
  
}

const id = ref()
const deleteById = async()=>{
  let result = await userDeletService(id.value);
  id.value = result
}


</script>

<template>
  <el-button type="default" @click="hello" style="margin-top:10px">Hello</el-button>
  <el-button type="primary" @click="clear" style="margin-top:10px">清空</el-button>
  <h1>输出:{{variable1}}</h1>
  <el-input v-model="loginData.username" placeholder="Please username" />
  <el-input v-model="loginData.password" placeholder="Please password" />
  <el-button type="primary" @click="login" style="margin-top:10px">登录</el-button>
  <h1>username:{{loginData.username}}</h1>
  <h1>password:{{loginData.password}}</h1>
  输入删除的ID:<el-input v-model="id" placeholder="Please deleteId" />
  <el-button type="danger" @click="deleteById" style="margin-top:10px">删除</el-button>
  <h1>deleteById:{{id}}</h1>

</template>

<style scoped>

.el-input{
  width: 200px;
  display: flex;
  justify-items: flex-start;
}
</style>

4.3 实现效果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/387686.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C语言第二十四弹---指针(八)

C语言第二十四弹---指针(八)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 指针 1、数组和指针笔试题解析 1.1、字符数组 1.1.1、代码1&#xff1a; 1.1.2、代码2&#xff1a; 1.1.3、代码3&#xff1a; 1.1.4、代码4&#xff1a; 1…
阅读更多...
StringJoiner

StringJoiner

JDK8开始有&#xff0c;用来操作字符串&#xff0c;不仅可以提高字符串的操作效率&#xff0c;而且在某些场景使用它操作字符串&#xff0c;代码会更加简洁。 import java.util.StringJoiner;public class Test {public static void main(String[] args) {//StringJoiner的应用…
阅读更多...
ChatGPT高效提问—prompt实践（漏洞风险分析-重构建议-识别内存泄漏）

ChatGPT高效提问—prompt实践（漏洞风险分析-重构建议-识别内存泄漏）

ChatGPT高效提问—prompt实践&#xff08;漏洞风险分析-重构建议-识别内存泄漏&#xff09; 1.1 漏洞和风险分析 ChatGPT还可以帮助开发人员预测代码的潜在风险&#xff0c;识别其中的安全漏洞&#xff0c;而不必先运行它&#xff0c;这可以让开发人员及早发现错误&#xff0…
阅读更多...
探索设计模式的魅力：创建型设计模式的比较与决策

探索设计模式的魅力：创建型设计模式的比较与决策

设计模式专栏&#xff1a;http://t.csdnimg.cn/U54zu 目录 一、设计模式概览 1.1 创建型模式 二、比较创建型设计模式 1.1 适用场景典型用例 1.2 关键要素与差异对比 1.3 结构图 三、模式选择指南 3.1 场景分析 3.2 决策流程图 四、结语 4.1 优势 4.2 考量因素 一、…
阅读更多...
【漏洞扫描】网络空间安全工具—Goby 快速入门使用指南

【漏洞扫描】网络空间安全工具—Goby 快速入门使用指南

下载地址 Goby&#xff08;含1322个POC&#xff09; v2.8.9 社区版 介绍 Goby是一款基于网络空间测绘技术的新一代网络安全工具&#xff0c;它通过给目标网络建立完整的资产知识库&#xff0c;进行网络安全事件应急与漏洞应急。 Goby可提供最全面的资产识别&#xff0c;目前…
阅读更多...
串行通信的艺术：深入解析UART与奇偶校验

串行通信的艺术：深入解析UART与奇偶校验

发送数据位是电流传输吗&#xff1f; 在UART&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09;通信中&#xff0c;发送数据位不直接以电流的形式传输。而是通过改变电压水平或者光信号&#xff08;在光纤通信中&#xff09;来表示不同的数据位&#xff08…
阅读更多...
C#利用接口实现选择不同的语种

C#利用接口实现选择不同的语种

目录 一、涉及到的知识点 1.接口定义 2.接口具有的特征 3.接口通过类继承来实现 4.有效使用接口进行组件编程 5.Encoding.GetBytes(String)方法 &#xff08;1&#xff09;检查给定字符串中是否包含中文字符 &#xff08;2&#xff09;编码和还原前后 6.Encoding.GetS…
阅读更多...
[计算机网络]---网络编程套接字

[计算机网络]---网络编程套接字

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、基础知识…
阅读更多...
数仓建模—数据网格

数仓建模—数据网格

数据网格 随着数字化时代的到来，近几年数据领域的新技术概念不断涌现，无论是数据湖、湖仓一体、流批一体、存算一体、数据编织抑或数据网格，很多还爬上了Gartner曲线，其中数据网格备受关注，数据网格从字面意思来看挺抽象的，会劝退很多人，但当你深入去理解这个概念时，才…
阅读更多...
数据存储以及内存

数据存储以及内存

数据在内存中的存储是因不同的类型而不同的。 但首先我们需要知道的是&#xff0c;在C语言中&#xff0c;数据在内存中的存储是以变量的形式存储的。每个变量都有一个地址&#xff0c;指向内存中的特定位置。变量的值存储在这个地址对应的内存单元中。不同类型的变量在内存中占…
阅读更多...
react【三】受控组件/高阶组件/portals/fragment/严格模式/动画

react【三】受控组件/高阶组件/portals/fragment/严格模式/动画

文章目录 1、受控组件1.1 认识受控组件1.2 checkout1.3 selected1.4 非受控组件 2、高阶组件2.1 认识高阶组件2.2 应用1-props增强的基本使用2.3 对象增强的应用场景-context共享2.4 应用2-鉴权2.5 应用3 – 生命周期劫持2.6、高阶组件的意义 3、Portals4、fragment5、StrictMo…
阅读更多...
【无标题】Matlab之annotation函数——创建图形注释（箭头、椭圆、矩形）

【无标题】Matlab之annotation函数——创建图形注释（箭头、椭圆、矩形）

应用1&#xff1a;创建文本箭头注释 创建一个简单线图并向图窗添加文本箭头。用归一化的图窗坐标指定文本箭头位置&#xff0c;起点为 (0.3,0.6)&#xff0c;终点为 (0.5,0.5)。通过设置 String 属性指定文本说明。 figure plot(1:10) x [0.3 0.5]; y [0.6 0.5]; annotation…
阅读更多...
Linux网络基础1

Linux网络基础1

目录 计算机网络背景协议OSI七层模型TCP/IP五层&#xff08;四层&#xff09;模型网络传输基本流程以太网通信原理IP地址理解 计算机网络背景 到目前为止&#xff0c;我们之前所有的编程都是单机的&#xff0c;不是多机互联。以前计算机被发明的时候是为了军事用途&#xff0…
阅读更多...
【C语言】常见字符串函数的功能与模拟实现

【C语言】常见字符串函数的功能与模拟实现

目录 1.strlen() 模拟实现strlen() 2.strcpy() 模拟实现strcpy() 3.strcat() 模拟实现strcat() 4.strcmp() 模拟实现strcmp() 5.strncpy() 模拟实现strncpy() 6.strncat() 模拟实现strncat() 7.strncmp() 模拟实现strncmp() 8.strstr() 模拟实现strstr() 9.str…
阅读更多...
Midjourney绘图欣赏系列（一）

Midjourney绘图欣赏系列（一）

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子&#xff0c;它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同&#xff0c;Midjourney 是自筹资金且闭源的&#xff0c;因此确切了解其幕后内容尚不…
阅读更多...
Vulhub kali 环境安装教程

Vulhub kali 环境安装教程

进入 root 权限 sudo su 更新软件 apt-get update 安装 HTTPS 协议和 CA 证书 apt-get install -y apt-transport-https ca-certificates 安装 docker apt install docker.io 查看 docker 是否安装完成 docker -v 安装 pip apt-get install python3-pip 安装 docker-compose do…
阅读更多...
【python之美】减少人工成本之批量去除首行_3

【python之美】减少人工成本之批量去除首行_3

批量去除首行内容 怎么创建多个文本并写入多行数据呢 上特产&#xff1a; import ospath "C:\\Users\\Administrator\\Desktop\\text_1\\" numb int(input("需要创建几个文件&#xff1a;")) a 1 for i in range(numb):f open(path text _ str(a)…
阅读更多...
jmeter-问题四：json断言时，预期结果那里如何不写成固定值？

jmeter-问题四：json断言时，预期结果那里如何不写成固定值？

文章目录 json断言时&#xff0c;预期结果那里如何不写成固定值&#xff1f;定义用户参数&#xff0c;然后在json断言的expected value处引用使用csv数据&#xff0c;然后在json断言的expected value处引用 json断言时&#xff0c;预期结果那里如何不写成固定值&#xff1f; 定…
阅读更多...
测试开发-2-概念篇

测试开发-2-概念篇

文章目录 衡量软件测试结果的依据—需求1.需求的概念2.从软件测试人员角度看需求3.为什么需求对软件测试人员如此重要4.如何才可以深入理解被测试软件的需求5.测试用例的概念6.软件错误&#xff08;BUG&#xff09;的概念7.开发模型和测试模型8.软件的生命周期9.瀑布模型&#…
阅读更多...
Spring 用法学习总结（三）之 AOP

Spring 用法学习总结（三）之 AOP

Spring学习 7 bean的生命周期8 AOP面向切面编程8.1 AOP相关术语8.2 AOP使用 7 bean的生命周期 bean的生命周期主要为bean实例化、bean属性赋值、bean初始化、销毁bean&#xff0c;其中在实例化和初始化前后都使用后置处理器方法&#xff0c;而InstantiationAwareBeanPostProce…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站