1.依赖
在项目目录,用命令行
npm install axios --save
2.导入项目中
在main.js中:
import axios from 'axios'
Vue.prototype.$axios = axios
3.不使用Vue的跨域解决方法,容易出问题。
直接使用axios的方式知道你BaseUrl即可。
3.0修改config/dev.env.js(开发环境),config/prod.env.js(发布环境)
增加BASE_API:
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://localhost:9011"'
})
3.1创建 src/utils/request.js:
import axios from 'axios';
const service = axios.create({
timeout: 1500,
baseURL: process.env.BASE_API
})
export default service
3.2以brand表为例,创建src/api/brand.js
import query from '@/utils/query'
const group_name = 'brand'
export default {
save(pojo) {
return query({
url: `/${group_name}`,
method: 'post',
data: pojo
})
},
deleteById(id) {
return query({
url: `/${group_name}/${id}`,
method: 'delete'
})
},
update(id, pojo) {
return query({
url: `/${group_name}/${id}`,
method: 'put',
data: pojo
})
},
findAll() {
return query({
url: `/${group_name}`,
method: 'get'
})
},
findById(id) {
return query({
url: `/${group_name}/${id}`,
method: 'get'
})
}
}
3.3在组件中使用
<script>中:
import brandApi from '@/api/brand'
......
methods: {
save() {
brandApi.save({
name: "SM",
first_char: "S"
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
deleteById() {
brandApi.deleteById("30")
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
update() {
brandApi.update("26", {
name: "三星",
first_char: "S"
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
findAll() {
brandApi.findAll()
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
findById() {
brandApi.findById("2")
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
网友评论