今天研究了如何让vue 项目跑起来,简单实现调通后端的接口
实现步骤:
1.新建一个项目 vue create xxx(项目名字,自定义即可
2.项目跑起来,安装axios npm install axios
3.引入axios,配置axios 相关的参数(如baseURL等)
下面重点介绍实现方法三多种方式
方法一:创建vue.config.js文件,内容如下:
module.exports = {
devServer: {
proxy: ‘http://xxxxx.xxx:88’ // 后端地址
}
}
在页面中,axios是这种用的
axios.post(’/test’, {
name:’ zhangsan’,
pwd:‘123456’
})
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
方法二:在页面中直接完整的地址
axios.post(‘http://xxxxx.xxx:88/test’, {
name:’ zhangsan’,
pwd:‘123456’
})
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
方法三: 通过向 axios 传递相关配置来创建请求
axios({
method: ‘post’,
url: ‘http://xxxxx.xxx:88/test’,
data:{
name:’ zhangsan’,
pwd:‘123456’
}
})
.then(function (response) {
alert(“success”)
console.log(response);
}).catch(function (error) {
console.log(error);
});