当前位置: 首页 > news >正文

SpringBoot +Vue3 简单的前后端交互

前端:Vue3

创建项目:

npm create vue@latest

> cd <your-project-name>

> npm install

> npm run dev

项目结构图如下:

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>

测试代码:


@RestController
@RequestMapping("/login")
public class Login {@RequestMapping("/login")public String login(){return "登录成功";}
}

相关文章:

SpringBoot +Vue3 简单的前后端交互

前端&#xff1a;Vue3 创建项目&#xff1a; npm create vuelatest > cd <your-project-name> > npm install > npm run dev 项目结构图如下&#xff1a; 1、查看入口文件内容&#xff1a;main.js 代码如下&#xff1a; import ./assets/main.css impor…...

【Android】Mobile-Security-Framework-MobSF Manifest 静态扫描规则

前言 移动安全框架&#xff08;MobSF&#xff09;是一个自动化的一体化移动应用程序&#xff08;Android/iOS/Windows&#xff09;测试、恶意软件分析和安全评估框架&#xff0c;能够执行静态和动态分析。MobSF支持移动应用程序二进制文件&#xff08;APK、XAPK、IPA和APPX&am…...

【C++】初谈迭代器

文章目录 前言一、什么是迭代器二、迭代器的分类三、迭代器的用法总结 前言 迭代器是一种可以访问和遍历容器中元素的对象&#xff0c;它类似于指针&#xff0c;但是具有更多的功能和灵活性。本文将介绍C迭代器的基本概念、分类、用法和注意事项。 一、什么是迭代器 迭代器&a…...

PL端案例开发手册

目 录 前 言 1 工程编译、程序加载方法 1.1 工程编译 1.2 程序加载 2 led-flash 2.1 案例说明 2.2 操作说明 2.3 关键代码 更多帮助 前 言 本文主要介绍PL端案例的使用说明&#xff0c;适用开发环境&#xff1a;Windows 7/10 64bit、Xilinx Unified 20…...

华为OD-整数对最小和

题目描述 给定两个整数数组array1、array2&#xff0c;数组元素按升序排列。假设从array1、array2中分别取出一个元素可构成一对元素&#xff0c;现在需要取出k对元素&#xff0c;并对取出的所有元素求和&#xff0c;计算和的最小值 代码实现 # coding:utf-8 class Solution:…...

Ubuntu 22LTS 配置静态IP

可行方法&#xff0c;需界面配置 转载自&#xff1a;哔哩哔哩链接地址 命令行配置&#xff1a;待补充...

【Python】Python爬虫:网络数据的提取利器

随着互联网的快速发展&#xff0c;网络数据已经成为了一项重要的资源。如何从海量的网络数据中提取出我们需要的信息&#xff0c;就成为了各个行业都需要解决的问题。而Python爬虫&#xff0c;就是解决这个问题的利器。 首先&#xff0c;让我们了解一下什么是Python爬虫。Pyth…...

20.图的遍历

目录 一. 深度优先遍历 二. 广度优先遍历 图的遍历算法和二叉树不同的是&#xff0c;图中可能存在回路&#xff0c;且图的任一顶点都可能与其它顶点相通&#xff0c;在访问完某个顶点之后可能会沿着某些边又回到了曾经访问过的顶点。为了避免重复访问&#xff0c;我们的解决思…...

ARM DIY(一)电源、SD卡座、SOC 调试

文章目录 前言加热台焊接热风枪吹焊电烙铁补焊电源调试SD 卡座调试DRAM 电路调试串口电路调试SOC 调试成品 前言 之前打样的几块 ARM 板&#xff0c;一直放着没去焊接。今天再次看到&#xff0c;决定把它焊起来。 加热台焊接 为了提高焊接效率&#xff0c;先使用加热台焊接…...

数学建模知识之小白入门篇

数学建模知识--小白入门篇 一、数学模型的定义二、建立数学模型的方法和步骤1. 模型准备2. 模型假设3. 模型构成4. 模型求解5. 模型分析 三、数模竞赛出题的指导思想四、竞赛中的常见题型1. 实际问题背景2&#xff0e;若干假设条件3&#xff0e;要求回答的问题 五、提交一篇论文…...

