1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求

1.Axios的使用

Axios中文文档 | Axios中文网Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.jsicon-default.png?t=N7T8https://www.axios-http.cn/


 

2.与vue整合

 App.vue:

<template><div id="app"><Moviev-for="movie in movies":key="movie.id":title="movie.title":rating="movie.rating"></Movie><Hello></Hello></div>
</template><script>
import Movie from "./components/Movie.vue";
import Hello from "./components/Hello.vue";
import axios from "axios";export default {name: "App",data: function () {return {movies: [{ id: 1, title: "金刚狼1", rating: 9.1 },{ id: 2, title: "金刚狼2", rating: 9.2 },{ id: 3, title: "金刚狼3", rating: 9.3 },],};},created: function () {axios.get("http://localhost:8088/user/findAll").then((res) => {console.log(res.data);});},mounted: function () {console.log("App被挂载完毕");},components: {Movie,Hello,},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

 Movie.vue:

<template><div><h1>{{ title }}</h1><span>{{ rating }}</span><button @click="funSc">点击收藏</button></div>
</template>
<script>
export default {name: "Movie",props: ["title", "rating"],data: function () {return {};},created: function () {console.log("Movie组件被创建了");},methods: {funSc() {alert("收藏成功");},},
};
</script>

测试:

发送网络请求:

打开idea中的mpdemo,并把后端端口改为8088(因为前端已经占用了8080端口)

server.port=8088

 启动idea项目:

此时,一个是8080端口,一个是8088端口,会出现跨域问题 

3.跨域

 

 

 

在8080端口就可以接收到后端的信息

在UserController中加入@CrossOrigin

测试:此时在8080端口就可以接收到后端的信息了

 拿到后端的数据并显示在前端

Hello.vue:

<template><div><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><!-- 第一列 --><el-table-column prop="id" label="编号" width="180"> </el-table-column><!-- 第二列 --><el-table-column prop="username" label="姓名" width="180"></el-table-column><el-table-column prop="birthday" label="生日"> </el-table-column></el-table><i class="fa fa-camera-retro"></i><el-date-picker v-model="value1" type="birthday" placeholder="选择日期"></el-date-picker></div>
</template><script>
import axios from "axios";
export default {methods: {tableRowClassName({ row, rowIndex }) {if (rowIndex === 1) {return "warning-row";} else if (rowIndex === 3) {return "success-row";}return "";},},// 组件被创建的时候,该函数自动调用created: function () {axios.get("http://localhost:8088/user/findAll").then((response) => {this.tableData = response.data;});},data() {return {tableData: [],value1: "",};},
};
</script><style>
.el-table .warning-row {background: oldlace;
}.el-table .success-row {background: #f0f9eb;
}
</style>

App.vue:

<template><div id="app"><Moviev-for="movie in movies":key="movie.id":title="movie.title":rating="movie.rating"></Movie><Hello></Hello></div>
</template><script>
import Movie from "./components/Movie.vue";
import Hello from "./components/Hello.vue";
import axios from "axios";export default {name: "App",data: function () {return {movies: [{ id: 1, title: "金刚狼1", rating: 9.1 },{ id: 2, title: "金刚狼2", rating: 9.2 },{ id: 3, title: "金刚狼3", rating: 9.3 },],};},created: function () {},mounted: function () {console.log("App被挂载完毕");},components: {Movie,Hello,},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

测试:此时可以拿到后端的数据并显示在前端了

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

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

相关文章

【mobx-入门与思考】

介绍 mobx 是 nodejs生态中的框架&#xff0c; 主要用于做状态管理&#xff0c;可以监控变量状态的变化。 nodejs中除了mobx&#xff0c;还有个redux&#xff0c;也是做状态管理的&#xff0c;都是比较成熟的框架&#xff0c;二者的选择可以参考 【nodejs状态管理: Redux VS M…

代码随想录算法训练营第六十三天|84.柱状图中的最大矩形

文档链接&#xff1a;https://programmercarl.com/ LeetCode84.柱状图中的最大矩形 题目链接&#xff1a;https://leetcode.cn/problems/largest-rectangle-in-histogram/ 思路&#xff1a;跟接雨水很相似 单调栈&#xff1a; class Solution { public:int largestRectang…

mac电脑如何安装python及环境搭建

&#xff08;1&#xff09;进入官网&#xff1a;Download Python | Python.org&#xff0c;根据自己电脑选择python (2)这里我选择的是mac,点击&#xff1a;macos&#xff0c;选择最近版本并点击进入 (3)选择mac版本&#xff1a; (4)点击就可以进入下载&#xff1a; (5)下载好之…

京东工业优选商品详情API接口:解锁高效工业采购新体验

京东工业优选的商品详情API接口&#xff0c;允许开发者通过程序化的方式&#xff0c;快速获取平台上的商品详细信息。这些详细信息包括但不限于商品名称、价格、规格、库存、图片、评价等&#xff0c;为企业提供全方位的商品信息查询服务。 二、API接口的主要功能 实时查询&a…

Baidu Comate——您的智能编码伙伴

文章目录 1.Baidu Comate智能编码助手简介2.Baidu Comate安装使用3.查看Comate插件功能4.Baidu Comate基础功能介绍✨注释生成代码✨实时续写✨函数注释✨行间注释✨代码解释✨单元测试生成✨代码优化✨技术问答 5.使用体验结语 1.Baidu Comate智能编码助手简介 ✨Baidu Comat…

电脑装了两个Win10系统,怎么修改其名称方便识别?

前言 有小伙伴在上一期的双系统教程上留言说怎么修改双系统引导时候显示的名称 不然看起来两个系统好像都没啥分别&#xff0c;如果是Windows10Windows11的方案还好说&#xff0c;但如果是两个Windows10或者是两个Windows11&#xff0c;有时候还真的很不好分辨。 万一想要启动…

MySQL主从复制失败的全面指南:原因、诊断与解决方案

在数据库管理和维护的世界里&#xff0c;MySQL的主从复制是一种常见的技术&#xff0c;旨在增强数据的可用性和可靠性。通过复制&#xff0c;数据从一个主数据库服务器自动同步到一个或多个从数据库服务器。尽管这听起来很理想&#xff0c;但实际操作中可能会遇到复制失败的情况…

Java面试题:解释Phaser类的作用以及它如何帮助多线程同步

Phaser 是 Java 并发包 java.util.concurrent 中的一个同步辅助类&#xff0c;它用于多线程之间的同步。Phaser 的设计灵感来自于“相位”的概念&#xff0c;它允许多个线程在多个不同的阶段&#xff08;phase&#xff09;中相互协调&#xff0c;从而实现复杂的线程协作。 以下…

Candance画运算放大器

根据拉扎维《模拟CMOS集成电路设计》第九章第一个放大器进行搭建电路图。 此电路图中两个NMOS栅极互联是因为NMOS的衬底要接片上最低电压。所以要两个互联并接到最低点。 因为两条支路上的器件都是一样的&#xff0c;所以这两条路平分idc的直流电流。 测试的时候要加上下图这两…

【C语言】学习C语言

C语言简介 C语言是一门十分流行的编程语言&#xff0c;由美国贝尔实验室的 Dennis Ritchie 在 20 世纪 70 年代开发。 C语言具有高效、可移植、灵活、简单等特点&#xff0c;被广泛应用于操作系统、编译器、数据库、图形界面、嵌入式系统、网络通信、游戏等领域。 本文将带你…

Spring 事务失效的几种情况

目录 1. 事务方法不是public 2. 自调用问题 3. 异常处理不当 4. 数据源或事务管理器配置错误 5. 事务传播行为不当 6. 代理方式不正确 7. 事务同步问题 1. 事务方法不是public 在Spring中&#xff0c;默认情况下&#xff0c;只有public方法上的Transactional注解才会被代…

【Ajax零基础教程】-----第一课 Ajax简介

一、什么是ajax ajax即 Asynchronous javascript And XML (异步 javaScript 和 XML) 是一种创建交互式&#xff0c;快速动态应用的网页开发技术&#xff0c;无需重新加载整个网页的情况下&#xff0c;能够更新页面局部数据的技术。 二、为什么使用Ajax 通过在后台与服务器进行少…

天锐绿盾 | 办公加密系统,源代码防泄密、源代码透明加密、防止开发部门人员泄露源码

天锐绿盾作为一款专注于数据安全与防泄密的专业解决方案&#xff0c;它确实提供了针对源代码防泄密的功能&#xff0c;帮助企业保护其核心的知识产权。 PC地址&#xff1a; https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 以下是天锐绿盾可能采…

值得收藏!修复Windows 10/11中找不到输出或输入设备的五种方法

序言 这篇文章主要关注处理声音输出/输入设备未发现的问题。它提供了许多可行的方法,帮助了许多Windows用户。阅读以下内容以找到你的解决方案。 最近,我将Windows 10更新到21H2,发现我的音频无法工作。当我把鼠标放在任务栏上的声音图标(上面有一个十字图标)上时,它会…

6.Nginx

Nginx反向代理 将前端发送的动态请求有Nginx转发到后端服务器 那为何要多一步转发而不直接发送到后端呢&#xff1f; 反向代理的好处&#xff1a; 提高访问速度&#xff08;可以在nginx做缓存&#xff0c;如果请求的是同样的接口地址&#xff0c;这样就不用多次请求后端&#…

TCP经典异常问题探讨与解决

作者&#xff1a;kernelxing TCP的经典异常问题无非就是丢包和连接中断&#xff0c;在这里我打算与各位聊一聊TCP的RST到底是什么&#xff1f;现网中的RST问题有哪些模样&#xff1f;我们如何去应对、解决&#xff1f;本文将从RST原理、排查手段、现网痛难点案例三个板块自上而…

鸿蒙编译子系统详解(二)main.py

1.5.4源码解析 1.5.4.1 build/hb/main.py脚本 这个脚本是编译的主程序脚本&#xff0c;流程如下&#xff1a; 首先是初始化各种module类&#xff0c;然后运行对应模块。 hb分为build,set,env,clean,tool,help几个模块&#xff0c;模块源码位于build/hb/modules/目录下&#xff…

ctfshow——SSRF

文章目录 web 351web 352web 353web 354web 355web 356web357web 358web 359web 360 SSRF(Server-Side Request Forgery&#xff1a;服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下&#xff0c;SSRF攻击的目标是从外网无法访问的内部系统…

python实现的信号合成分析系统(DSP)

python实现的信号合成分析系统(DSP) 流程 1、在QT界面上设置好信号频率,采样频率,采样点数 2、使用np构建sin函数 3、使用matplotlib画出 4、分别分析合成信号的FFT频域信息1、效果图 2、示例代码 def btn_com_clicked(self):# 信号合成分析Fs = self.com_fs_edit_value #…

C++程序设计教案

文章目录&#xff1a; 一&#xff1a;软件安装环境 第一种&#xff1a;vc2012 第二种&#xff1a;Dev-C 第三种&#xff1a;小熊猫C 二&#xff1a;语法基础 1.相关 1.1 注释 1.2 换行符 1.3 规范 1.4 关键字 1.5 ASCll码表 1.6 转义字符 2.基本框架 2.1 第一种&…