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 循环取出需要数据

  • 相关阅读:
    命令实现linux和客户端文件上传下载
    python--linux上如何执行shell命令
    Eureka系列(一)Eureka功能介绍
    Eureka系列(七) 服务下线Server端具体实现
    编译时多态 与 运行时多态
    静态绑定(前期绑定) 与 动态绑定(后期绑定)
    重载 与 重写
    热点检测、方法内联、动态反优化
    数据库日志
    单例模式
  • 原文地址:https://www.cnblogs.com/wangcuican/p/11889186.html
Copyright © 2011-2022 走看看