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://xiahunao.cn/news/3017696.html

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

相关文章

初识Node.js-认识node(安装Node.js环境配置)

目录 一、node介绍 1.概念和特点 2.核心功能 3.应用场景 二、Node初使用 1.安装node配置 windows上安Node.js 1.windows安装包&#xff08;.msi&#xff09; 2、Windows 二进制文件 (.exe)安装 Linux 上安装 Node.js 直接使用已编译好的包 Ubuntu 源码安装 Node.js …

6W 1.5KVDC. 单、双输出 DC/DC 电源模块——TP2L-6W 系列

TP2L-6W系列是一款高性能、超小型的电源模块&#xff0c;2:1电压输入&#xff0c;输出有稳压和连续短路保护功能&#xff0c;隔离电压为1.5KVDC、作温度范围为–40℃到85℃。特别适合对输出电压的精度有严格要求的地方&#xff0c;外部遥控功能对您的设计又多一项选择&#xff…

代码随想录算法训练营第十八天:二叉树的层序遍历(中间放假)

代码随想录算法训练营第十八天&#xff1a;二叉树的层序遍历&#xff08;中间放假&#xff09; ‍ ​​ 102.二叉树的层序遍历 力扣题目链接(opens new window) 给你一个二叉树&#xff0c;请你返回其按 层序遍历 得到的节点值。 &#xff08;即逐层地&#xff0c;从左到右…

干货分享-策划人都在用的活动策划网站

职场上&#xff0c;学会借力&#xff0c;学会‘抄’&#xff0c;比辛辛苦苦做老黄牛&#xff0c;更能事倍功半&#xff0c;不仅自己省事省力&#xff0c;还能获得更多升职加薪的机会。 那么&#xff0c;职场新人如何快速的写出一份领导满意的方案&#xff1f; 今天分享的‘抄…

Java性能优化(五)-多线程调优-Lock同步锁的优化

作者主页&#xff1a; &#x1f517;进朱者赤的博客 精选专栏&#xff1a;&#x1f517;经典算法 作者简介&#xff1a;阿里非典型程序员一枚 &#xff0c;记录在大厂的打怪升级之路。 一起学习Java、大数据、数据结构算法&#xff08;公众号同名&#xff09; ❤️觉得文章还…

Windows系统和unbtun系统连接usb 3.0海康可见MVS和红外艾睿相机

一.海康可见USB3.0工业面阵相机 海康usb相机需要去海康官网上下载对应系统的MVS客户端及SDK开发包 海康机器人-机器视觉-下载中心 选择Windows系统和unbtun&#xff08;我是linux aarch64,所以选择了对应压缩包解压&#xff09; Windows系统 1.双击安装包进入安装界面&…

重庆大足某厂不锈钢管件酸洗钝化-智渍洁

简报&#xff1a;重庆大足某厂不锈钢管件酸洗钝化 重庆大足某厂不锈钢管件酸洗钝化 - 重庆智渍洁环保科技有限公司简报&#xff1a;重庆大足某厂不锈钢管件酸洗钝化https://www.zhizijie.com/hl/zixun/gongsi/237.html

Bookends for Mac v15.0.2 文献书籍下载管理

Bookends Mac版可以轻松地将其导入参考 &#xff0c;并直接搜索和进口从数以百计的线上资料来源。Bookends Mac版使用内置在浏览器中下载参考与PDF格式的文件&#xff0c;或和/或网页的点击。 Bookends for Mac v15.0.2注册激活版下载 本文由 mdnice 多平台发布

【一看就懂】UART、IIC、SPI、CAN四种通讯协议对比介绍

UART、IIC、SPI、CAN四种通信协议对比 通信方式传输线通讯方式标准传输速度使用场景UARTTX(发送数据线)、RX(接收数据线)串行、异步、全双工115.2 kbit/s(常用)计算机和外部设备通信&#xff08;打印机&#xff09;IICSCL(时钟线)、SDA(数据线)串行、同步、半双工100 kbit/s(标…

