Vue使用axios实现调用后端接口

 准备后端接口

首先,我已经写好一个后端接口用来返回我的用户数据,并用Postman测试成功如下:

 以我的接口为例,接口地址为:http://localhost:8080/user/selectAll

返回Json为:

{"code": "200","msg": "请求成功","date": [{"id": 1,"username": "乐乐乐","usersex": "女","userborn": "2002-03-15","useraddress": "地球","userphone": "18055985888","useremail": "123@qq.com","avatar": "assets/img/userimg.jpg","state": true,"loginID": 1},{"id": 4,"username": "nimo","usersex": "男","userborn": null,"useraddress": null,"userphone": "18058955635","useremail": null,"avatar": "assets/img/猎鹰_proc.jpg","state": false,"loginID": 0}]
}

 axios基础方法

安装好axios,不会的话看一下这个文章:VS code vue 使用ElementUI和axios_vs code使用axios-CSDN博客

在需要接口数据的前端页面中加入下面的代码:

<script>
import axios from "axios"export default {data () {return {users: [] //用来装返回的数组数据}},mounted () {axios.get('http://localhost:8080/user/selectAll').then(res => {console.log(res.data)this.users = res.data.date})}
};</script>

如果控制台输出成功那么就成功了

 封装进阶

还可以再进一步,对axios做一个拦截器处理,对返回的数据和请求做一个统一处理

新建一个名为request.js的文件,代码如下:

import router from "@/router"
import axios from "axios"const request = axios.create({baseURL: 'http://localhost:8080',timeout: 30000
})//response拦截器
//发送请求时统一处理,如加token
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8'let user = JSON.parse(localStorage.getItem("hon-admin") || '{}')config.headers['token'] = user.token//设置请求头return config
}, error => {console.error('request error: ' + error)return Promise.reject(error)
})//response拦截器
//接口响应后统一处理结果
request.interceptors.response.use(response => {let res = response.data//兼容服务端返回的字符串数据if (typeof res === 'string') {res = res ? JSON.parse(res) : res}//没有权限跳转到登录if (res.code === '401') {router.push('/login')}return res},error => {console.error('response error:' + error)return Promise.reject(error)}
)export default request

这是,前端代码为:

<script>
//引用request文件
import request from "@/utils/request"export default {data () {return {logins: []}},mounted () {request.get('/user/selectAll').then(res => {this.logins = res.dateconsole.log(this.logins)})}
};</script>

这样跟规范,代码也更加简洁

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

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

相关文章

docker制作高版本jdk17镜像踩坑

1、创建目录并下载jdk上传到服务器中 从jdk官网下载jdk17镜像&#xff0c;提示&#xff1a;下载到本地用xftp上传到服务器&#xff08;速度会快点&#xff09; jdk官网&#xff1a;https://www.oracle.com/java/technologies/downloads/#graalvmjava21 创建目录&#xff0c;将…

Ubuntu系统编译内核——deb安装 / install安装

摘要 本文简要记录两种编译内核的方法&#xff1a; 打包成deb模块安装&#xff08;推荐&#xff09;&#xff1b;直接make install安装&#xff1b; 更推荐使用——打包成deb模块安装&#xff0c;因为可以方便的拷贝下次其他机器使用。 1. 编译环境准备 系统&#xff1a;lin…

强化学习——学习笔记3

一、强化学习都有哪些分类&#xff1f; 1、基于模型与不基于模型 根据是否具有环境模型&#xff0c;强化学习算法分为两种&#xff1a;基于模型与不基于模型 基于模型的强化学习(Model-based RL)&#xff1a;可以简单的使用动态规划求解&#xff0c;任务可定义为预测和控制&am…

cesium 实现自定义弹窗并跟随场景移动

cesium 添加点位自定义弹窗跟随场景移动 完整代码演示可直接copy使用 1 效果图&#xff1a; 2 深入理解 就是原始点位的数据 id>property 点位真实渲染到球体上的笛卡尔坐标系 id>_polyline 的路径下 可以通过 3 代码示例 <!DOCTYPE html> <html lang"…

【数据分享】2017-2023年全球范围10米精度土地覆盖数据

土地覆盖数据是我们在各项研究中都非常常用的数据&#xff0c;土地覆盖数据的来源也有很多。之前我们分享过欧空局发布的2020年和2021年的10米分辨率的土地覆盖数据,也分享过我国首套1米分辨率的土地覆盖数据&#xff08;均可查看之前的文章获悉详情&#xff09;&#xff01; …

管道液位传感器可以检测哪些液体?

管道液位传感器是一种专门用于检测流动性比较好的液体的传感器装置。它采用光学感应原理&#xff0c;不涉及任何机械运动&#xff0c;具有长寿命、安装方便和微功耗的特点。相比传统机械式液位传感器&#xff0c;光电管道传感器有效解决了低精度和卡死失效等问题&#xff0c;同…

Django 解决 CSRF 问题

在 Django 出现 CSRF 问题 要解决这个问题&#xff0c;就得在 html 里这么修改 <!DOCTYPE html> <html><head></head><body><form action"/login/" method"post">{% csrf_token %}</form></body> </…

短视频脚本创作的五个方法 沈阳短视频剪辑培训

说起脚本&#xff0c;我们大概都听过影视剧脚本、剧本&#xff0c;偶尔可能在某些综艺节目里听过台本。其中剧本是影视剧拍摄的大纲&#xff0c;用来指导影视剧剧情的走向和发展&#xff0c;而台本则是综艺节目流程走向的指导大纲。 那么&#xff0c;短视频脚本是什么&#xf…

探析GPT-4o:技术之巅的跃进

如何评价GPT-4o? 简介&#xff1a;最近&#xff0c;GPT-4o横空出世。对GPT-4o这一人工智能技术进行评价&#xff0c;包括版本间的对比分析、GPT-4o的技术能力以及个人感受等。 随着人工智能领域的不断发展&#xff0c;GPT系列模型一直处于行业的前沿。最近&#xff0c;GPT-4…

前端实习记录——git篇(一些问题与相关命令)

1、版本控制 &#xff08;1&#xff09;版本回滚 git log // 查看版本git reset --mixed HEAD^ // 回滚到修改状态&#xff0c;文件内容没有变化git reset --soft HEAD^ // 回滚暂存区&#xff0c;^的个数代表几个版本git reset --hard HEAD^ // 回滚到修改状态&#xff…

生态农业:引领未来农业新篇章

生态农业&#xff0c;正以其独特的魅力和创新理念&#xff0c;引领着未来农业发展的新篇章。在这个充满变革的时代&#xff0c;我们需要更加关注农业的可持续发展&#xff0c;而生态农业正是实现这一目标的重要途径。 生态农业产业的王总说&#xff1a;生态农业强调生态平衡和可…

【文档+源码+调试讲解】古典舞在线交流平台的设计与实现

摘 要 随着互联网技术的发展&#xff0c;各类网站应运而生&#xff0c;网站具有新颖、展现全面的特点。因此&#xff0c;为了满足用户古典舞在线交流的需求&#xff0c;特开发了本古典舞在线交流平台。 本古典舞在线交流平台应用Java技术&#xff0c;MYSQL数据库存储数据&…

FreeRTOS【7】队列使用

1.开发背景 操作系统提供了多线程并行的操作&#xff0c;为了方便代码的维护&#xff0c;各个线程都分配了专用的内存并处理对应的内容。但是线程间也是需要协助操作的&#xff0c;例如一个主线程接收信息&#xff0c;会把接收的信息并发到其他线程&#xff0c;即主线程不阻塞&…

[LitCTF 2023]yafu (中级) (素数分解)

题目&#xff1a; from Crypto.Util.number import * from secret import flagm bytes_to_long(flag) n 1 for i in range(15):n *getPrime(32) e 65537 c pow(m,e,n) print(fn {n}) print(fc {c})n 152412082177688498871800101395902107678314310182046454156816957…

3D模型展示适合哪些类型的产品?

3D模型展示特别适合那些需要全面展示产品细节和特性的商品&#xff0c;产品3D交互展示具有直观性、动态性、交互性等显著优势&#xff0c;可以通过51建模网一站式完成商品3D建模、3D展示、3D定制、AR试穿等功能&#xff0c;以下是一些适合使用3D模型展示的产品类型&#xff1a;…

npm镜像源管理、nvm安装多版本node异常处理

查看当前使用的镜像源 npm config get registry --locationglobal 设置使用官方源 npm config set registry https://registry.npmjs.org/ --locationglobal 设置淘宝镜像源 npm config set registry https://registry.npm.taobao.org/ --locationglobal 需要更改淘宝镜像源地址…

Java培训后找不到工作,现在去培训嵌入式可行吗?

最近java 工作还是比较好找&#xff0c;不知道你是对薪资要求太高&#xff0c;还是因为其他原因&#xff0c;如果你真的面试了很多都还找不到工作&#xff0c;那么一定要知道找不到工作的原因是啥&#xff0c;一定不是因为java 太卷&#xff0c;你说那个行业&#xff0c;那个职…

多用户协作与实时渲染:3D开发工具HOOPS助力汽车行业CAD可视化

在当今汽车行业&#xff0c;计算机辅助设计&#xff08;CAD&#xff09;可视化是产品设计和开发过程中不可或缺的一环。随着汽车设计复杂性的增加&#xff0c;CAD可视化不仅仅是一个设计工具&#xff0c;更是一个沟通和协作的平台。然而&#xff0c;尽管技术不断进步&#xff0…

Vue3实战笔记(51)—Vue 3封装带均线的k线图

文章目录 前言带均线的k线图总结 前言 继续封装一个封装带均线的k线图 带均线的k线图 EChartsCandlestickSh.vue&#xff1a; <template><div ref"chartContainer" style"width: 100%; height: 500px"></div></template><scr…

西湖大学提出AIGC检测框架,精准识别AI撰写的文稿

近年来人工智能技术突飞猛进&#xff0c;尤其是大语言模型的出现&#xff0c;让AI具备了创作文章、小说、剧本等内容的能力。 AI代写&#xff0c;已经逃不过老师、编辑、审稿人的火眼金睛了。但让AI仅改写部分片段&#xff0c;就安全了么&#xff1f; 针对检测AI改写的片段&a…