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_demodriver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: 1234server: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.mzph.cn/news/684108.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

解锁未来：探秘Zxing二维码技术的神奇世界

解锁未来：探秘Zxing二维码技术的神奇世界

解锁未来&#xff1a;探秘Zxing二维码技术的神奇世界 1. 引言 在当今数字化和智能化的社会中&#xff0c;二维码技术已经成为人们生活中不可或缺的一部分。从商品购物、支付结算到健康码、门票核销&#xff0c;二维码无处不在&#xff0c;极大地方便了人们的生活和工作。而Zx…
阅读更多...
每日五道java面试题之java基础篇（九）

每日五道java面试题之java基础篇（九）

目录&#xff1a; 第一题 你们项⽬如何排查JVM问题第二题 ⼀个对象从加载到JVM&#xff0c;再到被GC清除&#xff0c;都经历了什么过程&#xff1f;第三题 怎么确定⼀个对象到底是不是垃圾&#xff1f;第四题 JVM有哪些垃圾回收算法&#xff1f;第五题 什么是STW&#xff1f; 第…
阅读更多...
MySQL 基础知识（六）之数据查询（二）

MySQL 基础知识（六）之数据查询（二）

目录 6 数值型函数 7 字符串函数 8 流程控制函数 9 聚合函数 10 分组查询 (group by) 11 分组过滤 (having) 12 限定查询 (limit) 13 多表查询 13.1 连接条件关键词 (on、using) 13.2 连接算法 13.3 交叉连接 (cross join) 13.4 内连接 (inner join) 13.5 外连接 …
阅读更多...
力扣hot3--并查集+哈希

力扣hot3--并查集+哈希

第一想法是排个序然后遍历一遍&#xff0c;but时间复杂度就超啦 并查集居然与哈希结合了&#xff08;&#xff09; 已经好久没用过并查集了&#xff0c;&#xff0c;&#xff0c;我们用哈希表f_node中来记录原结点的父节点&#xff0c;其中key是原结点&#xff0c;value是父节点…
阅读更多...
Cannot resolve symbol ‘@+id/modifyAvatar‘

Cannot resolve symbol ‘@+id/modifyAvatar‘

问题 Cannot resolve symbol id/modifyAvatar详细问题 笔者进行Android开发&#xff0c;创建组件id&#xff0c;报红。 鼠标放置报红处&#xff0c;提示 Cannot resolve symbol id/modifyAvatar解决方案 顶部菜单栏 → \rightarrow →Build → \rightarrow →Rebuild proje…
阅读更多...
推荐《架构探险：从零开始写Java Web框架》

推荐《架构探险：从零开始写Java Web框架》

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 春节读了《架构探险&#xff1a;从零开始写Java Web框架》&#xff0c;一本大概10年前的好书。 本书的作者是阿里巴巴架构师黄勇。黄勇对分布式服务架构与大数据技术有深入…
阅读更多...
QT 菜单栏

QT 菜单栏

添加/删除菜单栏 默认情况下QMainWindow项目一创建就自带了菜单栏&#xff0c;可以在对象树窗口中&#xff0c;右键菜单栏对象&#xff0c;移除菜单栏&#xff1a; 删除后也可以创建菜单栏&#xff0c;此时在对象树中右键MainWindow对象&#xff0c;菜单里边会多了创建菜单栏的…
阅读更多...
Repo命令使用实例(三十八)

