zoukankan      html  css  js  c++  java
  • vue路由传参

    应用场景:首页(index)的分类水果,点击查看更多,需要展示此分类下的所有商品,跳转到list页面

    实际操作:

    1.在index页面中 查看更多  绑定跳转路径 :to  

     注意:1.写跳转路由的格式,类似于字符串拼接,需要带上id

    2.在跳转路径上设置pk,比如下面这样,这样设置之后就可以传值了,而且前端也好接收

     3.然后在跳转之后的vue页面获取路由传递的参数,把这个参数保存起来放在data

     4.在data中设置分类id保存下面方便后面使用,设置生命周期函数,在页面加载时候就获取到传递过来的id

     6.然后我们就可以拿着这个分类id去查该分类下的所有商品

    注意:是get请求,参数用params传递,传递获取到分类id到后端

     7. 分类id传到后端,用request.query_params.get来接收,根据分类id查出该分类下的所有商品,然后放到自定义的serializer进行序列化,最后APIResponse将查询到的数据返回前端

     8.自定义serializer

    将需要返回给前端的字段放入fields中,并且这里要自定义图片地址,注意写的格式

     9.到此,该分类下的所有商品就全部传到前端了

    后端传递过来的是一个列表,用一个参数接收(goods_list),需要使用的地方先for 循环取出 

     10.  for 循环取出需要数据

  • 相关阅读:
    实验四
    实验三 进程调度模拟程序
    实验二 调度
    一个完整的大作业
    数据结构化与保存
    爬取新闻列表
    用requests库和BeautifulSoup4库爬取新闻列表
    中文词频统计及词云制作
    组合数据类型练习,英文词频统计实例
    字符串操作练习:星座、凯撒密码、99乘法表、词频统计预处理
  • 原文地址:https://www.cnblogs.com/wangcuican/p/11889186.html
Copyright © 2011-2022 走看看