接收某项课程id,通过axios发起get请求,由于携带params出现的问题(已解决)
问题:在最新课程页面(NewBook.vue)点击某一项课程,通过传递该课程的 id 跳转至课程详情页(Bookdetail.vue),采取的跳转方式是声明式导航,即 <router-link :to="{ path: '/newcourse', query: { id: item.courseCode } }"></router-link>
先看最新课程页面代码:

下面是详情页面代码,使用async发起异步请求,接收数据是没有问题的


但是在使用axios.then接收数据的时候出现了问题,


于是百度查询,看到了一个类似的代码,但是它能正常接收数据,它的代码如下:

发现它的请求路径没有携带params参数,是把id拼接到路径当中,于是我也尝试使用拼接,去掉params参数,果然成功了


但是为什么不能使用params参数呢?百度之后终于找到原因了!参考https://segmentfault.com/q/1010000014743286
解决方法:当我们使用params参数时,此时发起的网络请求路径是这样的:

当我们不使用params,而是采取路径拼接,路径是这样的:

我们可以看出明显的区别!!!其实问题就出在请求路径上面了,后台的接口设置是这样的:

它并没有设置需要传递params,所以对params参数没有进行处理,当我们传递params的时候,路径里会含有?id=,所以请求不到数据
所以在使用axios发起get请求的时候,需要根据后台接口设置来判断是否需要传递params,好了,问题解决,可以安心睡觉觉了,晚安~
接收某项课程id,通过axios发起get请求,由于携带params出现的问题(已解决)的更多相关文章
- axios拦截器请求头携带token
转—— https://github.com/superman66/vue-axios-github/blob/master/src/http.js
- Vue2使用Axios发起请求教程详细
当你看到该文章时希望你已知晓什么是跨域请求以及跨域请求的处理,本文不会赘述 本文后台基于Springboot2.3进行搭建,Controller中不会写任何业务逻辑仅用于配合前端调试 Controll ...
- python接收axios的post请求,并处理后返回数据
公司的python工程师不会js和python数据交互,所以我就去试了一下. 首先安装python,django框架和django-cors-headers. python官网下载,按提示操作,记住最 ...
- [Java] 两种发起POST请求方法,并接收返回的响应内容的处理方式
1.利用apache提供的commons-httpclient-3.0.jar包 代码如下: /** * 利用HttpClient发起POST请求,并接收返回的响应内容 * * @param url ...
- 使用axios优雅的发起网络请求
原文链接:https://www.jianshu.com/p/73585303fdc0 公司项目使用了vue作为技术栈,便理所应当地使用了官方推荐的axios进行网络请求,这里记录下axios的封装方 ...
- java中两种发起POST请求,并接收返回的响应内容的方式 (转)
http://xyz168000.blog.163.com/blog/static/21032308201162293625569/ 2.利用java自带的java.net.*包下提供的工具类 代码如 ...
- 查询各科成绩最高和最低的分:以如下形式显示:课程ID,最高分,最低分
SELECT L.C# As 课程ID,L.score AS 最高分,R.score AS 最低分 FROM SC L ,SC AS R WHERE L.C# = R.C# and L.score = ...
- vue --- axios发post请求后台接收不到参数的三种解决方案
最近用vue 做项目使用axios 发送post 请求时遇到了前端传数据后端接收不到的情况: 后来仔细对比发现axios传值是这样的: 而 ajax 传值是这样的: 一个 Request Paylo ...
- Vue系列之 => 通过vue-resource发起ajax请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- spring整合(Junit、web)
1.整合Junit (1)整合前的测试类代码 public class Test { public static void main(String[] args) { ApplicationConte ...
- springboot实现防重复提交和防重复点击
背景 同一条数据被用户点击了多次,导致数据冗余,需要防止弱网络等环境下的重复点击 目标 通过在指定的接口处添加注解,实现根据指定的接口参数来防重复点击 说明 这里的重复点击是指在指定的时间段内多次点击 ...
- Python练习题 021:递归方法求阶乘
[Python练习题 021] 利用递归方法求5!. ---------------------------------------------- 首先得弄清楚:5! 指的是"5的阶乘&qu ...
- Docker操作命令——查看、停止、删除容器
列出所有容器 ID docker ps -aq 停止所有容器 docker stop $(docker ps -aq) 停止单个容器 docker stop 要停止的容器名 删除所有容器 docker ...
- LVM的简单使用及常用的命令总结
Lvm的简单使用及常用的命令总结 centos7中默认使用的是xfs文件系统,此文件系统的特点,可以另外查找资料,这里说一下对文件系统的扩容: 1.先看一下没扩容之前的分区大小 2.添加一块新磁盘,并 ...
- Webstorm破解版安装教程
Webstorm破解版: 安装包链接见:https://pan.baidu.com/s/1XJqRtM9C4M8AmH50S9dVDQ 提取码: dah3 内附安装教程, 原创文章,转载请先联系作者
- 072 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 04 综合案例-数组移位-在指定位置处插入数据方法
072 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 04 综合案例-数组移位-在指定位置处插入数据方法 本文知识点:综合案例-数组移位-在指定位置处插入数据方法 ...
- Oracle Database XE 11gR2 自带的用户,新建用户,修改用户密码
操作系统:Windows 10 x64 第一节:下载 Oracle Database XE 11gR2 第二节:安装.验证安装 Oracle Database XE 11gR2 第三节:Oracle ...
- 持续更新——dp的一些技巧
共菜鸡笔者看的--会慢慢更新,也请看到的大佬留意一眼,指出不足. 对于一些对部分点的二维\(dp\),状态从左上角继承而来时,对于一个点\((x,y)\),对它编号\(x*m+y\),按照这个顺序\( ...
- ESP8266 玩板记
一.前言 esp8266的玩板记,后面应该会去更一些其他东西,这一块内容,这算是收官之战了. IoT,江湖有缘再相会 二.ESP8266实现WiFi杀手/钓鱼 这次的博客做的是一个娱乐性较强的项目. ...