vue与Spring boot数据交互例子【简单版】

news2024/12/24 8:08:35

文章目录

    • 什么是Vue?
    • 快速体验Vue
    • axios是什么?
    • 向Springboot后端发送数据
    • 接收Springboot后端数据
    • 小结

什么是Vue?

官网解释:Vue 是一套用于构建用户界面渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

快速体验Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <!--第一步引入vue.js这个库-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <div>
        输入内容为:{{message}}
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            message: ''
        }
    });
</script>
</html>

其中
v-model是实现表单元素和 Vue 实例中数据的双向绑定

new Vue({...}):这是创建 Vue 实例的语法。在这里,你创建了一个新的 Vue 实例,并传入了一个配置对象作为参数。配置对象包含了 Vue 实例的各种选项,其中 el 指定了 Vue 实例的挂载点(即 HTML 中的元素 ID),这里是 #app,表示 Vue 实例会挂载到 ID 为 app 的元素上。data 选项包含了 Vue 实例的数据属性,这里定义了一个名为 message 的数据属性

el: ‘#app’ 表示 Vue 实例会挂载到 ID 为 app 的 HTML 元素上。具体来说,#app 是 CSS 选择器语法,它表示选择 ID 为 app 的元素(例子在后面)。因此,Vue 实例将会控制位于 <div id="app"> 的元素内的内容。

一旦 Vue 实例挂载到了这个元素上,它就会开始监听这个元素内部的数据变化,并根据模板和数据的变化来更新页面。Vue 实例与挂载点相关联,因此在挂载点内的任何变化都会影响到 Vue 实例的行为,而 Vue 实例的行为也会反过来影响到挂载点内的内容。

CSS选择器语法举例(id选择器)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        #red {
            color: red;
        }
    </style>
</head>
<body>
    <div id="red">
        hello
    </div>
</body>
</html>

#red { color: red; }:这是一个 CSS 样式规则,选择器 #red 匹配 ID 为 “red” 的元素,然后将其文字颜色设置为红色。

axios是什么?

axios 是一个基于 Promise 的 HTTP 客户端,用于在浏览器Node.js 中发起 HTTP 请求。它可以用于从前端应用程序向后端服务器发送请求,并处理服务器响应。

使用 axios 可以方便地发起各种类型的 HTTP 请求,例如 GET、POST、PUT、DELETE 等。它具有许多特性,包括自动转换 JSON 数据、拦截请求和响应、取消请求等。

html中通过引入<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>这行代码,将 axios 库引入到了页面中。这样就使得在页面的 JavaScript 代码中可以使用 axios 发起 HTTP 请求,从而与后端服务器进行数据交互。

向Springboot后端发送数据

前端资源直接放在resources里面
在这里插入图片描述

后端代码:

//定义一个User类
@Data
@AllArgsConstructor
public class User {
    private String name;
    private int age;
}


//controller层
@RestController
@RequestMapping(value = "/test")
public class TestController {
    @GetMapping
    public ArrayList<User> getValue() {
        ArrayList<User> users = new ArrayList<>();
        for (int i = 1; i <= 5; i++) {
            User user = new User("name" + i, 20 + i);
            users.add(user);
        }
        return users;
    }
}

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <!--将 Vue.js 库引入到你的 HTML 页面中-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入这个库 可以快速发送请求-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>

<div id='app'>
    <button @click="getValues">点击获取数据</button>
    <table>
        <tr>
            <th>username</th>
            <th>age</th>
        </tr>
        <tr v-for="user in users">
            <td>{{user.name}}</td><!--因为后端传过来的是name 所以不能用user.username取-->
            <td>{{user.age}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            users: []
        },
        methods: {
            // 发送get请求
            getValues() {
                axios.get('/test')
                    .then(res => {
                        this.users = res.data
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }
        }
    });
</script>
</html>

效果图:
在这里插入图片描述

接收Springboot后端数据

后端代码:

//pojo
@Data
@AllArgsConstructor
public class User {
    private String name;
    private int age;
}

