前后端传参，及前端页面跳转

   后端尖括号 传参        【一般用于传ID 或是 手机号】

前端请求    
    axios.get("/v1/smscode/" + this.mobile)

后端接收
    def get(self, mobile):

后端路由
    api.add_resource(SmsView, '/smscode/<mobile>')

 循环列表item.id        // 当前页传id 

<div v-for="item in KindList" :key="itme">

    < @click="GoodApi(item.id)">

</div> 

GoodApi(id) {
     axios.get('/goods/GoodApi/', { params: {kind_id:id} })

 this.$route.query.id        // 从地址栏拿id 

页面1
    <div v-for="item in 3" :key="item" class="c2" @click="Tiao(item)">
         11
    </div>
    Tiao(id) {
        this.$router.push('/ceshi2?id=' + id)
    }

页面2
    data() {
       return {
           id :this.$route.query.id,     // 从地址栏拿id
             };
        },
    mounted() {
            console.log(this.$route)    //控制台打印出跳转页面时的信息
            console.log(this.$route.query.id)
        },

router-link 

页面1：  name：'' 指定跳转页面    params：{}  要传的参数
   <router-link :to="{ name: 'GoodsData', params: { id: item.id } }">  

页面2：
    data() {
        return {
            goodsid: this.$route.params.id,    # 接收上个页面传来的id参数
        };
    },

    
前端get方法传 params >>  后端接 request.query_params.get('goodsid')
    goods() {
        axios.get('/goods/goodsdata/', { params: { goodsid: this.goodsid } })

修改案例 v-model赋值        // 当前页传id 

# course_all 为列表中的一条数据

<div>
      课程名称:<input v-model="course_all.name"><br>

     <button @click="update(course_all.id)">修改</button>
</div>


    data() {
        return {
            course_all: {
                name: '',    
                id:''，    # course_all.id 赋值给id
            },
        };
    },

    update(id) {    # 可以直接使用以赋值的id
            axios.put("/v1/courses2/" + id  + '/', this.course_all)

v-model        // 传参数

  用户名<input type="text" v-model="name">

  data() {
    return {
      name: '',
    };
  },

  checkname() {   
     axios.post('/users/checkuser/',  { name: this.name } )

        # post请求 后端接 request.data.get('name')

 // 传一个字典

data() {
        return {
            course_all2: {
                name: '',
                course_type: "",
                course_score: '',
                exam_type: '',
                total_time: "",
                id:''
            },
        };
    },

axios.post('/v1/', this.course_all2)

前端token传参数

django:
# get 只能<尖括号>携带参数 否则接收不到headers中的token参数
axios.get("/friendcircle/usersearch/" + this.phone + "/", {
          headers: { token: localStorage.getItem("token") },
        })

# get不携带参数
axios.get("/friendcircle/userfriend/",{
            headers: { token: localStorage.getItem("token") },
        })

# put post 携带参数
axios.put("/friendcircle/userinfo/",
            { photo: this.photo },
            { headers: { token: localStorage.getItem("token") } 
        })

# put post <尖括号传参>   后面无参数  也要用 {}, 占位
axios.post(
          "/friendcircle/usersearch/" + this.phone + "/",
          {},
          { headers: { token: localStorage.getItem("token") },
          })

# delete 请求携带参数 前面不加{}占位
axios.delete(
          "/friendcircle/publish/" + publish_id + "/",
          { headers: { token: localStorage.getItem("token") } }
        )


flask接收 前端要加一个get或post参数的占位 {}
        axios.get("/user/", {},{
              headers: {token: localStorage.getItem('token') || ""}
        })

Django前后端传参

Django 尖括号传参数
    this.$axios.get('/users/' + this.id + '/')    
后端接收
    class User(APIView):    
        def get(self, request, id): 
路由
    path('user/<int:id>/', views.User.as_view()),    


get传参
    axios.get('/user/', { params: { uid: id } })  
    axios.get('/user/?uid=' + id )    
后端接收
    class User(APIView):    
        def get(self, request):
            id = request.query_params.get('uid') 
路由
    path('user/', views.User.as_view()),    


post传参
    taxios.post('/user/', { uid: id } )  
后端接收
    class User(APIView):    
        def get(self, request):
            id = request.data.get('uid') 
路由
    path('user/', views.User.as_view()),    

 Django前后端传参(form表单)

<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="">
    <el-input v-model="form.phone" placeholder="请输入手机号">
    <template slot="prepend"
        ><i class="el-icon-user-solid"></i
    ></template>
    </el-input>
</el-form-item>



form: {
        phone: "",
        code: "",
      },

# get传参
axios.get("/user/smscode/", {params:this.form})

# post传参
axios.post("/user/login/", this.form)

跳转页面

<router-link :to="{ name: 'GoodsData', params: { id: item.id } }">

this.$router.push('/ceshi2?id=' + id)