vue前端传参和DRF后端接受参数

$$vue前端传参和DRF后端接受参数$$

Vue前端

Get

url传参数的两种方式：

---

第一种：拼接

• 采用在url中使用变量的方式：在path的第一个参数中，使用<参数名>的方式可以传递参数。然后在视图函数中也要写一个参数，视图函数中的参数必须和url中的参数名称保持一致，不然就找不到这个参数。另外，url中可以传递多个参数。

在后端的Django中

path('category2/<int:pk>/', Category2View.as_view()),

class Category2View(APIView):
    """
    检索, 更新和删除一个merchant实例对象.
    """
    def get_object(self, pk):
        try:
            return category2.objects.get(pk=pk)
        except category2.DoesNotExist:
            raise Http404

    def get(self, request, pk=None):
        if pk:
            merchant= category2.objects.filter(category1_id=pk)
            serializer = Category2Serializer(merchant, many=True)
            return Response(serializer.data)
        else:
            queryset = category2.objects.all()
            serializer = Category2Serializer(instance=queryset,many=True)
            return Response(serializer.data)

    def put(self, request, pk):
        merchant = self.get_object(pk)
        serializer = Category2Serializer(merchant, data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

    def post(self, request):
        serializer = Category1Serializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

在前端的axios中：

    this.$http.get('http://127.0.0.1:8000/gen_model/category2/'+dataset_id).then(res =>{
       console.log(res.data)
    }).catch(err =>{
       console.log(err)
    })

---

第二种：使用params

• 采用查询字符串的方式：在url中，不需要单独的匹配查询字符串的部分。只需要在视图函数中使用request.GET.get(‘参数名称’)的方式来获取。

在后端的Django中

    path('category2/', Category2View.as_view()),

def author_detail(request):
    author_id = request.GET['id']
    text = '作者的id是：%s' % author_id
    return HttpResponse(text)

在前端的axios中：

    this.$http.get('http://127.0.0.1:8000/gen_model/category2/',{
	    params:{
	    id:123
	    }
	}).then(res =>{
       console.log(res.data)
    }).catch(err =>{
       console.log(err)
    })

---

Post

前端：Vue

<template>
<div class="">
     <h1 class='page-title' style="font-size:35px" align="center">添加二级数据集目录</h1>
    <el-row>
      <el-col :span="8" :offset="8">
        <br><br><br><br>
        <el-form ref="SubmitForm" :model="loginForm" label-width="80px" class='login-form' :rules="rules">
          <el-form-item label="父属" prop="name">
            <el-input v-model="SubmitForm.name"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="SubmitForm.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit"  >提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
</div>
</template>

<script type="text/ecmascript-6">
import {Card,Row,Col,Form,FormItem,Input,Button} from "element-ui"
export default {
  name: "UpLoadCategory2",
  data() {
    return {

        SubmitForm:{
            name:""
        }
    }
  },
   components:{
    [Card.name]:Card,
    [Row.name]:Row,
    [Col.name]:Col,
    [Form.name]: Form,
    [Input.name]: Input,
    [FormItem.name]: FormItem,
    [Button.name]: Button,
  },
  methods:{
      onSubmit(){
          this.$http.post("",this.SubmitForm).then(res=>{
              console.log(res)
          }).catch(err =>{
              console.log(err)
          })

      }
  }
}
</script>

<style scoped lang='scss'>
</style>

DRF后端

    def put(self, request, pk):
        merchant = self.get_object(pk)
        serializer = Category2Serializer(merchant, data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

    def post(self, request):
        serializer = Category1Serializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

django rest framework :Original exception text was: ‘QuerySet’ object has no attribute ‘***’

出现这个问题的原因是：

查询返回的是 QuerySet，而我们使用Serializer去序列化Queryset自然会报错，Queryset没有某属性。

解决方案：

在序列化的Serializer中添加 many=True字段如：

serializer = ASerializer(instance=aset, many=True)

---

https://www.jianshu.com/p/3e08e0e60a29

一：Get

axios.get('/user', {  //params参数必写 , 如果没有参数传{}也可以
    params: {  
       id: 12345，
       name: user
    }
})
.then(function (res) {
    console.log(res);
})
.catch(function (err) {
    console.log(err);
});

二：post/put/patch请求

var formData=new FormData();
formData.append('user',123456);
formData.append('pass',12345678);
 
axios.post("/notice",formData)
     .then((res) => {return res})
     .catch((err) => {return err})

import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})

//方法一：
import axios from 'axios'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

//方法二：
var readyData=JSON.stringify({
    id:1234,
    name:user
});
axios.post("/notice",readyData)
     .then((res) => {return res})
     .catch((err) => {return err})