19: vue项目使用整理

1.1 axios 基本用法

　　安装：npm install axios -S # 也可直接下载axios.min.js文件

　　1、axios借助Qs对提交数据进行序列化

　　　　　　axios参考博客：https://www.jianshu.com/p/68d81da4e1ad

　　　　 https://www.cnblogs.com/yiyi17/p/9409249.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
  <button @click="sendGet">GET方式发送AJAX请求</button>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
  window.onload=function(){
    new Vue({
      el:'#itany',
      data:{
        uid:''
      },
      methods:{
        sendGet(){
          // 1、发送get请求
          axios({
            url: 'http://127.0.0.1:8000/data/',                 //1、请求地址
            method: 'get',                                        //2、请求方法
            params: {ids: [1,2,3],type: 'admin'},                //3、get请求参数

            paramsSerializer: params => {                          //4、可选函数、序列化`params`
              return Qs.stringify(params, { indices: false })
            },
            responseType: 'json',                                //5、返回默认格式json
            headers: {'authorization': 'xxxtokenidxxxxx'},     //6、认证token
          })
          // 2、回调函数
          .then(resp => {
            console.log(resp.data);
          })
          // 3、捕获异常
          .catch(err => {
            console.log('请求失败：'+err.status+','+err.statusText);
          });
        }

      }
    });
  }
</script>
</body>
</html>

get：axios发送get请求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
  <button @click="sendPost">POST方式发送AJAX请求</button>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.js"></script>
<script>
  window.onload=function(){
    new Vue({
      el:'#itany',
      data:{
        uid:''
      },
      methods:{
        sendPost(){
          // 1、发送post请求
          axios({
            url: 'http://127.0.0.1:8000/data/',             //1、请求地址
            method: 'post',                                  // 2、请求方法
            data: Qs.stringify(                               //3、可选函数、序列化`data`
              {ids: [1,2,3],type: 'admin'},                  //4、提交数据
              { indices: false }                             // indices: false
            ),
            responseType: 'json',                           //5、返回默认格式json
            headers: {'authorization': 'xxxtokenidxxxxx'},//6、身份验证token
        })
        // 2、回调函数
        .then(resp => {
          console.log(resp.data);
        })
        // 3、捕获异常
        .catch(err => {
          console.log('请求失败：'+err.status+','+err.statusText);
        });
        }
      }
    });
  }
</script>
</body>
</html>

post: axios发送post请求

def data(request):
    if request.method == 'GET':
        token_id = request.META.get('HTTP_AUTHORIZATION')  # header中的tokenid
        print(request.GET.getlist('ids'))                   # 获取get请求中列表
        data = {
            'id':1,
            'name': 'zhangsan'
        }
        return HttpResponse(json.dumps(data))
    elif request.method == 'POST':
        token_id = request.META.get('HTTP_AUTHORIZATION')  # header中的tokenid
        print(request.POST.getlist('ids'))                  # 获取post请求中的列表
        data = {
            'id':1,
            'name': 'zhangsan',
            'method': 'POST'
        }
        return HttpResponse(json.dumps(data))

views.py后端测试接口

#1、qs用途：  在 axios中，利用QS包装data数据
#2、安 装:    npm install qs -S
#3、常见用法：
'''
import Qs from 'qs';
Qs.stringify(data);
Qs.parse(data)
'''

1.2 封装axios发送请求 & 添加拦截器

　　1、初始化vue项目

# vue init webpack deaxios
# npm install axios -S
# cnpm install vuex -S

　　2、封装axios（创建 src/api 文件夹）

export default {
  // api请求地址
  API_URL: 'http://127.0.0.1:8000/'
}

config\urls.js 配置全局url变量

11111111111111

19: vue项目使用整理

1.1 axios 基本用法

猜你喜欢