通常我们的vue项目是前后分离的,vue前端通过后台api提供的接口(url)操作数据库,这里我们通过axios来实现。
可以使用我的在线API的URL进行测试
和使用swagger构造的API描述文档
我们后台有这样一个接口:http://localhost:8081/api/projectInfo/GetAll
(如果使还没有后台接口,可以先使用http://112.125.90.247:81/api/Data/GetAll
这个地址),它的作用是获取projectInfo
表的所有数据。在地址栏输入上述地址,看一下结果:
很明显,只要我们vue前台访问这个地址,就可以拿到这些数据了。下面我们来一步步做:
1,安装axios:
和安其它包一样:npm install axios
2,新建接口文件:
在src文件夹中新建api文件夹,在api文件夹中新建api.js文件(在里面将后台的接口地址稍微修饰,变成前台可以调用的方法):
// 引入axios
import axios from 'axios'
// 请求延时(毫秒数,如果请求话费超过了'timeout'的时间,请求将被中断)
axios.defaults.timeout = 100000
3,写方法:
我们写一个getAllData
方法
这里的params
用来传参,虽然这里还没用到
export const getAllData = params => {
return axios.get(`http://localhost:8