vue3知识点6Vuecli3 axios通信:get请求|post请求(已封装)

最新推荐文章于 2024-09-27 21:05:27 发布

luanmabug

最新推荐文章于 2024-09-27 21:05:27 发布

阅读量5.7k

点赞数 3

分类专栏： vue基础文章标签：前端 vue 数组作为参数对象作为参数 axios传多个参数 getpost传参

本文链接：https://blog.csdn.net/yangyangdt/article/details/122305868

版权

本文介绍了在Vue3项目中如何使用axios进行GET和POST请求，并展示了与Python Django后端交互的示例。在GET请求中，详细给出了vue组件和Python视图、URL配置。对于POST请求，特别是传递数组和对象参数时，强调了需要使用json.stringify()转换，以便Django能够正确解析JSON字符串。同时，讨论了Django接收参数的数据类型转换问题。

摘要由CSDN通过智能技术生成

vue3+vuecli4.5+axios用法点这里

下面是vue2用法。

前言

安装axios 用来在vue中更好的和服务器端进行数据通信。

网络工具库：在前端用的最多的就是axios。vuex 前端全局共享。

axios实现了不用原生js大量封装ajax.

axios特性：

从浏览器中创建XMLHttpRequest

从node.js发出http请求

支持Promise APl

拦截清求和响应

转换清求和响应数据

取消请求

自动转换JSON数据

客广端支持防止CSRF/XSRF

axios支持多种请求方式：

axios(config)
axios.request(config)
axios.get(url[,config])
axios.post(url[data[,config])
axios.put(url[data[,config])

一、安装axios

1.安装命令

npm install -save axios
或
npm install axios

2.在main.js中导入：

vucli3:

// 全局引入axios，并进行全局注册
import axios from 'axios'
Vue.prototype.$axios = axios

然后就可以在组件中使用啦。

二、get请求

我代码写的很清楚了，都是运行好的，可以单独复制，就不再另写了，直接放代码。

版本：vue2

vue路径：d://allvue/vue3demo2/src/conmenents/axios/gettest.vue

python路径：d://ajax/worktwo/vue3demo2/ views 和worktwo/urls.

gettest.vue

<template>
	<div>
		<h3>下面是axios的使用方法：Get方式    </h3>
		<h5> python:打开，d/ajax/worktwo/worktwo里。  vuedemo3 </h5>
		
		<h3>get不传参，只接收</h3>
		<div class="a">
			<button @click="func()" type="button" class="btn btn-primary">get不传参测试按钮</button>
			<p>{
  {msg0}}</p>
		</div>
		
		<div class="a">
			<h4>方式一：路径？传参</h4>
			<button @click="datafun1()" type="button" class="btn btn-primary">get（路径？id=1）测试按钮</button>
			<p>{
  {msg1}}</p>
		</div>
		
		<div class="a">
			<h4>方式二：params传参</h4>
			<button @click="datafun2()"  type="button" class="btn btn-primary">get params传参测试</button>
			<p>{
  {msg2}}</p>
		</div>
		
		<div class="a">
			<h4>方式三：params传参，写的规范，一般用这个</h4>
			<button @click="datafun3(1)"  type="button" class="btn btn-primary">get params传参规范测试</button>
			<ul v-for="item,index in arr3" :key="index">
				<li><span>id:</span>{
  {item.id}}</li>
				<li><span>内容:</span>{
  {item.content}}</li>
			</ul>
		</div>
		<div class="a">
			<h4>方式四1：get并发请求spread</h4>
			<button @click="datafun4all()"  type="button" class="btn btn-success">get并发请求spread</button>
			<p>{
  {msg4_1}}</p>
			<p>{
  {msg4_2}}</p>
		</div>
		<div class="a">