今天在调试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
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 接口调用注意事项：
- 先写点击事件
当参数都正确并且也能看到返回值时，但是页面就是渲染不出来效果时，或是点击按钮后页面没有渲染效果时，这会先去看是否有绑字click点击事件
- 先写点击事件
- 参数要有值(例:userId)，在F12控制台中查看时，如果值为空的话，需要赋值；
每个接口调用之前，都需要把参数给赋值的，之前的表单之所以没有这个过程，是因为双向绑定，在你输入框中写 入数据后，就自动给你绑定到data中了，但是现在这个接口并没有这个过程，所以需要你自己手动的把参数给定赋值一下
- 参数要有值(例:userId)，在F12控制台中查看时，如果值为空的话，需要赋值；
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()
}
- 表格操作时，要获取操作的那一行表格数据 ，获取方法添加(scope.row)
表格中操作，查看，删除都是一样 的，你肯定是需要把你要操作的那行数据的参数传递给后台，后台才知道你要查看的删除的是哪一行数据
- 表格操作时，要获取操作的那一行表格数据 ，获取方法添加(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>
- 当参数都正确并且也能看到返回值时，但这时报错400，那么是在复制到新的页面时，忘记修改api的名称了(还是复制前的上个接口的名称)，这时需要检查下api接口参数及复制到新页面的参数是否有修改过来。
- 区别于后台返回的字段直接以对象的方式包裹起来在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)
}
})
}
-
- 怎样获取接口中的参数：
- 如果是从表格中的某一行获取的参数的话，直接row就可以获取
lookClick (row) {
console.log(row) // 打印出来就可以获取当前所有这行的数据
this.$router.push({
path: '/home/time',
query: {
andrProjectId: row.andr_project_id,
andrProjectStaffId: row.andr_project_staff_id,
})
}
如果是路由跳转过来的话，就从当前路由中获取
如果路由中也没有的话，那看下这个参数，是不是这个页面的哪一个接口返回来的，那在调用那个接口的时候，就把这个参数存到data中，作为一个全局变量，那你就可以直接用了
- 如果以上都没有的话，那就直接问下后端从哪个接口返回来的，后端告诉你接口后，你就去调用那个接口的方法里，把这个参数取出来，并在data中定义一个全局变量存起来，然后你就可以再别的接口调用了
