19: vue project uses finishing

1.1 axios basic usage

　　 Installation: npm install axios -S # can also be directly downloaded file axios.min.js

　　1, axios Qs by the author of the data sequence

　　　　　　axios reference blog: 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, transmits get request 
          axios ({
            URL: ' http://127.0.0.1:8000/data/ ' ,                  // . 1, the address request 
            Method: ' GET ' ,                                         // 2, request method 
            the params: {IDS: [ . 1 , 2 , . 3 ], type: ' ADMIN ' },                 // . 3, GET request parameters 

            paramsSerializer: the params => {                           // . 4, optional functions, serialization params` ` 
              return Qs.stringify (the params, {indices: to false })
            },
            responseType: ' JSON ' ,                                 // . 5, return to the default format JSON 
            headers: { ' Authorization ' : ' xxxtokenidxxxxx ' },      // . 6, the authentication token 
          })
           // 2, the callback function 
          .then (RESP => {
            console.log(resp.data);
          })
          // 3, catch exceptions 
          . The catch (ERR => {
            the console.log ( ' request failed: ' + err.status + ' , ' + err.statusText);
          });
        }

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

get: Axios get request transmitted

<!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, transmits post request 
          axios ({
            URL: ' http://127.0.0.1:8000/data/ ' ,              // . 1, the address request 
            Method: ' POST ' ,                                   // 2, request method 
            Data: Qs.stringify (                                // . 3, optional function, the sequence data` of ` 
              {IDS: [ . 1 , 2 , . 3 ], type: ' ADMIN ' },                   // . 4, submission of data 
              {indices: to false }                              // indices: to false 
            ),
            responseType: ' JSON ' ,                            // . 5, return to the default format JSON 
            headers: { ' Authorization ' : ' xxxtokenidxxxxx ' }, // . 6, authentication token 
        })
         // 2, the callback function 
        .then (RESP => {
          console.log(resp.data);
        })
        // 3, catch exceptions 
        . The catch (ERR => {
          the console.log ( ' request failed: ' + err.status + ' , ' + err.statusText);
        });
        }
      }
    });
  }
</script>
</body>
</html>

post: Axios send a post request

def data(request):
    if request.method == 'GET':
        token_id = request.META.get ( ' HTTP_AUTHORIZATION is ' )   # the TokenId header in 
        Print (request.GET.getlist ( ' IDS ' ))                    # Get get request list 
        Data = {
             ' ID ' :. 1 ,
             ' name ' : ' zhangsan '
        }
        return HttpResponse(json.dumps(data))
    elif request.method == 'POST':
        token_id = request.META.get ( ' HTTP_AUTHORIZATION is ' )   # header in the TokenId 
        Print (request.POST.getlist ( ' IDS ' ))                   # acquisition request list post 
        Data = {
             ' ID ' :. 1 ,
             ' name ' : ' zhangsan ' ,
             ' Method ' : ' the POST '
        }
        return HttpResponse(json.dumps(data))

views.py backend test interface

# . 1, QS Use: In axios, the use of data packing QS data 
# 2, the installation:     NPM the install QS -S 
#. 3, common usage: 
'' '
import Qs from 'qs';
Qs.stringify(data);
Qs.parse(data)
'''

1.2 & package axios transmission request interceptors add

　　1, initialization vue project

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

　　2, package axios (create src / api folder)

Export default {
   // API request address 
  API_URL: 'http://127.0.0.1:8000/' 
}

config \ urls.js configure global variables url

11111111111111

19: vue project uses finishing

1.1 axios basic usage

Guess you like