//controller层
@RestController
@RequestMapping(value = "/test")
@Slf4j
public class TestController {
    @PostMapping
    public String postValue(@RequestBody User user) {
        System.out.println(user);
        return "发送成功";
    }
}

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <!--将 Vue.js 库引入到你的 HTML 页面中-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入这个库 可以快速发送请求-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>

<div id='app'>
    <form @submit.prevent="postValues">
        <input type="text" placeholder="username" v-model="user.name" required>
        <input type="text" placeholder="age" v-model="user.age" required>
        <button type="submit">提交</button>
    </form>
    <div>
        {{res}}
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            user: {
                name: '',
                age: ''
            },
            res: ''
        },
        methods: {
            // 发送post请求
            postValues() {
                axios.post('/test', this.user)
                    .then(res => {
                        this.res = res.data
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }
        }
    });
</script>
</html>

效果图:
在这里插入图片描述

小结

引入 Vue.js 和 Axios 库:在 HTML 页面中引入了 Vue.js 和 Axios 库,Vue.js 用于构建前端界面,Axios 用于发送 HTTP 请求。

总的来说,你使用 Vue.jsAxios 实现了前端页面的交互和数据展示,同时使用了 Spring Boot 构建了后端 API,通过 HTTP 请求来获取数据,实现了前后端的数据交互。这种方式可以使得前端页面能够动态地展示后端提供的数据,并与用户进行交互。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

BUUCTF_[BSidesCF 2020]Had a bad day

[BSidesCF 2020]Had a bad day 1.一看题目直接尝试文件包含 2.直接报错&#xff0c;确实是存在文件包含漏洞 http://307b4461-36d6-443f-879a-68803a57f721.node5.buuoj.cn:81/index.php?categoryphp://filter/convert.base64-encode/resourceindex strpos() 函数查找字符串…

【Linux】:文件查看 stat、cat、more、less、head、tail、uniq、wc

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Linux深造日志 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、stat&#xff08;查看文件详细属性信息&#xff09;1.1 内容解析&#xff1a;1.2…

【基础篇】Git 基础命令与核心概念

✅作者简介&#xff1a;大家好&#xff0c;我是小杨 &#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 一&#xff0c;Git 初识 1.1&#xff0c;问题引入 不知道你工作或学习时&#xff0c;有没有遇到…

JAVA前端快速入门基础_javascript入门(01)

写在前面:本文用于快速学会简易的JS&#xff0c;仅做扫盲和参考作用 1.JS是什么 JavaScript是一门跨平台&#xff0c;面向对象的脚本语言(即不需要编译&#xff0c;可以直接通过浏览器进行解释)。JS和Java是两门完全不相同的语言&#xff0c;但是基础的语法是类似的 2.JS的引…

uniapp 微信小程序 分享海报的实现

主页面 <template><view class"page"><!-- 自定义导航栏--><Navbar title"我的海报"></Navbar><view class"container"><poster ref"poster" :imageUrl"image" :imageWidth"7…

【MHA】MySQL高可用MHA源码1-主库故障监控

1 阅读之前的准备工作 1 一个IDE工具 &#xff0c;博主自己尝试了vscode安装perl的插件&#xff0c;但是函数 、变量 、模块等都不能跳转&#xff0c;阅读起来不是很方便。后来尝试使用了pycharm安装perl插件&#xff0c;阅读支持跳转&#xff0c;自己也能写一些简单的测试样例…

达梦(DM) SQL日期操作及分析函数

达梦DM SQL日期操作及分析函数 日期操作SYSDATEEXTRACT判断一年是否为闰年周的计算确定某月内第一个和最后一个周末某天的日期确定指定年份季度的开始日期和结束日期补充范围内丢失的值按照给定的时间单位查找使用日期的特殊部分比较记录 范围处理分析函数定位连续值的范围查找…

【定制化体验:使用Spring Boot自动配置,打造个性化Starter】

项目结构 Pom <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4…

LabVIEW高效目标跟踪系统

LabVIEW高效目标跟踪系统 随着机器视觉技术的飞速发展&#xff0c;设计和实现高效的目标跟踪系统成为了众多领域关注的焦点。基于LabVIEW平台&#xff0c;结合NI Vision机器视觉库&#xff0c;开发了一种既高效又灵活的目标跟踪系统。通过面向对象编程方法和队列消息处理器程序…

