vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)
手把手式笔记
Axios配置
- 安装 axios
npm install axios
- main.js同级目录新建axios配置文件setaxios.js
import axios from 'axios'
// import store from './store' //vuex
// import router from './router' //路由
export default function setAxios() {
//拦截request请求
axios.interceptors.request.use(
config=>{
console.log(config.data);
return config;
}
)
//拦截response回调
axios.interceptors.response.use(
response=>{
if(response.status===200){
const data=response.data
// if (data.code === 400){
// //登录过期,权限不足
// console.warn("登陆过期");
// //清除token
// store.commit('setToken','')
// window.localStorage.removeItem('token')
// //跳转登录
// router.replace({
// path:"/login"
// })
// }
return data;
}
return response;
}
)
}
- main.js中引入axios与其配置文件
import axios from 'axios'
import setaxios from './setaxios'
//Vue全局挂载axios
Vue.prototype.$http=axios
//设置baseUrl
axios.defaults.baseURL = '/api'
devServer中配置本地mock数据接口(vue.config.js文件中)参考webpack中文文档
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
configureWebpack: {
devServer: {
contentBase: './build',//项目基本访问目录
host: 'localhost',//服务器ip地址
port: 8088,//端口
open: true, //自动打开页面
hot: true,//模块热替换
hotOnly: true,//只有热更新不会刷新页面
//mock数据接口部分 关键部分
before(app) {
const bodyParser = require('body-parser')
app.use(bodyParser.json()) //通过bodyParser获取req.body)
/**
* testGet
*/
app.get('/api/test/get',(req,resp)=>{
console.log(req.query);
resp.json({
"code":111,
"msg":"get测试成功"
})
})
/**
* testPost
*/
app.post('/api/test/post', (req, resp) => {
console.log(req.body);
resp.json({
"code": 123,
"msg": "post测试成功"
})
})
/**
* testPut
*/
app.put('/api/test/put', (req, resp) => {
console.log(req.body)
resp.json({
"code": 123,
"msg": "put测试成功"
})
})
/**
* testDelete
*/
app.delete("/api/test/delete",(req,resp)=>{
console.log(req.body);
resp.json({
"code":666,
"msg":"delete测试成功"
})
})
}
}
}
}
通过上述配置操作即可完成本地mock数据接口编写,接下来是axios发送http请求测试示例
restful风格接口axios发送请求示例 参考axios中文文档
methods: {
sendGet: function() {
this.$http
.get("/test/get", {
params: {
param1: "get字符串",
param2: 13131
}
})
.then(res => {
console.log(res);
});
},
sendPost: function() {
this.$http
.post("/test/post", {
param1: "post字符串",
param2: 13131
})
.then(res => {
console.log(res);
});
},
sendPut: function() {
this.$http
.put("/test/put", {
param1: "put字符串",
param2: 13131
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
},
sendDelete: function() {
this.$http
.delete("/test/delete", {
data: {
param1: "delete字符串",
param2: 13131
}
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
}
}
完整测试demo(Test.vue)
<template>
<div>
<h2>HTTP-Request</h2>
<button @click="sendGet()">GET</button>
<span>  </span>
<button @click="sendPost()">POST</button>
<span>  </span>
<button @click="sendPut()">PUT</button>
<span>  </span>
<button @click="sendDelete()">DELETE</button>
<hr />
</div>
</template>
<script>
export default {
name: "testPage",
data() {
return {};
},
methods: {
sendGet: function() {
this.$http
.get("/test/get", {
params: {
param1: "get字符串",
param2: 13131
}
})
.then(res => {
console.log(res);
});
},
sendPost: function() {
this.$http
.post("/test/post", {
param1: "post字符串",
param2: 13131
})
.then(res => {
console.log(res);
});
},
sendPut: function() {
this.$http
.put("/test/put", {
param1: "put字符串",
param2: 13131
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
},
sendDelete: function() {
this.$http
.delete("/test/delete", {
data: {
param1: "delete字符串",
param2: 13131
}
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
}
}
};
</script>
示例效果图
参考文档
如有不妥,不解之处,请滴滴我,或在评论区留言
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)的更多相关文章
- vue中采用axios发送请求及拦截器
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...
- vue中使用axios发送请求
我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Vue笔记:使用 axios 发送请求
在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...
- Vue 爬坑之路—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- vue项目使用axios发送请求让ajax请求头部携带cookie
最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...
- vue2.0项目实战(3)使用axios发送请求
在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...
- vuejs+axios发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
随机推荐
- “真正的工作不是说的天花乱坠”,Torvalds 说, “而是在于细节”(Torvalds 认为成功的项目都是99%的汗水和1%的创新)
在刚刚结束的加利福尼亚州的开源领袖峰会(2月14日-16日)上,Linus Torvalds 接受了外媒的采访,分享了他如何管理 Linux kernel 的开发以及他对工作的态度. “真正的工作不是 ...
- 网络文件系统nfs文件系统使用(比较全面)
一.NFS简介 1.NFS就是Network FileSystem的缩写,它的最大功能就是可以通过网络让不同的机器,不同的操作系统彼此共享文件(sharefiles)——可以通过NFS挂载远程主机的目 ...
- 使用 acl_cpp 的 HttpServlet 类及服务器框架编写WEB服务器程序(系列文章)
在 <用C++实现类似于JAVA HttpServlet 的编程接口 > 文章中讲了如何用 HttpServlet 等相关类编写 CGI 程序,于是有网友提出了 CGI 程序低效性,不错, ...
- 腾讯云直播录制遇到的bug
1.录制方式应用: 初始化方法 [[TXUGCRecordshareInstance] startCameraCustom:param preview:_showPlayerView]; ID ...
- SYN6107型 GPS北斗双模子钟
SYN6107型 GPS北斗双模子钟 产品概述 SYN6107型GPS北斗双模子钟是由西安同步电子科技有限公司精心设计.自行研发生产的一套以接收北斗卫星信号的子钟,从北斗地球同步卫星上获取标准时钟信号 ...
- Tido 习题-二叉树-最高分
题目描述 老师想知道从某某同学到某某同学当中,分数最高的是多少.现在请你编程模拟老师的询问.当然,老师有时候需要更新某位同学的成绩. 输入 输入包含多组测试数据.每组输入第一行是两个正整数N和M(0& ...
- gitlab安装笔记三_Centos7安装GitLab
系统版本是CentOS-7-x86_64-Everything-1804.iso,很多软件默认都有了,不需要安装 https://about.gitlab.com/install/#centos-7 ...
- vuex分模块
Vuex速学篇:(4)把我们的业务按模块分类 原创 2016年11月29日 10:45:38 8504 文档:http://vuex.vuejs.org/zh-cn/modules.html 这个mo ...
- HTML和CSS 基本要点必看
今天的课程名称叫HTML和CSS HTML:它是标记语言,全称为超文本标记语言,它不是编译语言.(说白了就是标签) CSS:它是给标签添加样式的,全称为层叠样式表. 想了解这些必须得知道两个东西 一是 ...
- Oracle常用的一些 数据字典 转https://www.cnblogs.com/neozhu/archive/2008/07/22/1248422.html
Oracle常用数据字典表 Oracle常用数据字典表 查看当前用户的缺省表空间 SQL>select username,default_tablespace from user_ ...