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.hqwc.cn/news/470692.html

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

相关文章

(15)Hive调优——数据倾斜的解决指南

(15)Hive调优——数据倾斜的解决指南

目录 前言 一、什么是数据倾斜 二、发生数据倾斜的表现 2.1 MapReduce任务 2.2 Spark任务 三、如何定位发生数据倾斜的代码 四、发生数据倾斜的原因 3.1 key分布不均匀 3.1.1 某些key存在大量相同值 3.1.2 存在大量异常值或空值 3.2 业务数据本身的特性 3.3 SQL语句…
阅读更多...
Django学习笔记教程全解析:初步学习Django模型，初识API,以及Django的后台管理系统（Django全解析，保姆级教程）

Django学习笔记教程全解析:初步学习Django模型，初识API,以及Django的后台管理系统（Django全解析，保姆级教程）

把时间用在思考上是最能节省时间的事情。——[美]卡曾斯 导言 写在前面 本文部分内容引用的是Django官方文档&#xff0c;对官方文档进行了解读和理解&#xff0c;对官方文档的部分注释内容进行了翻译&#xff0c;以方便大家的阅读和理解。 概述 在上一篇文章里&#xff0…
阅读更多...
Repo命令使用实例(三十八)

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

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
Git快速掌握，通俗易懂

Git快速掌握，通俗易懂

Git分布式版本控制工具 介绍 Git是一个开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。Git是由Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。Git可以帮助开发者们管理代码的版本&#xff0c;避免代码冲突&#…
阅读更多...
无人机地面站技术，无人机地面站理论基础详解

无人机地面站技术，无人机地面站理论基础详解

地面站作为整个无人机系统的作战指挥中心&#xff0c;其控制内容包括:飞行器的飞行过程&#xff0c;飞行航迹&#xff0c; 有效载荷的任务功能&#xff0c;通讯链路的正常工作&#xff0c;以及 飞行器的发射和回收。 无人机地面站总述 地面站作为整个无人机系统的作战指挥中心…
阅读更多...
分层图最短路

分层图最短路

分层最短路用更加具体或者形象一点的说法就是有限制的最短路径问题。 通常是拆点解决问题,原图中的点加上一个当前点的状态&#xff0c;成为一个新的点 P4568 [JLOI2011] 飞行路线 P4568 [JLOI2011] 飞行路线 #include <bits/stdc.h> #define int long long #define …
阅读更多...
2024.2.14

2024.2.14

1.请编程实现二维数组的杨慧三角 #include<stdio.h> #include<string.h> int main(int argc, const char *argv[]) { int n,i,j;printf("please enter n:");scanf("%d",&n);int arr[n][n];for(i0;i<n;i){for(j0;j<i;j){if(j0 || ij…
阅读更多...
C++类和对象-多态-＞多态的基本语法、多态的原理剖析、纯虚函数和抽象类、虚析构和纯虚析构

C++类和对象-多态-＞多态的基本语法、多态的原理剖析、纯虚函数和抽象类、虚析构和纯虚析构

#include<iostream> using namespace std; //多态 //动物类 class Animal { public: //Speak函数就是虚函数 //函数前面加上virtual关键字&#xff0c;变成虚函数&#xff0c;那么编译器在编译的时候就不能确定函数调用了。 virtual void speak() { …
阅读更多...
C++文件操作-＞文本文件(-＞写文件、读文件)、二进制文件(-＞写文件、读文件)

C++文件操作-＞文本文件(-＞写文件、读文件)、二进制文件(-＞写文件、读文件)

#include<iostream> using namespace std; #include <fstream>//头文件包含 //文本文件 写文件 void test01() { //1.包含头文件 fstream //2.创建流对象 ofstream ofs; //3.指定打开方式 ofs.open("test.txt", ios::out); //4.写…
阅读更多...
将人工智能应用于 DNS 流量以阻止恶意软件感染

将人工智能应用于 DNS 流量以阻止恶意软件感染

Infoblox Inc. 透露&#xff0c;它正在利用人工智能 (AI) 来识别恶意软件来源的网站。然后可以阻止这些网站以使 IT 环境更加安全。 Infoblox 产品管理副总裁 Craig Sanderson 桑德森表示&#xff0c;SOC Insights 将机器学习算法应用于 BloxOne 威胁防御平台域名服务器 (DNS)…
阅读更多...
[职场] 生育津贴如何申领与计算 #经验分享#微信#职场发展

[职场] 生育津贴如何申领与计算 #经验分享#微信#职场发展

生育津贴如何申领与计算 生育津贴如何申领? 生育津贴即为产假工资&#xff0c;相当于女职工在享受符合生育政策休假期间的工资。生育津贴高于本人产假工资标准的&#xff0c;用人单位不得克扣生育津贴低于本人产假工资标准的&#xff0c;差额部分由用人单位补足。 一、大部…
阅读更多...
ArcgisForJS基础

ArcgisForJS基础

文章目录 0.引言1.第一个ArcgisForJS应用程序1.1.安装部署ArcgisForJS1.2.实现ArcgisForJS应用程序 2.开发与调试工具2.1.集成开发环境2.2.调试工具2.3.Firebug 0.引言 ArcGIS API for JavaScript是一款由Esri公司开发的用于创建WebGIS应用的JavaScript库。它允许开发者通过调…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023