Repo命令使用实例(三十八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
相机图像质量研究(18)常见问题总结：CMOS期间对成像的影响--CFA

相机图像质量研究(18)常见问题总结：CMOS期间对成像的影响--CFA

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…
阅读更多...
js中函数缓存详解（如何实现和应用场景）

js中函数缓存详解（如何实现和应用场景）

文章目录 一、是什么二、如何实现闭包柯里化高阶函数 三、应用场景参考文献 一、是什么 函数缓存&#xff0c;就是将函数运算过的结果进行缓存 本质上就是用空间&#xff08;缓存存储&#xff09;换时间&#xff08;计算过程&#xff09; 常用于缓存数据计算结果和缓存对象 …
阅读更多...
Vue2学习第二天

Vue2学习第二天

Vue2 学习第二天 1. 数据绑定 Vue 中有 2 种数据绑定的方式&#xff1a; 单向绑定(v-bind)&#xff1a;数据只能从 data 流向页面。双向绑定(v-model)&#xff1a;数据不仅能从 data 流向页面&#xff0c;还可以从页面流向 data。 备注&#xff1a; 双向绑定一般都应用在表单…
阅读更多...
html的表格标签

html的表格标签

html的表格标签 table标签:表示整个表格tr:表示表格的一行td:表示一个单元格th:表示表头单元格.会居中加粗thead:表格的头部区域 (注意和th区分,范围是比th要大的).tbody:表格得到主体区域. table包含tr , tr包含td或者th. 表格标签有一些属性&#xff0c;可以用于设置大小边…
阅读更多...
Codeforces Round 920 (Div. 3)

Codeforces Round 920 (Div. 3)

D. Very Different Array&#xff08;贪心双指针/前缀和&#xff09; 思路&#xff1a;绝对值就是线段-->让线段最长&#xff08;肯定是越在最短端找最右端的 越最右端找最左端的&#xff09;-->判断怎么连哪段最长(采用双指针的策略去判断&#xff09; &#xff08;左红…
阅读更多...
七天爆肝flink笔记

七天爆肝flink笔记

一.flink整体介绍及wordcount案例代码 1.1整体介绍 从上到下包含有界无界流 支持状态 特点 与spark对比 应用场景 架构分层 1.2示例代码 了解了后就整个demo吧 数据源准备 这里直接用的文本文件 gradle中的主要配置 group com.example version 0.0.1-SNAPSHOTjava {sour…
阅读更多...
网络爬虫实战 | 上传以及下载处理后的文件

网络爬虫实战 | 上传以及下载处理后的文件

以实现爬虫一个简单的&#xff08;SimFIR (doctrp.top)&#xff09;网址为例&#xff0c;需要遵循几个步骤&#xff1a; 1. 分析网页结构 首先&#xff0c;需要分析该网页的结构&#xff0c;了解图片是如何存储和组织的。这通常涉及查看网页的HTML源代码&#xff0c;可能还包…
阅读更多...
基于FPGA的ECG信号滤波与心率计算verilog实现,包含testbench

基于FPGA的ECG信号滤波与心率计算verilog实现,包含testbench

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 ECG信号的特点与噪声 4.2 FPGA在ECG信号处理中的应用 4.3 ECG信号滤波原理 4.4 心率计算原理 4.5 FPGA在ECG信号处理中的优势 5.算法完整程序工程 1.算法运行效果图预览 其RTL结构如…
阅读更多...
C++集群聊天服务器 muduo+nginx+redis+mysql数据库连接池 笔记 （下）

C++集群聊天服务器 muduo+nginx+redis+mysql数据库连接池 笔记 （下）

C集群聊天服务器 网络模块业务模块CMake构建项目 笔记 &#xff08;上&#xff09;-CSDN博客https://blog.csdn.net/weixin_41987016/article/details/135991635?spm1001.2014.3001.5501C集群聊天服务器 数据模块业务模块CMake构建项目 笔记 &#xff08;上&#xff09;-CSDN博…
阅读更多...
free pascal：fpwebview 组件通过JSBridge调用本机TTS

free pascal：fpwebview 组件通过JSBridge调用本机TTS

从 https://github.com/PierceNg/fpwebview 下载 fpwebview-master.zip 简单易用。 先请看 \fpwebview-master\README.md cd \lazarus\projects\fpwebview-master\demo\js_bidir 学习 js_bidir.lpr &#xff0c;编写 js_bind_speak.lpr 如下&#xff0c;通过JSBridge调用本机…
阅读更多...
协调尺度：特征缩放在机器学习中的重要作用

协调尺度：特征缩放在机器学习中的重要作用

目录 一、介绍 二、背景知识 三、了解功能缩放 四、特征缩放方法 五、特征缩放的重要性 六、实际意义 七、代码 八、结论 一、介绍 特征缩放是机器学习和数据分析预处理阶段的关键步骤&#xff0c;在优化各种算法的性能和效率方面起着至关重要的作用。本文深入探讨了特征缩放的…
阅读更多...
什么是内存对齐？如何计算结构体类型的大小？

什么是内存对齐？如何计算结构体类型的大小？

结构体内存对齐与结构体类型的大小 运行这样一段代码 我们想要计算这两个结构体类型的大小&#xff0c;而这个结构体类型里面成员变量有一个int类型和两个char类型&#xff0c;大小加起来应该是六个字节&#xff0c;但是我们打印出来发现&#xff0c;结果居然是12和8&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023