首页
统计
墙纸
留言
Search
1
PVE8优化
19 阅读
2
mysql创建数据库
12 阅读
3
jenkins根据分支、文件夹打包
12 阅读
4
vue-cli注册全局方法
7 阅读
5
开心的加班
7 阅读
web前端
Vue
CSS
javascript
React
那些年爬过过的坑
ES6
TypeScrippt
ES7
javascript图灵 - 总结
Node
面试总结
React-Native
Web优化
基础
AngularJS
拍摄
Flutter
Dart
Docker
Linux
mysql
PVE
登录
/
注册
Search
标签搜索
vue+elementui
Cicaba
累计撰写
146
篇文章
累计收到
13
条评论
首页
栏目
web前端
Vue
CSS
javascript
React
那些年爬过过的坑
ES6
TypeScrippt
ES7
javascript图灵 - 总结
Node
面试总结
React-Native
Web优化
基础
AngularJS
拍摄
Flutter
Dart
Docker
Linux
mysql
PVE
页面
统计
墙纸
留言
搜索到
18
篇与
的结果
2018-01-07
vue兄弟主件的通讯
情况如下:两个兄弟主件(A,B),在A主件中调用B主件的中的方法实现通讯.在这里我们要借助vue的自定义事件和自定义事件监听机制,vm.$on( event, callback )和vm.emit().我们必须把B主件引用(ref)在父主件上,这样做的目的就是在父主件中可以调用子主件的方法.那么现在只要在主件A调用父主件的方法就可以解决问题.就实现了一个调用链(A->父->B).在父主件监听A主件的自定义事件vm.$on( event, callback ).在A主件内部触发自定义事件vm.emit( event ).在父主件内的监听回调中调用主件B的方法.这样就实现了主件A调用主件B的方法,也就实现了兄弟主件的通讯.
2018年01月07日
2 阅读
0 评论
0 点赞
2017-11-23
本地模糊搜素数据处理
/** * * 拼音检索 * * query @param {String} 用户输入 * dataSource @param {Array} 数据源 * options @param {Array} 修改数据源 * @returns 修改数据源 */ var py = require('../util/pinyin.js'); const searchQuery =function(query,dataSource){ if(query && query.constructor !== String) return; if(query==null){ query = ""; } let options = dataSource; if (query !== "") { let PinYin = py.convertPYs(query)[0]; let simplePY = py.convertPYs(query)[1]; let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g"); if (reg.test(query)) {//判断是汉字录入 let Arr = options.filter((option) => { if (option.label.indexOf(query) > -1) {//返回匹配的汉字 return option; } }) return Arr.length > 0 ? [...Arr] : []; } else {//输入的是拼音 let Arr = options.filter((option) => { if (PinYin.toUpperCase() === option.pinyin.toUpperCase() ||//判断全拼音相等 simplePY.toUpperCase() === option.py.toUpperCase() || //判断简拼相等 option.py.toUpperCase().indexOf(simplePY.toUpperCase()) > -1 ||//全拼音包含 option.pinyin.toUpperCase().indexOf(PinYin.toUpperCase()) > -1) {//简拼包含 return option; } else { return "" } }) return Arr.length > 0 ? [...Arr] : []; } } else { return dataSource; } } export {searchQuery}
2017年11月23日
3 阅读
0 评论
0 点赞
2017-11-23
解决Vue开发环境跨域问题
当将这个样板与现有后端集成时,通常需要在使用开发服务器时访问后端API。为此,我们可以并行(或远程)运行开发服务器和API后端,并让开发服务器将所有API请求代理到实际的后端。要配置代理规则,请在中编辑dev.proxyTable选项config/index.js。开发服务器正在使用http-proxy-middleware进行代理,因此您应该参阅其文档以获取详细的用法。但是这里有一个简单的例子:// config/index.js module.exports = { // ... dev: { proxyTable: { // proxy all requests starting with /api to jsonplaceholder '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }上面的示例将代理请求/api/posts/1到http://jsonplaceholder.typicode.com/posts/1。网址匹配除了静态URL之外,您还可以使用glob模式来匹配URL,例如/api/**。请参阅上下文匹配以获取更多详细信 另外,您可以提供一个filter可以是自定义函数的选项,以确定是否应该代理请求:proxyTable: { '**': { target: 'http://jsonplaceholder.typicode.com', filter: function (pathname, req) { return pathname.match('^/api') && req.method === 'GET' } } }详情访问var remote = {target: 'http://umeqy.com:1700',changeOrigin: true} proxyTable: { '/Home': remote, '/Account': remote, '/Sys': remote, '/Basis': remote, '/Plan': remote, '/PriceSystem': remote, '/Receipt': remote, '/Quota': remote, '/Common': remote, '/Contract': remote, '/Waybill': remote, '/Device': remote, '/Permit': remote, '/Other': remote, '/Freight': remote },
2017年11月23日
2 阅读
0 评论
0 点赞
2017-11-09
eslint 配置没有之一
module.exports = { // 默认情况下,ESLint会在所有父级组件中寻找配置文件,一直到根目录。ESLint一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找。 root: true, // 对Babel解析器的包装使其与 ESLint 兼容。 parser: 'babel-eslint', parserOptions: { // 代码是 ECMAScript 模块 sourceType: 'module' }, env: { // 预定义的全局变量,这里是浏览器环境 browser: true, es6: true }, // 扩展一个流行的风格指南,即 eslint-config-standard // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ // 此插件用来识别.html 和 .vue文件中的js代码 'html', // standard风格的依赖包 "standard", // standard风格的依赖包 "promise" ], // add your custom rules here 'rules': { "keyword-spacing":0,//关键字前后空格 'no-tabs': 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 0 : 0, // 关闭语句强制分号结尾 "semi": [0], //关闭禁止混用tab和空格 "no-mixed-spaces-and-tabs": [0], "no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 0,//禁止使用数组构造器 "no-bitwise": 0,//禁止使用按位运算符 "no-caller": 1,//禁止使用arguments.caller或arguments.callee "no-catch-shadow": 0,//禁止catch子句参数与外部作用域变量同名 "no-class-assign": 0,//禁止给类赋值 "no-cond-assign": 0,//禁止在条件表达式中使用赋值语句 "no-console": 0,//禁止使用console "no-const-assign": 0,//禁止修改const声明的变量 "no-constant-condition": 0,//禁止在条件中使用常量表达式 if(true) if(1) "no-continue": 0,//禁止使用continue "no-control-regex": 0,//禁止在正则表达式中使用控制字符 "no-delete-var": 0,//不能对var声明的变量使用delete操作符 "no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/ "no-dupe-keys": 0,//在创建对象字面量时不允许键重复 {a:1,a:1} "no-dupe-args": 0,//函数参数不能重复 "no-duplicate-case": 0,//switch中的case标签不能重复 "no-else-return": 0,//如果if语句里面有return,后面不能跟else语句 "no-empty": 0,//块语句中的内容不能为空 "no-empty-character-class": 0,//正则表达式中的[]内容不能为空 "no-empty-label": 0,//禁止使用空label "no-eq-null": 0,//禁止对null使用==或!=运算符 "no-eval": 1,//禁止使用eval "no-ex-assign": 0,//禁止给catch语句中的异常参数赋值 "no-extend-native": 0,//禁止扩展native对象 "no-extra-bind": 0,//禁止不必要的函数绑定 "no-extra-boolean-cast": 0,//禁止不必要的bool转换 "no-extra-parens": 0,//禁止非必要的括号 "no-extra-semi": 1,//禁止多余的冒号 "no-fallthrough": 1,//禁止switch穿透 "no-floating-decimal": 0,//禁止省略浮点数中的0 .5 3. "no-func-assign": 0,//禁止重复的函数声明 "no-implicit-coercion": 1,//禁止隐式转换 "no-implied-eval": 0,//禁止使用隐式eval "no-inline-comments": 0,//禁止行内备注 "no-inner-declarations": [0, "functions"],//禁止在块语句中使用声明(变量或函数) "no-invalid-regexp": 0,//禁止无效的正则表达式 "no-invalid-this": 0,//禁止无效的this,只能用在构造器,类,对象字面量 "no-irregular-whitespace": 0,//不能有不规则的空格 "no-iterator": 0,//禁止使用__iterator__ 属性 "no-label-var": 0,//label名不能与var声明的变量名相同 "no-labels": 0,//禁止标签声明 "no-lone-blocks": 0,//禁止不必要的嵌套块 "no-lonely-if": 0,//禁止else语句内只有if语句 "no-loop-func": 1,//禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以) "no-mixed-requires": [0, false],//声明时不能混用声明类型 "no-mixed-spaces-and-tabs": [0, false],//禁止混用tab和空格 "linebreak-style": [0, "windows"],//换行风格 "no-multi-spaces": 1,//不能用多余的空格 "no-multi-str": 0,//字符串不能用\换行 "no-multiple-empty-lines": [1, {"max": 0}],//空行最多不能超过0行 "no-native-reassign": 0,//不能重写native对象 "no-negated-in-lhs": 0,//in 操作符的左边不能有! "no-nested-ternary": 0,//禁止使用嵌套的三目运算 "no-new": 1,//禁止在使用new构造一个实例后不赋值 "no-new-func": 1,//禁止使用new Function "no-new-object": 0,//禁止使用new Object() "no-new-require": 0,//禁止使用new require "no-new-wrappers": 0,//禁止使用new创建包装实例,new String new Boolean new Number "no-obj-calls": 0,//不能调用内置的全局对象,比如Math() JSON() "no-octal": 0,//禁止使用八进制数字 "no-octal-escape": 0,//禁止使用八进制转义序列 "no-param-reassign": 0,//禁止给参数重新赋值 "no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接 "no-plusplus": 0,//禁止使用++,-- "no-process-env": 0,//禁止使用process.env "no-process-exit": 0,//禁止使用process.exit() "no-proto": 0,//禁止使用__proto__属性 "no-redeclare": 0,//禁止重复声明变量 "no-regex-spaces": 0,//禁止在正则表达式字面量中使用多个空格 /foo bar/ "no-restricted-modules": 0,//如果禁用了指定模块,使用就会报错 "no-return-assign": 1,//return 语句中不能有赋值表达式 "no-script-url": 0,//禁止使用javascript:void(0) "no-self-compare": 0,//不能比较自身 "no-sequences": 0,//禁止使用逗号运算符 "no-shadow": 0,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名 "no-shadow-restricted-names": 0,//严格模式中规定的限制标识符不能作为声明时的变量名使用 "no-spaced-func": 0,//函数调用时 函数名与()之间不能有空格 "no-sparse-arrays": 0,//禁止稀疏数组, [1,,0] "no-sync": 0,//nodejs 禁止同步方法 "no-ternary": 0,//禁止使用三目运算符 "no-trailing-spaces": 1,//一行结束后面不要有空格 "no-this-before-super": 0,//在调用super()之前不能使用this或super "no-throw-literal": 0,//禁止抛出字面量错误 throw "error"; "no-undef": 1,//不能有未定义的变量 "no-undef-init": 0,//变量初始化时不能直接给它赋值为undefined "no-undefined": 0,//不能使用undefined "no-unexpected-multiline": 0,//避免多行表达式 "no-underscore-dangle": 1,//标识符不能以_开头或结尾 "no-unneeded-ternary": 0,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false; "no-unreachable": 0,//不能有无法执行的代码 "no-unused-expressions": 0,//禁止无用的表达式 "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数 "no-use-before-define": 0,//未定义前不能使用 "no-useless-call": 0,//禁止不必要的call和apply "no-void": 0,//禁用void操作符 "no-var": 0,//禁用var,用let和const代替 "no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注 "no-with": 0,//禁用with "array-bracket-spacing": [0, "never"],//是否允许非空数组里面有多余的空格 "arrow-parens": 0,//箭头函数用小括号括起来 "arrow-spacing": 0,//=>的前/后括号 "accessor-pairs": 0,//在对象中使用getter/setter "block-scoped-var": 0,//块语句中使用var "brace-style": [1, "1tbs"],//大括号风格 "callback-return": 1,//避免多次调用回调什么的 "camelcase": 0,//强制驼峰法命名 "comma-dangle": [2, "never"],//对象字面量项尾不能有逗号 "comma-spacing": 0,//逗号前后的空格 "comma-style": [0, "last"],//逗号风格,换行时在行首还是行尾 "complexity": [0, 11],//循环复杂度 "computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的 "consistent-return": 0,//return 后面是否允许省略 "consistent-this": [0, "that"],//this别名 "constructor-super": 0,//非派生类不能调用super,派生类必须调用super "curly": [0, "all"],//必须使用 if(){} 中的{} "default-case": 0,//switch语句最后必须有default "dot-location": 0,//对象访问符的位置,换行的时候在行首还是行尾 "dot-notation": [1, { "allowKeywords": true }],//避免不必要的方括号 "eol-last": 0,//文件以单一的换行符结束 "eqeqeq": 1,//必须使用全等 "func-names": 0,//函数表达式必须有名字 "func-style": [0, "declaration"],//函数风格,规定只能使用函数声明/函数表达式 "generator-star-spacing": 0,//生成器函数*的前后空格 "guard-for-in": 0,//for in循环要用if语句过滤 "handle-callback-err": 0,//nodejs 处理错误 "id-length": 0,//变量名长度 "indent": [1, 2],//缩进风格 "init-declarations": 0,//声明时必须赋初值 "key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格 "lines-around-comment": 0,//行前/行后备注 "max-depth": [0, 4],//嵌套块深度 "max-len": [0, 80, 4],//字符串最大长度 "max-nested-callbacks": [0, 0],//回调嵌套深度 "max-params": [1, 3],//函数最多只能有3个参数 "max-statements": [0, 10],//函数内最多有几个声明 "new-cap": 2,//函数名首行大写必须使用new方式调用,首行小写必须用不带new方式调用 "new-parens": 2,//new时必须加小括号 "newline-after-var": 0,//变量声明后是否需要空一行 "object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格 "object-shorthand": 0,//强制对象字面量缩写语法 "one-var": 1,//连续声明 "operator-assignment": [0, "always"],//赋值运算符 += -=什么的 "operator-linebreak": [0, "after"],//换行时运算符在行尾还是行首 "padded-blocks": 0,//块语句内行首行尾是否要空行 "prefer-const": 0,//首选const "prefer-spread": 0,//首选展开运算 "prefer-reflect": 0,//首选Reflect的方法 "quotes": [1, "single"],//引号类型 `` "" '' "quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号 "radix": 0,//parseInt必须指定第二个参数 "id-match": 0,//命名检测 "require-yield": 0,//生成器函数必须有yield "semi": [1, "always"],//语句强制分号结尾 "semi-spacing": [0, {"before": false, "after": true}],//分号前后空格 "sort-vars": 0,//变量声明时排序 "space-after-keywords": [0, "always"],//关键字后面是否要空一格 "space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格 "space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格 "space-in-parens": [0, "never"],//小括号里面要不要有空格 "space-infix-ops": 0,//中缀操作符周围要不要有空格 "space-return-throw-case": 0,//return throw case后面要不要加空格 "space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格 "spaced-comment": 0,//注释风格要不要有空格什么的 "strict": 0,//使用严格模式 "use-isnan": 0,//禁止比较时使用NaN,只能用isNaN() "valid-jsdoc": 0,//jsdoc规则 "valid-typeof": 0,//必须使用合法的typeof的值 "vars-on-top": 2,//var必须放在作用域顶部 "wrap-iife": [0, "inside"],//立即执行函数表达式的小括号风格 "wrap-regex": 0,//正则表达式字面量用小括号包起来 "yoda": [0, "never"]//禁止尤达条件 } }
2017年11月09日
4 阅读
0 评论
0 点赞
2017-11-07
VScode-Vue大法
在VScod中完美开发Vue项目,1.插件安装"eslint": "^4.10.0", "eslint-config-standard": "^10.2.1", "eslint-plugin-html": "^3.2.2", "eslint-plugin-import": "^2.8.0", "eslint-plugin-node": "^5.2.1", "eslint-plugin-promise": "^3.6.0", "eslint-plugin-standard": "^3.0.1", "babel-eslint": "^8.0.2", npm install --save-dev eslint eslint-plugin-html eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard babel-eslint这是在我项目中用的插件版本,安装 npm install (包名) --save-dev2.在项目更目录添加.eslintrc.js配置文件配置文件内容 module.exports = { // 默认情况下,ESLint会在所有父级组件中寻找配置文件,一直到根目录。ESLint一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找。 root: true, // 对Babel解析器的包装使其与 ESLint 兼容。 parser: 'babel-eslint', parserOptions: { // 代码是 ECMAScript 模块 sourceType: 'module' }, env: { // 预定义的全局变量,这里是浏览器环境 browser: true, }, // 扩展一个流行的风格指南,即 eslint-config-standard // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ // 此插件用来识别.html 和 .vue文件中的js代码 'html', // standard风格的依赖包 "standard", // standard风格的依赖包 "promise" ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 } }3.设置VScode{ "workbench.colorTheme": "Monokai", "workbench.startupEditor": "newUntitledFile",// 以像素为单位控制字号。 "editor.fontSize": 18, "eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ], "eslint.options": { "plugins": ["html"] }, "emmet.includeLanguages": { "vue-html" :"html" }, "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }, "emmet.triggerExpansionOnTab": true, "emmet.showSuggestionsAsSnippets": true, "workbench.iconTheme": "vscode-icons", "vetur.validation.template": true, "window.zoomLevel": -1, "files.associations": { "*.vue": "html" }, "htmlhint.documentSelector": [ "html", "htm", "vue" ] }5.Vue插件安装1.Vetur 2.Vue 2 Snippets 3.VueHelper都是精华,接下来就可以愉快的玩耍了记得在全局安装eslint
2017年11月07日
2 阅读
0 评论
0 点赞
2017-11-07
axios学习笔记
GET请求// Make a request for a user with a given ID axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // Optionally the request above could also be done as axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });POST请求axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });同时执行多个请求function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Both requests are now complete }));其实和其他的ajax库一样,基本用法都是差不多的。大家一看就知道怎么用。axios API可以直接通过config来完成请求axios(config) axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); axios(url, [config]) // Send a GET request (default method) axios('/user/12345');请求方法别名下面是axios支持的所有请求方法别名,便于各种请求。注:[...]中的数据表示可以为空。url是ajax请求地址;data是提交的数据对象;config是配置对象,所有ajax配置都可以在config中实现。- axios.request(config) - axios.get(url[, config]) - axios.delete(url[, config]) - axios.head(url[, config]) - axios.post(url[, data[, config]]) - axios.put(url[, data[, config]]) - axios.patch(url[, data[, config]])并发性下列接口用于处理并发请求(同时处理多个多个request)- axios.all(iterable) - axios.spread(callback)axios实例可以用自定义的config创建一个axios实例axios.create([config]) var instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} });实例方法下面是实例的所有可用方法,方法中的config会与axios实例中的config合并。(实例可以将一些通用的config先配置好)- axios#request(config) - axios#get(url, [config]) - axios#delete(url, [config]) - axios#head(url, [config]) - axios#post(url[, data[, config]]) - axios#put(url[, data[, config]]) - axios#patch(url[, data[, config]]) Config重点来了,来看看Config。下面列出了config的所有配置项,其中之后url是必填的。当method没有指定方法,默认为GET。{ // `url` is the server URL that will be used for the request // 用来向服务器发送请求的url url: '/user', // `method` is the request method to be used when making the request // 请求方法 method: 'get', // default // `baseURL` will be prepended to `url` unless `url` is absolute. // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs // to methods of that instance. // 假如`url`不是绝对路径,那么向服务器发送请求的URL将是`baseURL + url` baseURL: 'https://some-domain.com/api/', // `transformRequest` allows changes to the request data before it is sent to the server // This is only applicable for request methods 'PUT', 'POST', and 'PATCH' // The last function in the array must return a string, an ArrayBuffer, or a Stream transformRequest: [function (data) { // Do whatever you want to transform the data return data; }], // `transformResponse` allows changes to the response data to be made before // it is passed to then/catch transformResponse: [function (data) { // Do whatever you want to transform the data return data; }], // `headers` are custom headers to be sent headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` are the URL parameters to be sent with the request // Must be a plain object or a URLSearchParams object params: { ID: 12345 }, // `paramsSerializer` is an optional function in charge of serializing `params` // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/) paramsSerializer: function(params) { return Qs.stringify(params, {arrayFormat: 'brackets'}) }, // `data` is the data to be sent as the request body // Only applicable for request methods 'PUT', 'POST', and 'PATCH' // When no `transformRequest` is set, must be of one of the following types: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - Browser only: FormData, File, Blob // - Node only: Stream data: { firstName: 'Fred' }, // `timeout` specifies the number of milliseconds before the request times out. // If the request takes longer than `timeout`, the request will be aborted. timeout: 1000, // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default // `adapter` allows custom handling of requests which makes testing easier. // Return a promise and supply a valid response (see [response docs](#response-api)). adapter: function (config) { /* ... */ }, // `auth` indicates that HTTP Basic auth should be used, and supplies credentials. // This will set an `Authorization` header, overwriting any existing // `Authorization` custom headers you have set using `headers`. auth: { username: 'janedoe', password: 's00pers3cret' }, // `responseType` indicates the type of data that the server will respond with // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // default // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token xsrfCookieName: 'XSRF-TOKEN', // default // `xsrfHeaderName` is the name of the http header that carries the xsrf token value xsrfHeaderName: 'X-XSRF-TOKEN', // default // `onUploadProgress` allows handling of progress events for uploads onUploadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // `onDownloadProgress` allows handling of progress events for downloads onDownloadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // `maxContentLength` defines the max size of the http response content allowed maxContentLength: 2000, // `validateStatus` defines whether to resolve or reject the promise for a given // HTTP response status code. If `validateStatus` returns `true` (or is set to `null` // or `undefined`), the promise will be resolved; otherwise, the promise will be // rejected. validateStatus: function (status) { return status >= 200 && status < 300; // default }, // `maxRedirects` defines the maximum number of redirects to follow in node.js. // If set to 0, no redirects will be followed. maxRedirects: 5, // default // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http // and https requests, respectively, in node.js. This allows to configure options like // `keepAlive` that are not enabled by default. httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // 'proxy' defines the hostname and port of the proxy server // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and supplies credentials. // This will set an `Proxy-Authorization` header, overwriting any existing `Proxy-Authorization` custom headers you have set using `headers`. proxy: { host: '127.0.0.1', port: 9000, auth: : { username: 'mikeymike', password: 'rapunz3l' } }, // `cancelToken` specifies a cancel token that can be used to cancel the request // (see Cancellation section below for details) cancelToken: new CancelToken(function (cancel) { }) }分析Config配置参数很多,我们一个一个来了解它们url —— 用来向服务器发送请求的urlmethod —— 请求方法,默认是GET方法baseURL —— 基础URL路径,假如url不是绝对路径,如https://some-domain.com/api/v1/login?name=jack,那么向服务器发送请求的URL将会是baseURL + url。transformRequest —— transformRequest方法允许在请求发送到服务器之前修改该请求,此方法只适用于PUT、POST和PATCH方法中。而且,此方法最后必须返回一个string、ArrayBuffer或者Stream。transformResponse —— transformResponse方法允许在数据传递到then/catch之前修改response数据。此方法最后也要返回数据。headers —— 发送自定义Headers头文件,头文件中包含了http请求的各种信息。params —— params是发送请求的查询参数对象,对象中的数据会被拼接成url?param1=value1¶m2=value2。paramsSerializer —— params参数序列化器。data —— data是在发送POST、PUT或者PATCH请求的数据对象。timeout —— 请求超时设置,单位为毫秒withCredentials —— 表明是否有跨域请求需要用到证书adapter —— adapter允许用户处理更易于测试的请求。返回一个Promise和一个有效的responseauth —— auth表明提供凭证用于完成http的身份验证。这将会在headers中设置一个Authorization授权信息。自定义Authorization授权要设置在headers中。responseType —— 表示服务器将返回响应的数据类型,有arraybuffer、blob、document、json、text、stream这6个类型,默认是json类似数据。xsrfCookieName —— 用作 xsrf token 值的 cookie 名称xsrfHeaderName —— 带有 xsrf token 值 http head 名称onUploadProgress —— 允许在上传过程中的做一些操作onDownloadProgress —— 允许在下载过程中的做一些操作maxContentLength —— 定义了接收到的response响应数据的最大长度。validateStatus —— validateStatus定义了根据HTTP响应状态码决定是否接收或拒绝获取到的promise。如果 validateStatus 返回 true (或设置为 null 或 undefined ),promise将被接收;否则,promise将被拒绝。maxRedirects —— maxRedirects定义了在node.js中redirect的最大值,如果设置为0,则没有redirect。httpAgent —— 定义在使用http请求时的代理httpsAgent —— 定义在使用https请求时的代理proxy —— proxy定义代理服务器的主机名和端口,authcancelToken —— cancelToken定义一个 cancel token 用于取消请求Response当我们ajax获取数据成功后会返回一个response对象,它包含了以下内容:{ // `data` is the response that was provided by the server data: {}, // `status` is the HTTP status code from the server response status: 200, // `statusText` is the HTTP status message from the server response statusText: 'OK', // `headers` the headers that the server responded with headers: {}, // `config` is the config that was provided to `axios` for the request config: {} }response是通过promise的then方法来获取,具体使用方法如下:axios.get('/user/12345') .then(function(response) { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); });相对的,我们有时也会出现ajax报错,此时就会到我们的catch中去捕获异常error对象。
2017年11月07日
2 阅读
0 评论
0 点赞
2017-10-27
vue在子组件内改变父组件的属性
.sync 方式在使用vue.js创建多页时有效,但是使用vue.esm.js时无效今天我在开发组件时,遇到一个问题,我想在子组件内改变父组件的属性,查阅了官方文档之后,我发现Vue重新引入了 .sync修饰符,但是刚用就发现了个坑。没有同步!没有同步!没有同步!重要的事情说三遍。我使用的是vue.esm.js这是父组件中的一段pug代码calendar(:show.sync="show", @export="exportDate")这是子组件的部分代码this.$emit('update:show', false);然而并没有什么软用。通过Chrome Devtools,我检测到了update:show的事件一直被触发。但是show属性一直都没有改变。摒弃这种语法糖后,我直接按照语法糖转化后的写法calendar(:show="show", @export="exportDate", @update:show="val => show = val")最后我通过官方指导的扩展后的写法,发现能实现数据的改变。在网上查阅了很多资料,发现并没有类似的问题(当然除了在我之前有个英文的提问,讲到了同样的问题)不知道大家有没有遇到过这类问题,并且知道缘由的。PS: 我使用unpkg的vue.js 2.3.3 并没有出现这类问题,代码能正常识别.sync的语法糖。
2017年10月27日
2 阅读
0 评论
0 点赞
2017-10-14
关于element-ui select组件change事件只要数据变化就会触发的解决办法
使用select组件和表格组件结合起来用,但是发现在点击下一页的时候,由于select当中的数据发生了变化,所以也会触发select当中的change事件,但是我只希望在我主动改变select组件当中的数据的时候才触发change事件要怎么办呢?去看element-ui的官方文档后发现select组件当中还有个visible-change事件,在visible-change事件当中添加个数据起到开关的作用,只有在点击下拉的时候‘开关’才打开。 才能执行change事件。当点击下一页的时候将开关关闭。
2017年10月14日
2 阅读
0 评论
0 点赞
1
2