185-Vue中Axios的使用方法——get和post携带参数方法——请求数据并进行渲染

longfei815

已于 2022-08-19 16:49:45 修改

阅读量1.3k

点赞数 1

分类专栏： vue 前端基础知识文章标签： vue.js javascript 前端 html 前端框架

于 2022-08-19 16:00:53 首次发布

本文链接：https://blog.csdn.net/jolinoy/article/details/126422103

版权

前端基础知识同时被 2 个专栏收录

75 篇文章 2 订阅

订阅专栏

vue

43 篇文章 3 订阅

订阅专栏

185-Vue中Axios的使用方法——get和post携带参数方法——请求数据并进行渲染

这里需要用到后端测试数据：

前端测试——后端数据

后端数据如下：app.js代码。

后端目录：

后面index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table width="600" height="200" border="1" cellspacing="0">
		<caption>接口地址：http://localhost:8000</caption>
		<thead>
			<tr>
				<th>API</th>
				<th>请求参数</th>
				<th>备注</th>
			</tr>
		</thead>
		<tbody>
			<tr align="center">
				<td>/getdata</td>
				<td>无</td>
				<td>无</td>
			</tr>
			<tr align="center">
				<td>/postdata</td>
				<td width="30%">{data: {num:123}}</td>
				<td>
					<div>num值必须是123,请求才成功</div>
				</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

后端启动命令：node app.js

前端首先需要安装axios插件：npm i axios

前端axios的基本使用：

前端通过命令：npm run serve 启动项目。

得到后端的数据如下：

下面是携带参数的方法：

前端代码：

请求的结果如下：

下面是请求数据并进行渲染：

后端数据：

效果如下：

longfei815

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
185-Vue中Axios的使用方法——get和post携带参数方法——请求数据并进行渲染

前端首先需要安装axios插件：npm i axios。前端通过命令：npm run serve 启动项目。185-Vue中Axios的使用方法。后端数据如下：app.js代码。
复制链接

扫一扫