vue 调试api接口详情

作者: web30 | 来源:发表于2019-07-19 15:23 被阅读336次

今天在调试api接口时，因为不够仔细出现了点小问题，在此记录避免后续再现。

在api目录下的home.js文件中新建接口

export function getPower (data) {
  return request({
    url: '/api/node/getPower',  // 后端请求的路径
    method: 'post',
    data
  })
}

因为当我们每点击一个按钮跳转到下个页面前，都是先路由跳转后再渲染出页面，我这里是分开两步写的，在time.vue文件中写的是路由跳转，在nodesee.vue文件中写的是具体业务逻辑。

// time.vue
nodeseeClick(){.
   this.$router.push({
         name: 'nodesee',    // 这里是跳转到下个页面的文件名
         params: {
          // item.参数，是后台提供的参数1请求后得到的具体参数，得到具体的参数后，就可以直接按得到的具体参数来请求后台的数据了
           andrProjectPointId: item.andr_project_point_id,
           andrProjectSignId: item.andr_project_sign_id,
           andrProjectId: item.andr_project_id,
           andrProjectGroupId: item.andr_project_group_id

           //  1：最开始在没有得到具体的参数前，按照后台提供的参数请求后台数据
            andrProjectPointId: '1',
            andrProjectSignId: '1',
            andrProjectId: '1',
            andrProjectGroupId: '1'
         }
      })
}

在nodesee.vue文件中引入getPower

import { getPower } from '@/api/home/home'
import qs from 'Qs'

具体逻辑

