Vue基础 - axios

embedded/2024/11/25 21:36:01/

目录

1.axios请求实例

1、vue前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ajax例子</title>
</head>
<body><div id="app"><ul><li v-for="(item, index) in users" >{{item}}</li></ul></div><script src="./node_modules/vue/dist/vue.js"></script><script src="./node_modules/axios/dist/axios.js"></script><script>new Vue({el:"#app",data(){return{users:[]}},mounted() {this.getUserList();},methods: {//获取用户列表getUserList(){axios.get("http://localhost:8080/api/user/getUserList").then(response =>{console.info(response);this.users = response.data.data;}).catch(function(error){console.info(error);})}},})</script>
</body>
</html>

2、服务端提供接口代码

package com.example.testajaxdemo.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;import java.util.ArrayList;
import java.util.List;@Controller
@RequestMapping("/api/user")
@CrossOrigin(origins = "*")
public class UserController {@RequestMapping(value = "/getUserList", method = RequestMethod.GET)@ResponseBodypublic ResultBean<List<String>> getUserList(){List<String> userlist = new ArrayList<>();userlist.add("张三");userlist.add("李四");userlist.add("王五");userlist.add("小明");return ResultBean.success(userlist);}
}


http://www.ppmy.cn/embedded/34116.html

相关文章

ASP.NET网上书店

摘要 本设计尝试用ASP.NET在网络上架构一个电子书城&#xff0c;以使每一位顾客不用出门在家里就能够通过上网来轻松购书。本文从理论和实践两个角度出发&#xff0c;对一个具有数据挖掘功能电子书城进行设计与实现分析。论文首先较为详尽地介绍了面向对象分析与设计的有关概念…

vue3 element-plus 让el-container占满屏幕

在刚开始用element-plus的布局时&#xff0c;发现无法占满屏幕&#xff1a; 在App.vue中添加如下css代码&#xff1a; <style>html, body, #app {margin: 0;padding: 0;height: 100%;} </style>同时布局代码所在的component如下所示&#xff1a; <template&g…

[论文阅读]Adversarial Autoencoders(aae)和代码

In this paper, we propose the “adversarial autoencoder” (AAE), which is a probabilistic autoencoder that uses the recently proposed generative adversarial networks (GAN) to perform variational inference by matching the aggregated posterior of the hidden …

运维各种中间件的手动安装(非常详细)

压缩文件夹 tar -zcvf newFolder.tar.gz oldFolder 把oldFolder文件夹压缩成newFolder.tar.gz解压文件夹 tar -zxvf 压缩文件名.tar.gzlinux安装jdk &#xff08;参考 https://blog.csdn.net/qq_42269466/article/details/124079963 &#xff09; 1、创建目录存放jdk包 mkd…

MongoDB:非关系型数据库的翘楚

MongoDB&#xff1a;非关系型数据库的翘楚 文章目录 MongoDB&#xff1a;非关系型数据库的翘楚一、引言二、MongoDB简介三、MongoDB的特点四、MongoDB的应用场景五、MongoDB的使用方法1.安装和配置1.下载MongoDB安装包2.解压安装包3.创建数据目录和日志文件4.配置环境变量5.启动…

vscode 插件 code settings sync(配置云端同步)

vscode 插件 code settings sync&#xff08;配置云端同步&#xff09; 电脑A和B&#xff0c;vscode配置都在A电脑上&#xff0c;此时你想要将A电脑的vscode配置同步到B电脑的vscode中 第一步&#xff1a;A电脑和B电脑都需要在VSCode中安装下图插件 code settings sync 第二步&…

ssm105基于JAVAEE技术校园车辆管理系统+jsp

校园车辆管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本校园车辆管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短…

在 PHP使用正则表达式替换从 abc 到 xyz 的字符串

以下例子是删除从abc到xyz字符串 $fileContents 123abcdefghijkl4567mnopqrstuvwxyz890;$pattern "/abc(.*?)xyz/"; // 匹配从 acb 到 xyzecho preg_replace($pattern, , $fileContents);共14个元字符&#xff0c;要匹配原始字符&#xff0c;必须要转义 $ ---&g…