vue 使用后端接口

目录解析hu黄

黄![黄色部分是用到的文件夹](https://img-blog.csdnimg.cn/20210715191647616.png?x-oss-
=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzYxNTI4OQ==,size_16,color_FFFFFF,t_70)

api中是放接口的地方(后端的接口)

views中是放组件的（这里用到了后端的接口）

例如：后端有个查询的接口使用这个接口的步骤：

1. 先在api文件夹中创建此借口对应的js文件，

import request from ‘@/utils/request’
// 以下都是对应后台接口的方法实现（在这里我叫他们前端接口）通过这些方法得到想要的后端数据
export function getList(params) {
return request({
url: ‘/vue-admin-template/table/list’,
method: ‘get’,
params
})
}
export function getStudentList() {
return request({
url: ‘/cardservice/student/query/all’,
method: ‘get’
})
}

2。在views中的.vue文件中调用api中的接口

先导入

// 写在< script>中最前边

import { getStudentList } from ‘@/api/table’

再在方法集中写个方法来获取接口传来的值

// 接口的使用
getStudentApi() {
getStudentList().then(request => {
console.log(‘这是接口返回值’, request.data)
this.tableData = request.data //将前端的数据data赋上后端的值
})
}

最后不懂的话请参照下面的代码来琢磨

.vue文件代码

作者：妹子你好既然都看了我的作品了也不差看看我这人了 本人微信号：182
33243643