bing_yu2001 2021-08-20 17:34 采纳率: 66.7%
浏览 88
已结题

请问,如何在地址栏正确拼接参数,有效过滤数据? ( Nuxt 框架 )

首先肯定一点, 接口是 get 请求, 在接口文档中测试获取数据是 OK的,获取条件查询数据也是 OK 的.

前端:
访问 http://localhost:3000 可以获取到第1页10条数据, 因为我构建了这样的查询条件.

获取数据代码如下:

<script>

export default {

  async asyncData({app}) {

    // 获取文章列表第一页数据
    const page = { 
      total: 0,
      current: 1,
      size: 10
    }
    // 搜索条件对象
    const searchObj = {
      categoryId: null,
      categoryParentId: null,
      commentCount: null,
      viewCount: null,
      createDate: '1',
      updateDate: ''
    }
    // 查询文章第一页数据
    const {data: articleList} = await app.$getArticleList(page.current, page.size, searchObj)
    page.total = articleList.total
    let list = articleList.records

    // 查询所有分类
    const {data: categories} = await app.$getCategoryList()
    let categoryList = categories.list

    return {
      indexAdvertList,
      page,
      list,
      categoryList,
      searchObj
    }
  },

现在我要在地址栏拼接一个搜索一级分类的参数: ?categoryId=2 ( 在接口文档中测试是 OK 的)
拼接后地址: http://localhost:3000?categoryId=2

访问这个地址, 数据没有被过滤, 地址变成了 http://localhost:3000/?categoryId=2 比原来的地址在端口号后面多加了一个 / .

请问,如何在地址栏正确拼接参数,有效过滤数据?

悬赏 10元, 微信扫码支付.

  • 写回答

3条回答 默认 最新

  • bing_yu2001 2021-08-20 19:03
    关注

    问题已有人帮忙解决
    就是在请求方法对象处多加一个 key: params:

    这是我原来的方法:
    inject('getArticleList', (current, size, searchObj) => $axios.$get(/article/api/article/list/${current}/${size}, searchObj))

    添加参数后的方法:
    inject('getArticleList', (current, size, searchObj) => $axios.$get(/article/api/article/list/${current}/${size}, {params:searchObj}))

    地址栏条件传参, 成功过滤数据:
    http://localhost:3000/?current=1&size=10&categoryId=2&categoryParentId=1

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 崽崽的谷雨 2021-08-20 18:11
    关注

    使用模板字符串

     let id=2;
    url=` http://localhost:3000?categoryId=${id}`
    
    
    评论
  • bing_yu2001 2021-08-20 18:22
    关注

    我调用接口地址的方法是这样的:

    // 首页条件分页分类查询文章列表: current 当前页码, size 每页显示几条, query 条件查询对象
    inject('getArticleList', (current, size, searchObj) => $axios.$get(/article/api/article/list/${current}/${size}, searchObj))

    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 8月28日
  • 已采纳回答 8月20日
  • 修改了问题 8月20日
  • 修改了问题 8月20日
  • 展开全部

悬赏问题

  • ¥20 关于#javascript#的问题:但是我写的只能接码数字和字符,帮我写一个解码JS问题
  • ¥15 prophet运行报错,如何解决?
  • ¥20 前端数据是从session等作用域拿到的,如何取值继续传递后端呢
  • ¥15 eclipse无法正常运行
  • ¥15 定义了函数,但是无法根据函数定义触发器
  • ¥20 5变量卡诺图化简得出与非门电路图
  • ¥15 Python爬取交通拥堵指数数据
  • ¥15 使用vba抓取重定向网页问题
  • ¥20 付费需求测试程序(细谈)。
  • ¥15 为什么这段c++代码会报这么多语法错误?