【日常积累】Linux下ftp服务安装

概述 FTP是一种在互联网中进行文件传输的协议&#xff0c;基于客户端/服务器模式&#xff0c;默认使用20、21号端口&#xff0c;其中端口20用于进行数据传输&#xff0c;端口21用于接受客户端发出的相关FTP命令与参数。FTP服务器普遍部署于内网中&#xff0c;具有容易搭建、方…...

确定了,TikTok将于9月12日正式关闭美国半闭环

外媒报道称&#xff0c;TikTok已对其官网的常见问题页面进行了更新。消息显示&#xff0c;其在美国和英国市场运营的半封闭模式将于9月12日正式结束&#xff0c;并将全力推进TikTok闭环小店业务。尽管我们早在本月初就获悉了这一消息&#xff0c;但实际得知后仍不免有些感慨。曾…...

ATFX汇评:英国7月零售销售年率大降,GBPUSD仍未升破1.3000

ATFX汇评&#xff1a;7月季调后零售销售年率&#xff0c;最新值-3.2%&#xff0c;前值-1.6%&#xff0c;降幅扩大&#xff1b;7月季调后核心零售销售年率&#xff0c;最新值-3.4%&#xff0c;前值-1.6%&#xff0c;降幅扩大。零售销售综合衡量除服务业外包括所有主要从事零售业…...

CTFhub-sqli注入-Referer注入

在最后添加 Referer: (注意 R 大写&#xff0c; Referer后面是 &#xff1a;&#xff0c;Content-Length: 与 Referer: 之间没有空行) 1 2 3 1 union select 1,database() -1 union select 1,database() -1 union select 1,group_concat(table_name)from information_sche…...

【案例】登录注册

<template><div class"loginhome"><Header :butShow"butShow"></Header><div class"formdiv"><div style"text-align:center;padding:10px;"><h3>你好登录账号{{ stauts 3? 注册:登录 }}…...

Unity 物体的运动之跟随鼠标

你想让鼠标点击哪里&#xff0c;你的运动的对象就运动到哪里吗&#xff1f; Please follow me ! 首先&#xff0c;你要先添加一个Plane ,以及你的围墙&#xff0c;你的移动的物体 想要实现跟随鼠标移动&#xff0c;我们先创建一个脚本 using System.Collections; using Syst…...

C++基础Ⅱ变量

目录儿 4 变量4.1 原始数据类型字符 char整型 short整型 int整型 long整型 long long单精度浮点型 float双精度浮点型 double布尔型 bool 4.2 sizeof 关键字 5 指针和引用 4 变量 4.1 原始数据类型 原始数据类型是构建C程序的最基础数据类型 所有数据都是基于这些原始数据类型…...

Linux管理SpringBoot应用shell脚本实现

Liunx系统如何部署和管理SpringBoot项目应用呢&#xff1f;最简单的方法就是写个shell脚本。 Spring Boot是Java的一个流行框架&#xff0c;用于开发企业级应用程序。下面我们将学习如何在Linux服务器上部署Spring Boot应用&#xff0c;并通过一个脚本实现启动、停止、重启等操…...

一篇搞懂浏览器的工作原理(万字详解)

摘要 本文是学习极客时间上的课程&#xff0c;进而整理出的浏览器工作原理。 第一部分&#xff1a;浏览器的进程和线程 &#xff08;1&#xff09;进程和线程的区别&#xff1f; 在浏览器中&#xff0c;各个进程负责处理自己的事情&#xff0c;而不同的进程中&#xff0c;也…...

C语言调用python训练的机器学习模型(项目需求轻体量)

问题描述 机器学习模型基本上都是python下的实现与使用&#xff0c;有关C如何调用训练好的模型或是C实现模型的相关教程相对较少 同时&#xff0c;项目需求整个模型大小尽可能小&#xff0c;大概在几十Kb 由于是表格类型的数据&#xff0c;因此主要考虑树模型 一般而言&#…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...