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…

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;有时候还真的很不好分辨。 万一想要启动…

Candance画运算放大器

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

【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 第一种&…

巨控GRM561/562/563/564Q杀菌信息远程监控

摘要 通过程序编写、手机APP画面制作等运行系统&#xff0c;实现电脑及手机APP显示的历史曲线画面和数据图形化的实时性。 不仅流程效率提升90%以上&#xff0c;同时为杀菌生产提供有利的质量保障&#xff0c;还有效规避因触屏及内存卡的突发异常导致历史数据的丢失&#xff0…

Web实操(6),基础知识学习(24~)

1.[ZJCTF 2019]NiZhuanSiWei1 &#xff08;1&#xff09;进入环境后看到一篇php代码&#xff0c;开始我简单的以为是一题常规的php伪协议&#xff0c;多次试错后发现它并没有那么简单&#xff0c;它包含了基础的文件包含&#xff0c;伪协议还有反序列化 &#xff08;2&#x…

streamlit通过子目录访问

运行命令&#xff1a; streamlit hello 系统默认使用8501端口启动服务&#xff1a; 如果想通过子目录访问服务&#xff0c;可以这么启动服务 streamlit hello --server.baseUrlPath "app" 也可以通过以下命令换端口 streamlit hello --server.port 9999 参考&…

Python - pyplot 画一个漂亮的饼图 Pie charts

目录 一.引言 二.颜色选择 三.绘制饼图 四.总结 一.引言 因工作需求&#xff0c;需要绘制一些数据的饼图&#xff0c;使用默认的颜色绘制不够美观&#xff0c;下面我们找一些好看的颜色美化一些饼图。 二.颜色选择 我们根据 plt 给出的一些好看颜色对应的编码即可为每一个…

HackMyVM-Animetronic

目录 信息收集 arp nmap nikto whatweb WEB web信息收集 feroxbuster steghide exiftool hydra ssh连接 提权 系统信息收集 socat提权 信息收集 arp ┌──(root㉿0x00)-[~/HackMyVM] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 08:00:27:9d:6d:7…