vue跨域请求

vue.config.js

  devServer:{proxy:"http://localhost:8081"}

main.js中定义

import axios from "axios";
axios,

App.vue中引用

<template><Article/>
</template><script>
import Article from "@/components/Article";
export default {name: 'App',components: {Article}
}
</script>

Article.vue中请求获取数据

<template><div><ul v-for="item in data" :key="item"><li>{{item.id}}</li><li>{{item.title}}</li><li>{{item.content}}</li><li>{{item.categoryId}}</li><li>{{item.createUser}}</li><li>{{item.coverImg}}</li><li>{{item.state}}</li><li>{{item.createTime}}</li><li>{{item.updateTime}}</li></ul></div>
</template><script>
import axios from 'axios'
export default {name: "MyArticle",data(){return {data:[]}},created() {this.getAll();},methods:{getAll(){axios.get('http://localhost:8080/article/getAll').then(require=>{this.data=require.data}).catch(err=>{console.log("请求失败了",err)})}}
}
</script><style scoped></style>

效果:(数据展示)

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

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

相关文章

vue3中的customRef创建一个自定义的 ref对象

customRef 创建一个自定义的 ref&#xff0c;并对其依赖项跟踪和更新触发进行显式控制 小案例: 自定义 ref 实现 debounce <template><div style"font-size: 14px;"><input v-model"text" placeholder"搜索关键字"/><…

【 DIY 普通 连接器 产品规格 】A JST

一、说明 以JST举例&#xff0c;这个基本算标杆产品&#xff0c;深受大家喜欢&#xff0c;但是JST被国内的作坊模仿其外观&#xff0c;以至于真假难辨。 二、民用及DIY的市场 在这里不必考虑可靠性&#xff0c;维修性&#xff0c;保障性等&#xff0c;大家比较关心的还是价格…

buuctf web [RoarCTF 2019]Easy Calc

试了一下&#xff0c;数字可以计算&#xff0c;但字符被过滤了&#xff0c;打开源码看看 源码里提示&#xff0c;有waf,并且发现了一个新页面 访问新页面 show_source&#xff08;&#xff09; show_source()函数用于将指定文件的源代码输出到浏览器或者写入到文件中。 show_s…

ESP32-Web-Server编程-JS 基础 1

ESP32-Web-Server编程-JS 基础 1 概述 前述分别在 HTML 基础 和 CSS 基础 中介绍了 HTML、CSS 的基本内容。HTML 定义了网页中包含哪些对象&#xff0c;CSS 定义了对象的显示样式。JavaScript(LiveScript)是一种运行于客户端的解释性脚本语言&#xff0c;使 HTML 页面更具动态…

入金牌投资平台,学先进炒股技术,掌未来宝贵财富

钱是个好东西&#xff0c;它能让人享受到世间的甜&#xff0c;它能让人感受到万众瞩目的荣耀&#xff0c;它能让人得到一切该有的尊敬。可以这么说&#xff0c;没有人不爱钱。可是&#xff0c;君子爱财取之有道。对于正常的人而言&#xff0c;都只希望通过正规的渠道赚到尽可能…

IE工业工程不可不知的高效工具 – 视与视ECRS生产现场动作分析与改善软件

生产现场的作业效率如何改善&#xff1f; 如何有效优化一线生产者的动作&#xff0c;从而提升作业效率&#xff1f; 新进员工如何进行规范化的作业培训&#xff1f; 如何对班组、个人的生产效率进行定量分析与优化&#xff1f; 山积表、作业指导书、标准作业组合表、生产平…

原生DOM事件、react16、17和Vue合成事件

目录 原生DOM事件 注册/绑定事件 DOM事件级别 DOM0&#xff1a;onclick传统注册&#xff1a; 唯一&#xff08;同元素的(不)同事件会覆盖&#xff09; 没有捕获和冒泡的&#xff0c;只有简单的事件绑定 DOM2&#xff1a;addEventListener监听注册&#xff1a;可添加多个…

30.0/集合/ArrayList/LinkedList

目录 30.1什么是集合? 30.1.2为什么使用集合 30.1.3自己创建一个集合类 30.1.3 集合框架有哪些? 30.1.2使用ArrayList集合 30.2增加元素 30.3查询的方法 30.4删除 30.5 修改 30.6泛型 30.1什么是集合? 我们之前讲过数组&#xff0c;数组中它也可以存放多个元素。集合…

<Linux>(极简关键、省时省力)《Linux操作系统原理分析之Linux 进程管理 6》(10)

《Linux操作系统原理分析之Linux 进程管理 6》&#xff08;10&#xff09; 4 Linux 进程管理4.6 Linux 管道4.6.1 管道的概念4.6.2 无名管道1.终端使用2.程序中使用 4.6.2 命名管道1.终端使用2.程序中使用 4 Linux 进程管理 4.6 Linux 管道 4.6.1 管道的概念 1、管道是 linu…

MEFLUT: Unsupervised 1D Lookup Tables for Multi-exposure Image Fusion

Abstract 在本文中&#xff0c;我们介绍了一种高质量多重曝光图像融合&#xff08;MEF&#xff09;的新方法。我们表明&#xff0c;曝光的融合权重可以编码到一维查找表&#xff08;LUT&#xff09;中&#xff0c;该表将像素强度值作为输入并产生融合权重作为输出。我们为每次…

docker基础快速入门:基础命令、网络、docker compose工具

docker基础命令快速入门 目录 docker基本命令docker 网络docker compose Docker介绍 Docker是一个虚拟环境容器&#xff0c;可以将你的开发环境、代码、配置文件等一并打包到这个容器中&#xff0c;并发布和应用到任意平台中。 Docker的三个概念 镜像 Docker镜像是一个特…

来自2023 TM Forum 数字领导力中国峰会的邀请函

峰会介绍 2023数字领导力中国峰会由tmforum和亚信科技联合主办。 数据驱动创新&#xff0c;数字塑造未来&#xff01;2023数字领导力中国峰会&#xff0c;立足技术和商业视角&#xff0c;聚焦讨论各行业如何依托数据治理、IT和网络转型&#xff0c;实现跨越式增长。 这里&am…