// nodesee.vue
export default {
    name: 'nodesee', 
    data () {
      return {
        tableData: [],  //定义一个空数组，并绑定到表格中(见*5.4)
        timeNode: {  //timeNode是我自己定义的对象名称
         // 以下是后台返回的数据
        andrProjectPointId: '',
        andrProjectSignId: '',
        andrProjectId: '',
        andrProjectGroupId: ''
      }
    }
  },
  // 跳转到节点可见页面
  methods: {
    // debugger     // 发送请求后页面报参数错误，在这启用debugger排错
    getPower () {
      getPower(qs.stringify(this.timeNode)).then(response => {
        if (response.data.retcode === 2000) {
          //lablePowerList是后台返回的数组
          this.tableData = response.data.data.lablePowerList
          // this.$message.success(response.data.retmsg)
        } else {
          this.$message.error(response.data.retmsg)
        }
      })
    },
     created () {
       this.getPower()
  }
}
</script>

以下是请求后台数据有问题后debugger及解决过程：
*5.1 逻辑都写完后，点击按钮向后台发送请求，然鹅页面什么都没有渲染出来并且还报参数错误。

image.png

*5.2 因为不知道是哪里出现的问题，我就直接在逻辑处启用debugger，F12控制台sources中显示返回的数据为空。

image.png

*5.3 检查后发现nodesee.vue页面中都没有获取到 time.vue页面路由传过来的参数，这个参数是一刷新就要获取到的，发现created函数中并没有写，我赶紧把路由的参数写进来后再次debugger，这时后台有返回数据了，但是只返回了<等级>这一个字段。

created () {
    // 以下前四项参数是从路由那跳转过来的
    this.timeNode.andrProjectPointId = this.$route.params.andrProjectPointId
    this.timeNode.andrProjectSignId = this.$route.params.andrProjectSignId
    this.timeNode.andrProjectId = this.$route.params.andrProjectId
    this.timeNode.andrProjectGroupId = this.$route.params.andrProjectGroupId
    this.getPower()
  }

image.png

*5.4 因为只返回了一个字段，我想可能是我的字段和后台返回的字段不一样，我就去和后端再去确认下。后端回复<状态>处返回的字段对应的是数字，因为项目业务逻辑的关系，需要前端这里再做一次判断，然后我把之前封装好的判断状态的组件引入到nodesee.vue文件中来，并把后台返回的字段 is_open 填写到表格中，渲染后页面出了相对应的数字。

<el-table
        ref="multipleTable"
        border
        :data="tableData"  // 和data中定义的tableData[]绑定
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="60">
        </el-table-column>
        <el-table-column
          label="状态"
          width="200">
           //scope.row获得当前行的数据
          <template slot-scope="scope">{{ scope.row.is_open }}</template>  //is_open是后台返回的字段
        </el-table-column>
    </el-table>

import { formatNodeStatus } from '@/api/common/common'  // 这是引入封装好的组件

methods: {
// 循环标签/节点的状态
    formatNodeStatus (nodeStatus) {
       <!--0:对外部分可见 1:对外所有可见 2:对内 >  //这是对标签状态的定义
      return formatNodeStatus(nodeStatus)
       }
}

image.png

*5.5 渲染出相对应的数字并不是我们最终需要的效果，我们需要的是文字来表示，检查后发现原来是封装的组件formatNodeStatus 并没有被调用，加上后就可以渲染出数据了。
用户昵称没有渲染出数据，是因为我们后台忘记写了，所以这会只能空在这里了。

     <el-table-column
          label="状态"
          width="200">
          <template slot-scope="scope">{{ formatNodeStatus(scope.row.is_open) }}</template>
    </el-table-column>

image.png

总之，和后台交互发请求、调api接口都是需要非常仔细的。

api 接口调用注意事项：

1. 先写点击事件
  当参数都正确并且也能看到返回值时，但是页面就是渲染不出来效果时，或是点击按钮后页面没有渲染效果时，这会先去看是否有绑字click点击事件
1. 参数要有值(例:userId)，在F12控制台中查看时，如果值为空的话，需要赋值；
  每个接口调用之前，都需要把参数给赋值的，之前的表单之所以没有这个过程，是因为双向绑定，在你输入框中写入数据后，就自动给你绑定到data中了，但是现在这个接口并没有这个过程，所以需要你自己手动的把参数给定赋值一下

methods: {
    // 个人中心 参与的项目
    getJoinedPro () {
      this.joinProject.userId = this.userId   // 赋值userId   
      this.joinProject.name = ''
      getJoinedPro(qs.stringify(this.joinProject)).then(response => {
        if (response.data.retcode === 2000) {
          this.tableData = response.data.data
          this.$message.success(response.data.retmsg)
        }
      })
    },
created () {
    this.userId = this.$store.state.userId   // vuex中取userId
    this.getJoinedPro()
  }

1. 表格操作时，要获取操作的那一行表格数据，获取方法添加(scope.row)
  表格中操作，查看，删除都是一样的，你肯定是需要把你要操作的那行数据的参数传递给后台，后台才知道你要查看的删除的是哪一行数据

  <el-table-column
        prop="operation"
        label="操作"
        width="230">
        <template slot-scope="scope">  //  当前操作的那一行
            <el-button type="primary" size="mini" icon="el-icon-view" @click="seeprojectClick(scope.row)">查看</el-button>
        </template>
  </el-table-column>

1. 当参数都正确并且也能看到返回值时，但这时报错400，那么是在复制到新的页面时，忘记修改api的名称了(还是复制前的上个接口的名称)，这时需要检查下api接口参数及复制到新页面的参数是否有修改过来。
1. 区别于后台返回的字段直接以对象的方式包裹起来在data中定义，在methods中调用，这里是一种全新的写法，后台返回的公用的字段单独定义在一起，在哪里需要就直接取出来就可以了，不会因为改动了其中某一个接口而相互影响。

效果图

image.png

代码

<el-form :label-position="labelPosition" label-width="90px" :model="joinProject">
        <div style="display: inline-block;margin-left: 25px">
          <el-image
            style="width: 80px; height: 80px"
            :src="joinProject.url_head">
          </el-image>
        </div>
        <div style="display: inline-block;margin-left: 20px;font-size: 14px;line-height: 60px">
              <div>用户昵称: {{joinProject.nickname}}</div>
              <div>手机号码: {{joinProject.tel}}</div>
         </div>
        <el-divider></el-divider>   
        <el-form-item  label="项目名称">
          <el-input v-model="joinProject.projectName"></el-input>
        </el-form-item>
        <el-form-item label="团队名称">
          <el-input v-model="joinProject.groupname"></el-input>
        </el-form-item>
        <el-form-item label="合同编号">
          <el-input v-model="joinProject.number "></el-input>
        </el-form-item>
        <el-form-item label="修改职位">
          <el-input v-model="joinProject.postname "></el-input>
        </el-form-item>
      </el-form>

在路由里定义

// 个人中心 参与的项目 查看项目
    seeprojectClick (row) {
        this.$router.push({
           path: '/home/seejoinProject',
           query: {
            // 以下3个参数是在同一功能，不同地方用到的参数
           projectId: row.andr_project_id,
           groupId: row.groupId,
           staffId: row.andr_project_staff_id,
        }
      })
    }

在data中定义公用对象来接受路由传过来的参数

 data () {
     return {
        userId: '',
        // 定义一个公用对象来接受路由传过来的参数
         route_query: {
            staffId: '',
            projectId: '',
            groupId: ''
        }，
       // 表格中的 后端返回的参数
       joinProject: {
        groupId: '',
        url_head: '',
        nickname: '',
        tel: '',
        projectName: '',
        groupname: '',
        number: '',
        postname: ''
       }
     }
 }

接收从路由处传过来的参数并赋值

created () {
    this.route_query.groupId = this.$route.query.groupId
    this.route_query.projectId = this.$route.query.projectId
    this.route_query.staffId = this.$route.query.staffId
  }

在methods方法中定义后端要求的参数

methods: {
  var modifyPosition = {  // modifyPosition是我自己定义的对象名称 
        // 左边绿色是后端返回的参数
        'userId': this.userId,  // userId是一直要用到的，所以data中单独定义
        'staffId': this.route_query.staffId,  // 从data中定义的route_query中直接取数据定义
        'postName': this.joinProject.postname  //修改的是当前表格中的某个数据，直接从表格中获取就可以了，更新一就替换当前的旧数据了
      }
      modifyPostName(qs.stringify(modifyPosition)).then(response => {
        if (response.data.retcode === 2000) {
          this.$message.success(response.data.retmsg)
        }
     })
 }

vue 调试api接口详情

api 接口调用注意事项：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

VUE技术与项目