Vue+Axios+Django：路由传参后无法获取公司全量数据做编辑

1. Django后端接口校验 #

• 确认CompanyApi接口参数接收逻辑：
  • 区分请求方法：GET请求用request.GET.get('company_name')获取参数，POST请求用request.data.get('company_name')，不要混淆参数位置
  • 手动测试接口：用Postman或浏览器直接访问接口（如http://你的域名/api/companies/?company_name=目标公司名），验证是否返回正确数据，排除后端查询逻辑问题
  • 核对数据库查询语句：确保查询字段与参数对应，比如是Company.objects.filter(name=company_name).first()，避免字段名不匹配（比如数据库字段是name，代码里写成company_name）
  • 查看后端日志：检查是否有参数接收错误、查询空结果的日志，定位具体异常

2. Vue前端请求校验 #

• 确认路由参数获取正确性：
  • 在页面created钩子中打印console.log(this.$route)，查看params或query中的company_name是否存在且值正确
  • 检查Axios请求的参数传递方式：
    GET请求必须将参数放在params对象中，示例代码：

    axios.get('/api/companies/', {
      params: {
        company_name: this.$route.params.company_name
      }
    }).then(res => {
      // 处理返回数据
    })
    

    POST请求则将参数放在data中，同时后端要对应处理POST参数
  • 查看浏览器Network面板：检查请求URL是否携带正确参数，响应状态码和返回数据是否正常

3. 路由配置与跳转校验 #

• 核对路由配置：
  动态路由配置示例：

  {
    path: '/company/edit/:company_name',
    name: 'CompanyEdit',
    component: CompanyEdit
  }
  

  查询参数跳转示例：

  // 跳转按钮代码
  this.$router.push({
    name: 'CompanyEdit',
    query: {
      company_name: currentCompany.name
    }
  })
  

• 检查跳转参数：跳转前打印currentCompany.name，确认值与数据库存储的完全一致，避免空格、大小写差异

4. 数据匹配细节 #

• 注意大小写匹配：不同数据库对大小写的敏感度不同（如PostgreSQL默认敏感），要保证传递的参数与数据库值完全一致
• 特殊字符处理：如果公司名称包含特殊字符，Axios会自动编码，但手动拼接URL时需用encodeURIComponent处理
• 唯一性校验：确保company_name是数据库唯一字段，否则查询可能返回多条数据，前端需明确取第一条或处理多数据场景

内容的提问来源于stack exchange，提问作者Derick T.