Vue--POST请求和GET请求

1、 POST请求 (POST请求原则上都要传参数,下面介绍两种传参数的方法)

1.1 POST请求传参方法1--字典类型参数

Vue前端代码

<template>
    <form  class="form-inline panel-body" id="formData">
        <div >
            <label>账号</label>
            <input type="text" v-model="formData.username">
        </div>
        <button @click="select"> 查 找</button>
    </form>
</template>
<script setup>
    import { ref } from 'vue';
    import axios from 'axios';
    const formData = ref({
        username: '123'
    });
    async function select(event){
        event.preventDefault();
        console.log(formData);
        await axios.post('http://127.0.0.1:8000/api/select_user/',
        formData.value, ).then(res => {
            userListRef.value = res.data.user_list;
            console.log(res.data.user_list);
        })

    }
</script>

django后端代码

from rest_framework.views import APIView
#from rest_framework.response import Response
#from rest_framework.permissions import IsAuthenticated
from django.http import JsonResponse
#user表

from django.contrib.auth.models import User
from icecream import ic

class SelectUserView(APIView):
    
    #token验证(暂时先不用验证)
    #permission_classes = [IsAuthenticated]
    
    def post(self, request):
        
        #传输的数据都在request.data里面
        username=request.data.get('username')

        print('username',username)

        #此处username是唯一的,因此返回一个记录类型的对象,否则返回列表里面嵌套记录类型的对象
        users_db = User.objects.get(username=username)
        user_list=[]
        user_list.append({'id':users_db.id,'username':users_db.username,'password':users_db.password})

        print( user_list)
        return JsonResponse({'user_list': user_list})

1.2 post请求传参方法2--FormData类型的参数

Vue前端代码

<template>
    <form  class="form-inline panel-body" id="formDataId">
        <div >
            <label>账号</label>
            <input type="text" name="username">
        </div>
        <button @click="select"> 查 找</button>
    </form>
</template>
<script setup>
    import { ref } from 'vue';
    import axios from 'axios';

    async function select(event){
        //通过form表单的id读取form表单的数据, 此时的formData不是一个ref字典,而是应该FromData对象
        let formData = document.getElementById('formDataId');//或let formData = new FormData(document.getElementById('formDataId'));
    
        event.preventDefault();
        console.log(formData);
        await axios.post('http://127.0.0.1:8000/api/select_user/',
        formData, ).then(res => {
            userListRef.value = res.data.user_list;
            console.log(res.data.user_list);
        })

    }
</script>

 django后端代码也要对应修改

from rest_framework.views import APIView
#from rest_framework.response import Response
#from rest_framework.permissions import IsAuthenticated
from django.http import JsonResponse
#user表

from django.contrib.auth.models import User
from icecream import ic

class SelectUserView(APIView):
    
    #token验证(暂时先不用验证)
    #permission_classes = [IsAuthenticated]
    def post(self, request):
        #当前端传输的数据是FormData类型时,使用request.POST接收
        username=request.POST.get('username')#修改在此处<<<<<<<<<<<<<<<<<<<<==================================
        #username=request.data.get('username')

        print('username',username)

        #此处username是唯一的,因此返回一个记录类型的对象,否则返回列表里面嵌套记录类型的对象
        users_db = User.objects.get(username=username)
        user_list=[]
        user_list.append({'id':users_db.id,'username':users_db.username,'password':users_db.password})

        print( user_list)
        return JsonResponse({'user_list': user_list})

2、GET请求

2.1 GET请求可以不传参数(不同于POST请求原则上都要传参数)

Vue的js代码

const userListRef = ref([]);
axios.get('http://127.0.0.1:8000/api/select_user/').then(res => {
    userListRef.value = res.data.user_list;
})

django后端代码 

from rest_framework.views import APIView
#from rest_framework.response import Response
#from rest_framework.permissions import IsAuthenticated
from django.http import JsonResponse

#User表
from django.contrib.auth.models import User
from icecream import ic

class SelectUserView(APIView):
    
    #token验证(暂时不用)
    #permission_classes = [IsAuthenticated]

    def get(self, request):
        users_db=User.objects.all()
        user_list=[]
        for user in users_db:
            user_list.append({'id':user.id,'username':user.username,'password':user.password})
        print(user_list)
        return JsonResponse({'user_list': user_list})

 2.1 GET请求也可以传参数

Vue的js代码

<template>
    <form  class="form-inline panel-body" id="formDataId">
        <div >
            <label>账号</label>
            <input type="text" v-model="username">
        </div>
        <button @click="select"> 查 找</button>
    </form>
</template>
<script setup>
    import { ref } from 'vue';
    import axios from 'axios';
    let username = ref('');

    let params = {};
    async function select(event){
        event.preventDefault();
        await axios.get('http://127.0.0.1:8000/api/select_user/',
        {
        params: {
          username: username.value
        }
        },
        ).then(res => {
            userListRef.value = res.data.user_list;
            console.log(res.data.user_list);
        })

    }
</script>

 django后端代码

from rest_framework.views import APIView
#from rest_framework.response import Response
#from rest_framework.permissions import IsAuthenticated
from django.http import JsonResponse
#user表

from django.contrib.auth.models import User
from icecream import ic

class SelectUserView(APIView):
    
    def get(self, request):

        #传输的数据都在request.GET里面
        username=request.GET.get('username')
        print('username',username)

        #此处username是唯一的,因此返回一个记录类型的对象,否则返回列表里面嵌套记录类型的对象
        users_db = User.objects.get(username=username)
        user_list=[]
        user_list.append({'id':users_db.id,'username':users_db.username,'password':users_db.password})

        print( user_list)
        return JsonResponse({'user_list': user_list})