ASP.NET MVC企业级程序设计 (入住退房,删除)

目录 效果图 实现过程 控制器代码 DAL BLL Index 效果图 实现过程 控制器代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;namespace MvcApplication1.Controllers {public class HomeController …

最新游戏陪玩语音聊天系统3.0商业升级独立版本源码+搭建教程

首发价值29800元的最新商业版游戏陪玩语音聊天系统3.0商业升级独立版本源码。 下 载 地 址 &#xff1a; runruncode.com/php/19748.html 1. 新增人气店员轮播功能。 2. UI界面优化&#xff0c;包括游戏图标展示和分类展示的改进。 3. 增加动态礼物打赏功能。 4. 新增礼…

CANdela/Diva系列2--CANdela Studio的工作树介绍1

本系列的第一篇文章&#xff08;CANdela/Diva系列1--CANdela Studio的基本介绍&#xff09;主要介绍了CANdela这个工具&#xff0c;本篇文章将对CANdela Studio的工作树的每个模块进行详细介绍&#xff0c;不啰嗦&#xff0c;直接开始&#xff01; 目录 1. ECU Information的…

【ARM Cortex-M3指南】8:中断行为

文章目录 八、中断行为8.1 中断/异常流程8.1.1 压栈8.1.2 取向量8.1.3 寄存器更新 8.2 异常退出8.3 嵌套中断8.4 末尾连锁中断8.5 延迟到达8.6 进一步了解异常返回值8.7 中断等待8.8 中断相关的错误8.8.1 压栈8.8.2 出栈8.8.3 取向量8.8.4 非法返回 八、中断行为 8.1 中断/异常…

机器学习第二天(监督学习,无监督学习,强化学习,混合学习)

1.是什么 基于数据寻找规律从而建立关系&#xff0c;进行升级&#xff0c;如果是以前的固定算式那就是符号学习了 2.基本框架 3.监督学习和无监督式学习&#xff1a; 监督学习&#xff1a;根据正确结果进行数据的训练&#xff1b; 在监督式学习中&#xff0c;训练数据包括输…

【数据结构与算法】力扣 239. 滑动窗口最大值

题干描述 给你一个整数数组 nums&#xff0c;有一个大小为 k **的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输入&#xff1a; nums [1,3,-1,-3,5,3…

HP Z620 服务器打开VTx虚拟技术

在使用Virtual Box的时候&#xff0c;虚拟主机启动报错&#xff1a;提示需要VTx。于是到bios里面去设置VTx。 这里有个小坑&#xff0c;就是HP 的bios配置里面&#xff0c;VTx不在常规的“System Configuration”、“Advanced”等地方&#xff0c;而是在“Security”菜单里&…

[C++基础学习-04]----C++数组详解

前言 在C中&#xff0c;数组是一种用来存储相同类型元素的数据结构。一维数组是最简单的数组形式&#xff0c;它由一系列按顺序存储的元素组成。二维数组则是由一维数组构成的数组&#xff0c;可以看作是一堆一维数组堆叠在一起形成的矩阵。 正文 01-数组简介 一维数组和二维…

uni-app安卓本地打包个推图标配置

如果什么都不配置&#xff0c;默认的就是个推小鲸鱼图标 默认效果 配置成功效果 个推图标配置 新建目录 drawable-hdpi、drawable-ldpi、drawable-mdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi 目录中存放图标 每个目录中存放对应大小的图标&#xff0c;大图…

react引入阿里矢量库图标

react引入阿里矢量库图标 登录阿里矢量库&#xff0c;将项目所需的图标放一起 react项目中新建文件夹MyIcon.js 3. 在页面中引入&#xff0c;其中type为图标名称

C++之类与对象

1、类声明 2、共有、私有、保护成员。&#xff08;就比如说你一个变量是private的&#xff0c;然后在main函数中&#xff0c;就调用不了&#xff0c;只能在这个类.cpp中调用&#xff09; 3、数据抽象和封装 4、内联函数 内存体积会增大&#xff0c;以空间换时间&#xff1a;编…