【CTF Crypto】CTFShow 萌新 密码3 Writeup(摩尔斯电码+培根密码)

萌新 密码3 3 题目名称&#xff1a;我想吃培根 题目描述&#xff1a; – — .-. … . …–.- … … …–.- -.-. — — .-… …–.- -… …- - …–.- -… .- -.-. — -. …–.- … … …–.- -.-. — — .-… . .-. …–.- – – -… -… – -… – -… – – – -… -… -……

鸿蒙(HarmonyOS)性能优化实战-Trace使用教程

概述 OpenHarmony的DFX子系统提供了为应用框架以及系统底座核心模块的性能打点能力&#xff0c;每一处打点即是一个Trace&#xff0c;其上附带了记录执行时间、运行时格式化数据、进程或线程信息等。开发者可以使用SmartPerf-Host调试工具对Trace进行解析&#xff0c;在其绘制…

yudao-cloud微服务系统系统模块+后台管理系统成功运行

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列文章目录 第一章 芋…

精酿啤酒:酿造工艺的自动化与智能化发展

随着科技的不断进步&#xff0c;自动化与智能化已成为啤酒酿造工艺的重要发展方向。Fendi Club啤酒紧跟时代潮流&#xff0c;积极推动酿造工艺的自动化与智能化发展&#xff0c;旨在提高生产效率、确保产品品质和满足市场需求。 Fendi Club啤酒引入自动化生产设备。他们采用自动…

rabbitmq集群配置

1&#xff0c;配置环境变量 MY_POD_NAME&#xff1a;当前Pod的名称 RABBITMQ_ERLANG_COOKIE&#xff1a;设置Erlang Cookie用于节点间通信安全验证&#xff0c;值来自/nfs/rabbitmq/lib/.erlang.cookie文件内容 RABBITMQ_NODENAME&#xff1a;根据Pod名称动态生成了RabbitMQ…

Typora for Mac:轻量级Markdown编辑器

Typora for Mac是一款专为Mac用户设计的轻量级Markdown编辑器&#xff0c;它以其简洁的界面和强大的功能&#xff0c;成为了Markdown写作爱好者的首选工具。 Typora for Mac v1.8.10中文激活版下载 Typora的最大特色在于其所见即所得的编辑模式&#xff0c;用户无需关心复杂的M…

【软件】ERETCAD-Env:在轨空间环境3D动态仿真软件

文章介绍了Extreme-environment Radiation Effect Technology Computer-Aided Design – Environment (ERETCAD-Env)软件&#xff0c;文章的介绍和展示了ERETCAD-Env软件的功能和特点&#xff0c;这是一款用于动态模拟在轨卫星所处空间环境的计算机辅助设计软件。强调了该软件在…

TCP关闭连接时的一些思考

TCP协议是TCP/IP栈中最复杂的协议&#xff0c;它最大的优点是传输的可靠性&#xff0c;这通过面向连接、按序传输、超时重传、流量控制等机制保证其传输的可靠性。但这并不是我们今天要讨论的重点&#xff01; TCP通信的过程分别是三个阶段&#xff1a;建立连接、传输数据、关…

SpringCloud Hystrix 实战

一、配置 1.引入jar包 单独使用hystrix &#xff0c;不配合openFegin使用的话&#xff0c;单独使用hystrix,需要引入spring-cloud-starter-netflix-hystrix包。要使用的hystrix-dashboard 界面的话需要引入spring-boot-starter-actuator 包和spring-cloud-starter-netflix-hy…

SpringBoot中多数据源灵活切换解决方案

本篇内容介绍了“SpringBoot中如何使用Dynamic Datasource配置多数据源”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 源码地址/文档说明 功能特性: 支持 数据源分组…

通信原理(2)--随机过程

通信原理(2)–随机过程 3.1随机过程的基本概念 随机过程{x(t)}由一族时间函数 x i ( t ) x_i(t) xi​(t)&#xff0c;i1,2.3…组成&#xff0c;每一个时间函数 x i ( t ) x_i(t) xi​(t)称为随机过程{x(t)}的一个样本函数&#xff08;一个实现&#xff09; 每个样本函数在时间…