技术标签: java
首先在main.js中引入axios
import axios from 'axios'
其他组件无法使用axios命令,将axios改写为vue的原装属性
Vue.prototype.$ajax = axios
在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令
this.$ajax.post('/api/v1/repair/typelist')
.then(function(res){
})
.catch(function(err){
console.log(err);
this.$ajax.get('/api/v1/repair/changes',{
params: {
type: this.type
}
})
.then(function(res){
console.log(res.data.data)
})
.catch(function(err){
console.log(err);
});
这样写get方法是没问题的,但是post方法会出问题
把post里面的数据放在params里面这样是有问题的,在使用axios时,要注意到配置选项中包含params和data两者,以为他们是相同的,实则不然。
因为params是添加到url的请求字符串中的,用于get请求。
而data是添加到请求体(body)中的, 用于post请求。然后我把params改为了data,后台还是接收不到
解决办法:
一、URLSearchParams
import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$axios = axios;
const url ='http://****你的接口****';
var params = new URLSearchParams();
params.append('key1', 'value1'); //你要传给后台的参数值 key/value
params.append('key2', 'value2');
params.append('key3', 'value3');
this.$axios({
method: 'post',
url:url,
data:params
}).then((res)=>{
});
这样后台就收到数据了 请求成功;不过这个方法兼容性非常不好,ie浏览器完全不兼容
二、使用qs
import axios from 'axios'
import qs from 'qs';
Vue.prototype.$qs = qs;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$ajax = axios
var _this = this;
let postData = _this.$qs.stringify({
mobile : _this.form.phone,
code : _this.form.code
});
_this.$ajax.post('/index.php/api/v1/user/register', postData)
.then(function(res){
})
.catch(function(err){
console.log(err);
});
这种方法传递给后台是是 类似用逗号分隔的字符串形式的。不是Json形式的,如果后台要求是json形式的
_this.$ajax.post('/index.php/api/v1/user/login',{
key: value
}, {
headers: {
'Content-Type': 'application/json'
}
})
.then(function(res){
})
.catch(function(err){
console.log(err);
});
放到线上会出现跨域问题,后面另起一篇了解跨域问题
mutations 类似于事件,用于提交 Vuex 中的状态 state
action 和 mutations 也很类似,主要的区别在于,action 可以包含异步操作,而且可以通过 action 来提交 mutations
另外还有一个重要的区别:
mutations 有一个固有参数 state,接收的是 Vuex 中的 state 对象
action 也有一个固有参数 context,但是 context 是 state 的父级,包含 state、getters
Vuex 的仓库是 store.js,将 axios 引入,并在 action 添加新的方法
// store.js
import Vue from 'Vue'
import Vuex from 'vuex'
// 引入 axios
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
test01: {
name: 'Wise Wrong'
},
test02: {
tell: '12312345678'
}
},
actions: {
// 封装一个 ajax 方法
saveForm (context) {
axios({
method: 'post',
url: '/user',
data: context.state.test02
})
}
}
})
export default store
即使已经在 main.js 中引入了 axios,并改写了原型链,也无法在 store.js 中直接使用 $ajax 命令
配置axios
上面封装的方法中,使用了 axios 的三个配置项,实际上只有 url 是必须的,完整的 api 可以参考https://www.kancloud.cn/yunye/axios/234845
为了方便,axios 还为每种方法起了别名,比如上面的 saveForm 方法等价于
axios.post('/user', context.state.test02)
完整的请求还应当包括 .then 和 .catch
.then(function(res){
console.log(res)
})
.catch(function(err){
console.log(err)
})
当请求成功时,会执行 .then,否则执行 .catch
这两个回调函数都有各自独立的作用域,如果直接在里面访问 this,无法访问到 Vue 实例
这时只要添加一个 .bind(this) 就能解决这个问题
.then(function(res){
console.log(this.data)
}.bind(this))
文章浏览阅读221次。【代码】linux 清空docker容器日志。_linux清理docker容器log
文章浏览阅读7.3k次,点赞3次,收藏15次。源码地址为:https://github.com/QingdaoU/OnlineJudge可参考的文档为:https://github.com/QingdaoU/OnlineJudgeDeploy/tree/2.0一、安装所依赖的环境sudo apt-get update && sudo apt-get install -y vim python-pip curl g..._github oj开源
文章浏览阅读4.4k次。在《网络安全法》中,虽然已经明确了要求保障网络数据的完整性、保密性、可用性的能力,但随着近些年数据安全热点事件的出现,如数据泄露事件、个人信息滥用事件。表明对数据保护的要求仅依赖《网络安全法》中的几款条例是不足以支撑的。因此2021年9月1日《中华人民共和国数据安全法》便正式诞生,从此数据安全也被推上了风口浪尖。那么数据安全如何定义?与传统网络安全有何区别?数据安全体系又应该如何建立?..._数据安全
文章浏览阅读194次。Java解leetcode,助力面试之简单10道题(五)第338题 比特位计数解题思路代码第342题 4的幂解题思路代码第344题 反转字符串解题思路代码第345题 反转字符串中的元音字母解题思路代码第367题 有效的完全平方数解题思路代码第389题 找不同解题思路代码第392题 判断子序列解题思路代码第404题 左叶子之和解题思路代码第405题 数字转换为十六进制数解题思路代码第409题 最长回文串解题思路代码第338题 比特位计数示例 1:输入输出[3,2,3]3示例
文章浏览阅读698次。#pragma once #include <deque>#include <condition_variable>template <typename T>class MsgList { public: void add(const T& msg) { std::unique_lock<std::mutex> lock(mutex); queue.
文章浏览阅读551次,点赞8次,收藏8次。重点:项目和文档是本人近期原创所作!程序可以将水表图片里面的数据进行深度学习,提取相关信息训练,lw1.3万字重复15%,可以直接上交那种!具体和看下面的目录。python水表识别,图像识别深度学习 CNN,Opencv,Keras。_水表 深度学习 识别
文章浏览阅读910次。问题前端用xterm.js通过websocket连接docker虚拟终端,返回的字符中包括如下字符串,其中有两个控制字符,“ESC"和"BEL” ,想通过正则表达式匹配这一段字符,然后去掉这段字符:参考文档控制字符编码表转义符对照表通过上面查询得知,"ESC"和"BEL"这两个控制符的ASCII码分别为:十进制为27和7,十六进制为0x1B和0x07,转义符分别为:\e和\a代码**注意:**直接使用ASCII码匹配是不行的,一定要用转义符才行。如下测试代码中,只有regex3才能匹_正则表达式匹配控制字符
文章浏览阅读1.5k次。1.RIL框架 RIL,Radio Interface Layer。本层为一个协议转换层,提供Android Telephony与无线通信设备之间的抽象层。 Android RIL位于Telephony Frameworks之下,Modem之上的,根据源码,RIL可以分为两个部分:Frameworks 框架层中的java程序,简称RILJ。HAL层中C/C++程序,简称RILC,RILC具体的又包括LibRIL、Rild和Reference-RIL这三个部分。 Andr..._ril框架
文章浏览阅读565次。第六节 math包的基础使用前言实践前言我们通常会对数值型变量进行计算,这里我们给出一些常用的函数用于辅助你的计算过程。常用的数学计算函数均在math包。实践首先我们导入math包,并定义一个浮点型变量pi将其赋值为3.14:import mathpi = 3.14如果我们需要计算浮点型变量四舍五入后的计算结果,用函数round()即可:print(round(pi))>>> 3如果我们需要向上取整,那就需要函数math.ceil():print(math.cei_ps math function
文章浏览阅读4.4k次,点赞3次,收藏2次。Could not find first log file name in binary log index file问题解决解决过程问题最近在使用canal来监测数据库的变化,处理变动的数据。由于有一段时间没有用了,这次启动在日志文件中看到这个异常 Could not find first log file name in binary log index file,详细信息如下:2020-12-16 19:14:42.053 [destination = tradeAndRefund , addr_canal could not find first log file name in binary log index file
文章浏览阅读960次。分析:1.创建一个Random对象;2.创建一个hashset的集合对象;3.循环生成10个1-20的随机数4.输出。package edu.xalead;import java.util.*;public class Test { public static void main(String[] args) { Random r...
文章浏览阅读3.2k次。Linux系统下的扩展名并不能标识该文件是属于哪一种类型的文件。文件是否可以执行等都跟文件的扩展名无关。因为文件script没有执行权限,所以也就无法执行,sh-3.2# touch ./scriptsh-3.2# ls -lh ./script-rw-r--r-- 1 root root 0 Dec 28 06:15 ./scriptsh-3.2#sh-3.2# ./scriptsh: /scr..._linux的扩展名