Vue3快速入门——Axios接口数据请求和渲染
原创Vue3快速入门——Axios接口数据请求和渲染
原创
前言
在Vue3的开发中，不单单是单纯的页面展示，我们经常需要从后端接口获取数据并在前端进行渲染，值以前js是采用ajax进行数据请求，需要写很多js代码。现在结合vue，可以使用Axios进行接口数据请求。Axios是一个基于Promise的HTTP客户端，用于浏览器和node.js，可以方便地在Vue3中实现数据的请求与处理，本文将引导你快速入门Vue3中Axios接口数据请求和渲染的基本操作。
代码示例
接下来开始进行代码案例演示，这里会结合到vue3的其他知识点吧，v-for，以及属性绑定操作，首先先编写静态HTML代码。
如下代码，div遍历接口数据，展示到前端，主要是通过v-for="game in games"遍历对象。
<div class="card-columns col-8">
<div class="card card-pin" v-for="game in games">
<img class="card-img" :src="game.cover" :alt="game.cover">
<div class="overlay">
<h2 class="card-title title">{{ game.gameName }}</h2>
<div class="more">
<a :href="game.packageName">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> 详情
</a>
</div>
</div>
</div>
</div>接下来就是需要引入axios库，我们是局部使用vue，所以只要在html直接引入js就行。
<!--导入axios--><script src="https://unpkg.com/axios/dist/axios.min.js"></script>编写vue代码，根据vue三步骤，在data定义数据games，也就是跟上面div绑定的数据，利用 Vue 组件挂载到 DOM 上后，`mounted` 钩子会被调用的特性，所谓钩子函数就是，vue初始化之后会被自动调用，也就是相当于初始化函数。这里使用 `axios` 库从 `http://localhost:8801/game/index` 获取游戏数据，并更新 `games` 数据。如果请求失败，错误会被打印到控制台。
<script type="module">
// 三步骤，导入Vue
import {createApp, ref} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建VUe实例
const app = createApp({
// 定义双向绑定数据
data() {
return {
games: [],
searchText: "",
category:"1003"
}
},
// 钩子函数（VUE初始化函数）
mounted: function () {
axios.get('http://localhost:8801/game/index').then(response => {
this.games = response.data.data;
}).catch(function (error) {
console.log(error);
});
}
}).mount('#app')
</script>根据上面前端请求，需要/game/index这个接口，只要在后端定义这个接口就行了，接口最终返回json数据即可。
@RequestMapping("/game")
@RestController
public class GameController {
@Autowired
private GameService gameService;
@GetMapping("/index")
public Result index(String search, String category) {
if (StrUtil.isBlank(category)) {
category = "1003";
}
QueryWrapper<Game> wrapper = new QueryWrapper<Game>()
.eq("category", category)
.eq(StrUtil.isNotBlank(search), "game_name", search);
return Result.success(gameService.list(wrapper));
}
}总结
本文介绍了在Vue3中使用Axios进行接口数据请求和渲染的基本操作。通过安装与配置Axios，我们可以方便地发送GET和POST请求，并在Vue组件中处理响应数据。这些基本操作是构建交互式Web应用的关键步骤，希望本文能为你快速入门Vue3中的数据请求和渲染提供帮助。总的来说，比较简单，其实是等于使用Axios代替之前的ajax，同时利用Vue的数据绑定进行渲染。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。