当前位置: 首页 > 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;因此主要考虑树模型 一般而言&#…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...