版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30856231/article/details/77676095
## ajax 发送大量数据 ajax 发送参数包含大量数据时，后端接口无响应：用post请求并用`JSON.stringify()`处理参数，后端用`JSON.parse`解析 ## node项目启动报错： events.js:160 throw er; // Unhandled 'error' event Process finished with exit code 1 **端口被占用，换一个端口或关掉占用端口** ## 异步请求超时处理 catch ```javascript asyncHttpUtils.getRequest(url,params,headers,function (data) { console.log(data) }).catch(function (error) { console.log('error: '+ error.toString()); }) ``` ## json转内容以','分隔 ```javascript "mainDepts": [ { "mainDeptId": "00000001-0001-0001-0001-000000000001", "mainDeptName": "苏州市（勿删）" }, { "mainDeptId": "00000001-0001-0001-0001-000000000001", "mainDeptName": "苏州市（勿删）" } ], // 正文 var mainFileName = ""; var mainFileId = ""; var mainFileArr = mainDepts; if(mainFileArr && mainFileArr.length > 0) { mainFileName = mainFileArr[0].mainName; mainFileId = mainFileArr[0].mainFileId; } ``` 数据输出： > mainFileName.join(',') --> 苏州市（勿删）,吴中区（勿删） ## 报错 "message": "#/attachments: expected type: JSONArray, found: String" 关于message 需要传 json数组形式，传过来是 string 格式。 JSON.parse(attachments) 就OK ## ThenJs ``` thenjs(function(cont){ if(!err){ cont(null, data); }else{ cont(err.message, null); } > cont:{ [Function: cont] _isCont: true } }).then(function(cont, arg){ if(!err){ cont(null, arg); }else{ cont(err.message, null); } > cont:{ [Function: cont] _isCont: true } > arg:undefined 需： cont(null, data); 赋值。下边的result为此处的data. }).finally(function(cont, error,result){ if(error){ var errorStr = error.message; }else{ res.send(result); } > cont:{ [Function: cont] _isCont: true } > error: null > result: 上边返回的结果 }).fail(function(cont, error){}); ``` example: ``` thenjs(function(cont){ db.query(querySql, [], function(err, result, fields){ if(err){ var errIf = {}; errIf.flag = 'sql'; errIf.message = '保存失败'; cont(errIf,null); // **出错，存error，在finally中处理** }else{ cont(null, result); // **保存数据，传至then中的 arg** } }); }).then(function(cont, arg){ console.log(arg); // **上一步操作中的数据result** asyncHttp.postRequest(url, params, headers, function(result){ if(result.code == '00000'){ // **判断对错** arg.data = result; cont(null, arg); } else{ var errIf = {}; // **保存出错信息** errIf.flag = 'api'; errIf.message = result.message; cont(errIf,null); } }); }).finally(function(cont, error,result){ console.log(error); console.log(result); if(error){ **处理错误信息** if(error.flag == 'api'){ // **操作1** }else{ // **操作2** results.success = false; results.code = 400; results.message = error.message; res.send(results); } }else{ // **正常操作** results.success = true; results.code = 200; results.message = '收文退回成功'; results.data = result.data; res.send(results); } }).fail(function(cont, error){}); ``` ## VUE Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程， 我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 mounted 是将编译好的html挂载到页面完成后执行的钩子函数，此时可以进行发送ajax请求获取数据的操作，进行数据初始化 ！！ mounted在整个实例生命内只执行一次 chrom调试： F12打开调试工具，会多一个Vue选项。可以看到组件的层级结构。 ## VUE 全局缓存 huancun 在main.js中定义一个全局变量: `` Vue.prototype.appCache = {app:{},news:{}} `` 取： `` var newslist = this.appCache.news.newslist; `` 存： `` that.appCache.news.newslist = that.news; `` ## vue-touch不支持vue2.0的替换方法 ## 基于vue-cli的快速构建 ``` vue init webpack vuename ``` eslint test e2e 都写成no ## webpack-simple vue 轻量级框架 #### VUE-cli 脚手架 Vue-cli是快速构建这个单页应用的脚手架， > 基于vue-cli快速构建 http://www.jianshu.com/p/2769efeaa10a >> vue-cli 目录结构 bulid 里面是一些操作文件，使用npm run * 时其实执行的就是这里的文件 config 配置文件，执行文件需要的配置信息 src 资源文件，所有的组件以及所用的图片都是在这个放着的简单看一下这个文件夹下都放了那些东西 src目录 assets? 资源文件夹，放图片之类的资源， components? 组件文件夹，写的所有组件都放在这个文件夹下，现在有一个写好的组件已经放到里面了， router? 路由文件夹，这个决定了也面的跳转规则， App.vue应用组件，所有自己写的组件，都是在这个组件之上运行了， main.js? ? webpack入口文件，webpack四大特性entry入口、output输出，loader加载器，plugins插件 package.json 项目基本信息。在创建vue-cli之后自动生成。 Vue两大核心思想，**组件化**和**数据驱动**， **组件化** 就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用， **数据驱动** 是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化，不必过多的关注DOM， 只需要将数据组织好即可。 目录： > src 资源文件，所有的组件以及所用的图片在这 assets 资源文件夹，放图片之类的资源， components 组件文件夹，写的所有组件都放在这个文件夹下，现在有一个写好的组件已经放到里面了， router 路由文件夹，这个决定了页面的跳转规则， App.vue 应用组件，所有自己写的组件，都是在这个组件之上运行了， main.js webpack入口文件，webpack四大特性entry入口、output输出，loader加载器，plugins插件， 可以在项目中build\webpack.base.conf.js第12行看到这个入口文件是哪个 ## click事件 表达式，传参 代码/换方法事件 a标签-->div > <router-link :to="'/news?newsId=' + item.id +'&callbackurl=/home'"> <div class="new-info" > {{content}} </div> </router-link> 替换为： <a @click="newsdetail(item.id)"> <div class="new-info" :style="{paddingRight: item.image==''?'0px':'140px'}"> {{content}} </div> </a> 或 > <div @click.stop="toNewsDetail(item.id)" class="new-info" > {{content}} </div> 实例中： method:{ toNewsDetail:function(id){ > this.$router.push({path:"/news",query:{newsId:id,callbackurl:"/home"}}); }, } > this.$router.push({path:'/login',query:{referer:'/setting'}}); 在网址中显示 http://localhost:8082/#/login?referer=/setting， query 携带 referer 参数 登陆成功后有个back方法,跳转到这个referer（跳转回去） back:function () { > this.$router.push({path:this.$route.query.referer}); }, 接受端： data(){ return { id: '', title: '', > callbackurl:this.$route.query.callbackurl } }, mounted(){ $loading.show('数据加载中'); var that = this; > var newsId = that.$route.query.newsId; httpUtils.getRequest('/news/newsdetail', {newsId: newsId, uId: this.uId}, function(result){ $loading.hide(); var data = result.data; if(data && data.success){ var news = data.data; that.id = news.id; that.title = news.title; that.original = news.source; that.releaseTime = news.createdTimestamp; that.content = news.content; that.favoriteStatus = news.favoriteStatus; } }); } ## VUE 鉤子 beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) } beforeRouteEnter (to, from, next) { > // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当钩子执行前，组件实例还没被创建 }, > 相当于提前判断 实例： `beforeRouteEnter(to, from, next){ var appId = to.query.appId; var uId = localStorage.getItem('userid'); httpUtils.getRequest('/appstore/appdetail?uId=' + uId + '&appId=' + appId, function(data){ var result = data.data || {}; var appInfo = result.response || {}; if(appInfo){ var appEntrance = appInfo.appEntrance; var subStatus = appInfo.subStatus; //判断是否是true， if(subStatus){` > openApp(appEntrance); //true直接打开 return; }else{ > next(); //false跳出这个判断函数，去执行后边的 } } }); }` ## VUE for循环绑定 表达式 <w-swiper-item v-for="item in arr"> <img style="width: 100%; height: 100% " :src= "item.src" > </w-swiper-item> <vuelist v-for="(item,index) in list" :index="list[index]" ></vuelist> ## vue 加载图片 <img class="loadappimg" :src="图片链接"/> ## vue beforeRouteLeave用法 beforeRouteLeave(to, from, next) { if(this.dialogStatus){ next(false) // next(false) 不能跳转【代码返回和安卓的物理返回按键都不能跳转】 }else{ next() // 可以跳转 } }, ## VUE可以直接在页面上进行数据操作 <h1 :class="(item.status == status)?'head':'head active'"> {{item.name.substring(item.name.length - 2)}} </h1> ## VUE created VUE实例之后执行加载数据 mounted之前 ### VUE页面数据都是在data中注册的 ### v-for # VUE 记录滚动条实时位置 mounted () { // 读 setTimeut(function(){ document.body.scrollTop = parseInt(sessionStorage.getItem('pos')); }, 1000); // 存 window.onscroll = function () { sessionStorage.setItem('pos', document.body.scrollTop); } } ## VUE computed computed相当于属性的一个实时计算，如果实时计算里关联了对象，那么当对象的某个值改变的时候，同事会出发实时计算。 ## 返回 <a href="javascript:history.go(-1)" class="button button-icon icon ion-ios-arrow-left" slot="left"></a> >事件当中： `window.history.back(-1);` that.$router.push({path: '/staffdetail?staffid=' + that.userid}); ## VUE - package.json 中 script 命令： "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port=8080", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", cross-env 能够不分系统地在全局注入变量，上面这条命令就是将 development 注入 NODE_ENV 环境变量 ## VUE created钩子在实例被创建之后调用 created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } ## VUE router.go router.push 为了与 HTML5 History API 保持一致性， router.go 已经被用来作为 后退/前进导航，router.push 用来导向特殊页面。 ## <router-view> 你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。 ## package.json >> package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。 npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。 只输入install就按照项目的根目录下的package.json文件中依赖的模块安装，这个文件里面是不允许有任何注释的， 每个使用npm管理的项目都有这个文件，是npm操作的入口文件。 package.json文件可以手工编写，也可以使用npm init命令自动生成。 npm init :只有项目名称（name）和项目版本（version）是必填的，其他都是选填的。 $ npm install express --save $ npm install express --save-dev 上面代码表示单独安装express模块，--save参数表示将该模块写入dependencies属性，--save-dev表示将该模块写入devDependencies属性。 ``` { "name": "liujiang", `项目名称` "version": "1.0.0", `项目版本` "author": "", "keywords":["node.js","javascript"], //放简介，字符串 "config": { // config字段用于添加命令行的环境变量 "port": "8080" // 在server.js脚本就可以引用config字段的值 }, "private": true, //private 如果你设置"private": true，npm就不会发布它。 这是一个防止意外发布私有库的方式。 "scripts": { //运行脚本命令的npm命令行缩写 "start": "node index.js" }, "repository": { // 指定你的代码存放的地方 "type": "git", "url": "https://path/to/url" }, "dependencies": { // 项目运行所依赖的模块 --> 模块名和对应的版本要求组成,表示依赖的模块及其版本范围。 "axios": "^0.15.3", "babel": "^6.23.0", "bable-loader": "0.0.1-security", "css-loader": "^0.28.5", "postcss": "^5.2.17", "postcss-loader": "^1.3.3", "raf.js": "0.0.4", "vue": "^2.1.0", "vue-loader": "^13.0.4", "vue-router": "^2.2.1", "vue-template-compiler": "^2.4.2" }, "devDependencies": { // 项目开发所需要的模块 "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-es2015": "^6.0.0", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "fastclick": "^1.0.6" }, "bin": { // bin项用来指定各个内部命令对应的可执行文件的位置。 "someTool": "./bin/someTool.js" // 上面代码指定，someTool 命令对应的可执行文件为 bin 子目录下的 someTool.js。 }, // 像下面这样的写法可以采用简写。 "script s": { "start": "./node_modules/someTool/someTool.js build", // 简写为 "start": "someTool build" } // main字段指定了加载的入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。 } ``` ## VUE router.go router.push 为了与 HTML5 History API 保持一致性， router.go 已经被用来作为 后退/前进导航，router.push 用来导向特殊页面。 ## <router-view> 你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。 ## ionic 是一个强大的 HTML5 应用程序开发框架。 ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点 ``` <!--应用分类 category是自定义的分类,name随便定--> <div v-for="category in appCategories"> <!--通过 v-if 判断，只要分类当中有数据的，筛选出需要的应用--> <div class="w-app-category-text" v-if="appData[category].length > 0"><span class="w-app-category-text-vline"></span>{{category}}</div> <div class="w-cells bottom-line-cells" v-if="appData[category].length > 0"> <!--此处的index只是个先定义的变量值,后边for循环中定义的变量，根据下边的index++来排列行 数 --> <div class="row" v-for="(item,index) in appData[category]" v-if="index % 4==0"> {{index}} <!--只循环，没用到n--> <div class="col" v-for="n in 4"> <div> <router-link v-if="appData[category][index]" :to="'/appdetail?appId=' + appData[category][index].appId + '&beforeRoute=/appstore'"> <!-- 绑定class对象，动态的切换class--> <div class="cell-item" :class="isEditStatus ? 'cell-item-select' : ''" @mousedown="mousedown" @mouseup="mouseup"> <i :data-appid="appData[category][index].appId" :favoriteStatus="appData[category][index].favoriteStatus" :category="category" :index="index" class="icon cell-item-top-right-icon" :class="appData[category][index].favoriteStatus ? 'ion-checkmark-circled royal' : 'ion-android-add-circle balanced'" @click="favorite($event.target, 'categoryType')"></i> <!--:src= 绑定属性--> <img class="cell-item-img loadappimg" :src="appData[category][index].appIcon"/> <br> <div class="cell-item-text">{{appData[category][index++].appName_cn}}</div> </div> </router-link> </div> </div> </div> </div> </div> ``` /* * ionic框架 */ <!-- 绑定class对象，动态的切换class--> ## node express 项目 1、创建项目：`express 项目名` 2、cd 到项目中： `npm install`下载所需依赖包即可 ## node报错 app.set is not a function 【解决方法：】 > app.js最后面加上： module.exports = app; ##node 访问链接 -- 访问一个网址 -- 路由-- 请求数据 -- 把数据装html中 -- 把html当做返回值 ## node 报错 ``` throw new TypeError('Router.use() requires middleware function but got a ' + gettype(fn)); ^ TypeError: Router.use() requires middleware function but got a Object ``` 可能是app.js中新引入的文件`app.use('/supercisor', require('./routes/supervisor'));` 最后没有引出抛出路由`` ## captchapng 图片验证码 node 依赖包 ## node后台传数据： encodeURIComponent编码 数据处理方法1： URL:http://blog.csdn.net/down177/article/details/40988731 [发送] ` var data = encodeURIComponent(encodeURIComponent(JSON.stringify(result))); res.render('/url',data:data) ` [接受] `data = JSON.parse(decodeURIComponent(decodeURIComponent("<%=data%>")));` 两次encodeURIComponent是因为第一次encodeURIComponent的时候出现了"%"，这个符号在解析参数的时候是无法解析的， 必须把"%"也进行编码，"%"编码后就是"%25"，这样就不会出现问题了。 ## “Can’t set headers after they are sent.” node express发送请求时报错 翻译为 “不能发送headers因为已经发送过一次了” => 在处理HTTP请求时，服务器会先输出响应头，然后再输出主体内容，而一旦输出过一次响应头（比如执行过 res.writeHead() 或 res.write() 或 res.end()）， 你再尝试通过 res.setHeader() 或 res.writeHead() 来设置响应头时（有些方法比如 res.redirect() 会调用 res.writeHead()）， 就会报这个错误。 （说明：express中的 res.header() 相当于 res.writeHead() ，res.send() 相当于 res.write() ） 原因就是你程序有问题，重复作出响应，具体原因很多，需要自己根据以上的原则来排除。 ``` router.get('/', function (req, res) { var uid = req.session.uid; if (!uid) { res.render('login/login', {title: '登录', headerTitle: '平台概览', nav: "index"}); } res.render('platform/overview', {title: '平台概览', headerTitle: '平台概览', nav: "index"}); }); ``` 以上会报错，因为执行了两次`res.render`. ``` router.get('/', function (req, res) { var uid = req.session.uid; if (!uid) { res.render('login/login', {title: '登录', headerTitle: '平台概览', nav: "index"}); } else { res.render('platform/overview', {title: '平台概览', headerTitle: '平台概览', nav: "index"}); } }); ``` ## mouseenter/mouseleave mouseover/mouseout + 包含子元素： mouseover/mouseout + 只有选中元素： mouseover/mouseout ## node md5 加密 模块 ``` var crypto = require('crypto'); function cryptPwd(password) { var md5 = crypto.createHash('md5'); return md5.update(password).digest('hex'); } // digest();方法只能调用一次，所以要封装方法 var password = '123456'; var cryptedPassword = cryptPwd(password); console.log(cryptedPassword); ``` ### KOA 基于nodejs的下一台web开发框架 ## axios 基于 Promise 的 HTTP 异步请求库 > 基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用 ## promise ES6 是一个对象，原生提供了 Promise 对象。用来传递异步操作的消息。 Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。 ## waring 不支持windows版本的nodejs `升级nodejs版本` npm install -g ## 运行nodejs 报错 node app.js 报错： Cannot find module 'merge-descriptors' Cannot find module 'ms' ... 把这个文件中的node_modules文件夹删掉，重新npm install,这个文件夹里的有问题 ## 执行npm run dev命令， 程序会先找到根目录下的package.json文件，找到文件中的scripts项，找到对应的dev命令，执行dev对应的命令，这里我们也可以不用npm run dev 直接输入dev后面的命令效果是一样的，这样做的目的是因为有时命令会很长有很难记住，这种方式会非常的方便， 具体只用可以参考阮一峰老师的**npm_script使用指南** ## swiper等插件的 name 之类的值加载不出来，可能是node、npm 版本太低。需重新下载安装node最新版本和 npm install所有 升级 node 版本 n 不支持windows版本 http://blog.csdn.net/s_521_h/article/details/76110926 n 不支持windows版本 需重新下载node最新版本 ## node express中res.redirect 跳转 重定向 跳转到'/hello' 显示‘asdf’ ``` var express = require('express'); var app = express(); app.get('/', function (req, res) { res.redirect('/hello'); }); app.get('/hello',function(req,res){ res.end('asdf'); }); app.listen(4100); console.log("http://localhost:4100"); ``` ## 字符转义 '\'' ```javascript var html = '<td><div class="btnDownload" onclick="downloads(' + '\'' + list[i].fileId + '\'' + ')">下载</div></td>'; ``` ## 下载文件 <a href="https://ip:port/file_service/v1/download?fileId=3245a85u982ed69" target="blank" class="attachment_paths" download="关于十三五精神学习通知.docx"> 关于十三五精神学习通知.docx </a> ## 注意！ warning !!! html标签li中的value问题 ui 的 li 是有序列表 在`html`的`li`标签的属性`value`是有规定的：规定列表项目的数字，所以`value`只能是数字。 ```html <ul style="text-align: left;"> <li id="test" value="007"> </li> </ul> ``` ```javascript var liValue = $('#test').val(); alert(liValue); //此结果为7 var liValueTwo = $('#test').attr("value"); alert(liValueTwo); //此结果为007 ``` ## 自定义属性、类型 <a class="box" data-id="{id}"> ## 七行代码将你的网站变成移动应用 https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247488736&idx=1&sn=c9bf2e5cbbfa174a99b73425a919ae37&chksm=f951a1a3ce2628b51719821caadcb35d820b0366c4ecf8f82bbe6f5e2f4714cf52fd051fbe6e&scene=27#wechat_redirect ## 获取select标签内容 var selectData = $('option:selected', '#task-list').val(); ## 前端-打印指定内荣容 print https://www.cnblogs.com/not-NULL/p/5395962.html ## 判断IE浏览器类型、版本 https://www.cnblogs.com/XCWebLTE/archive/2017/06/15/7017338.html ## input 只读方式 readonly属性：`readonly` ```html <input type="text" class="input-normal" value="" readonly="readonly"/> ``` ## @charset "utf-8"; CSS文化开头声明： `@charset "utf-8";` ## thenjs 异步流程控制库 ## input 可以直接设置最大长度16个字符 **maxlength** <input type="text" class=" required" name="username" maxlength="16" id="save"/> ## warning 注意form表单的 **method** `<form class="form-horizontal" action="" method="post">` 把method去掉 `<form class="form-horizontal">` 注意input表单的 **submit** `<input type="submit" class="btn" value="保存" id="makeSureEdit"/>` 把type改为`button` `<input type="button" class="btn" value="保存" id="makeSureEdit"/>` ## if...else... 多次判断出错处理 ```javascript if(t1){ show1(); return; }else if(t2){ show2(); return; }else if(t3){ show3(); return; }else if(t4){ // 执行t3后，不执行 else if(t4)的内容 show4(); return; } ``` + 当 if...else... 多次判断出错处理 时，讲其分开处理 ```javascript if(t1){ show1(); return; // 当执行if(t1){}出错时，return会直接跳出整个循环不执行难以下内容 } if(t2){ show2(); return; } if(t3){ show3(); return; } if(t4){ show4(); return; } ``` ## try...catch... 的用法 + try 测试代码块的错误。 + catch 语句处理错误。 + throw 创建并跑出错误。 ```javascript try { //在这里运行代码 抛出错误 } catch(err) { //在这里处理错误 } ``` ## 服务端缓存 http://developer.51cto.com/art/201709/550805.htm ## IE下Ajax提交乱码的解决办法 encodeURIComponent ` url: './listCity.jspx?prov='+ encodeURIComponent(参数), ` ## 字符的url 转化 德 --》 %E5%BE%B7 var key = encodeURIComponent(keyword) ## table 表格宽度 table表格列宽允许不设宽度时自动调整到合适宽度 ```html <thead> <tr> <th width="1%">表格</th> <th>序号</th> <th>会议名称</th> <th>参会部门</th> <th>创建时间</th> <th>操作</th> </tr> </thead> ``` ## Unicode编码表 制作特殊字符 伪类 .radio-group .radio-normal:checked + label:before{ content: "\2022"; color: $white; font-size: $radio-before-font-size-check; line-height: $radio-before-line-height-check; border-color: $radio-before-border-color-check; @include bgcolor($radio-before-bgcolor-check); } ## 清除浮动 子元素撑不开父元素 .component-group .group-item:after{ content: ""; display: table; clear:both; } ## 某些信息在session中保存，可在服务器那边修改 eg:登录用户相关信息在session中保存，前端每次请求页面都会取session中的内容， 用户头像更改后，在node那边把session中存的pic链接也修改掉 req.session.userinfo.picture = fileUrl; ## markdown 换行 空格+空格+回车 ## textarea 禁止改变大小 resize:none; ## centos 部署 ## webpack-simple 压缩 node-sass 需要 npm install -g 下载以下两个： ``` "sass-compile": "node-sass --output-style expanded --precision 6 scss/wingconn.scss dist/css/wingconn.css", "css-minify": "cleancss --level 1 --output dist/css/wingconn.min.css dist/css/wingconn.css", ``` npm install scss-compile -g 打包 scss文件 npm install clean-css-cli -g 压缩css文件 ## 图片加载不出来 有个能是img 的src中最后有一个分号; src=http://10.10.12.39:10089/sys/201712070944420789.png; 【处理方法】 if(article.imgPath.indexOf(';') != -1){ article.imgPath = article.imgPath.slice(0,-1) } ## 图片加密转base64图片大小 ## 页面模板引擎 连点的 --》 item.author.realName.name 这种连点的一定要保证之前的都有，做个判断 <dd class="col-xs-2"><%if(item.author){%><%=item.author.realName%><%}%></dd> ## windows 命令 dir 查看当前目录下文件 ## python 【1】安装pip ` python -m pip install -U pip ` 【2】安装request ` pip install request ` ## 强制不换行 p { white-space:nowrap; } ## 超出省略 white-space: nowrap; overflow:hidden; text-overflow:ellipsis; ## 一行代码让所有图片变灰 见博文：兼容性问题 http://blog.csdn.net/qq_30856231/article/details/78389993 #使页面全灰（博文末尾附grayscale.js） http://blog.csdn.net/qq_30856231/article/details/78983040 ## 注意对接接口的 url url 是 /user 还是 user var inviteUrl = config.api_host + '/user/comment/invite'; var inviteUrl = config.api_host + 'user/comment/invite'; ### 操作对象 css 属性 `` var cTag = $(currentNode)[0].parentElement; var color = $(cTag).css('background-color'); `` var color = $(currentNode.parent()).css('background-color'); ### 移除某个节点 $($(cNodes[i]).parents('.tag-font-item')).remove(); ### CSS 鼠标手势 cursor:pointer 【鼠标移入禁止点击效果】 cursor: not-allowed; 【手势移动】 cursor：move 【正在忙】 cursor: wait; ### bootstrap 的 btn 样式问题 warning bootstrap 的 btn 点击事件自带边框蓝色样式。 【解决方法】 去掉引用的btn类名 ```$xslt <button class=" btn_white btn_search" type="button" onclick="searchProduct(this)"> ``` ### jquery $.each(data, function (index, value) {} 是遍历处理data，可以是数组、DOM、json等，取决于直接给定或者ajax返回的类型 function (index, value)中index是当前元素的位置，value是值。 each处理一维数组 ``` var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); alert(val); }); // 处理json数据，例如ajax的返回值 var obj = { one:1, two:2, three:3}; $.each(obj, function(key, val) { alert(key); alert(val); }); ``` ## get 页面的url信息方法 网址信息 1.设置或获取整个 URL 为字符串。 alert(window.location.href); > http://10.10.12.180:8080/article/detail?id=12 2.设置或获取对象指定的文件名或路径。 alert(window.location.pathname) > http://10.10.12.180:8080/article/detail?id=12 **/article/detail** 3.设置或获取与 URL 关联的端口号码。 alert(window.location.port) > http://10.10.12.180:8080/article/detail?id=12 **8080** 4.设置或获取 URL 的协议部分。 alert(window.location.protocol) > http://10.10.12.180:8080/article/detail?id=12 **http:** 5.设置或获取 href 属性中在井号“#”后面的分段。 alert(window.location.hash) > http://10.10.12.180:8080/article/detail?id=12 **** 6.设置或获取 location 或 URL 的 hostname 和 port 号码。 alert(window.location.host) > http://10.10.12.180:8080/article/detail?id=12 **10.10.12.180:8080** 7.设置或获取 href 属性中跟在问号后面的部分。 alert(window.location.search) > http://10.10.12.180:8080/article/detail?id=12 **?id=12** 8.获取变量的值(截取等号后面的部分) var url = window.location.search; // alert(url.length); // alert(url.lastIndexOf('=')); var loc = url.substring(url.lastIndexOf('=')+1, url.length); ## 检测数据类型 var gettype = Object.prototype.toString console.log(gettype.call(数组)) ## 交叉测试 leftdelete 左滑删除 ## 正则校验 规则 【1】账号支持6-19位字母或数字，且以字母开头 var usernameReg = /^[a-zA-Z]+[a-zA-Z0-9]{5,18}$/; 【2】姓名支持2~11位中英文格式 var nameReg = /^([\u4E00-\u9FFF]|\w){2,11}$/; 【3】手机号格式不正确 var phoneReg = /^1[3|4|5|8][0-9]\d{8}$/; 【4】邮箱格式不正确 --》普通邮箱 var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; --》 完整邮箱校验 [email protected] var emailReg = /^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@([A-Za-z0-9]+[-.])+[A-Za-z0-9]{2,5}$/; 1、纯数字 比如：[email protected] 2、纯字母 3、字母数字混合 4、带点的 比如：[email protected] 5、带下划线 比如：[email protected] 6、带连接线 比如：[email protected] 【5】证件号 身份证 var idNumReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //身份证校验规则 var idNum2Reg = /^[a-zA-Z0-9]{9,20}$/; //其他证件校验规则 9--20位英文、数字格式 ```javascript /*手机号校验*/ var phoneReg = /^1[3|4|5|8][0-9]\d{8}$/; var phone = $(that.$refs.phone.$el).find('input')[0]; if (that.phone === '') { that.phoneerror = true; that.phonewaring = '手机号不能为空'; $(phone.parentNode).addClass('error'); } else if (!phoneReg.test(that.phone) || that.phone.length !== 11) { that.phoneerror = true; that.phonewaring = '手机号格式不正确'; $(phone.parentNode).addClass('error'); } else { that.phoneerror = false; $(phone.parentNode).removeClass('error'); } /*邮箱校验*/ var emailReg = /^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@([A-Za-z0-9]+[-.])+[A-Za-z0-9]{2,5}$/; var email = $(that.$refs.email.$el).find('input')[0]; if (that.email === '') { that.emailerror = true; that.emailwaring = '邮箱不能为空'; $(email.parentNode).addClass('error'); } else if (!emailReg.test(that.email)) { that.emailerror = true; $(email.parentNode).addClass('error'); that.emailwaring = '邮箱格式不正确'; } else { that.emailerror = false; $(email.parentNode).removeClass('error'); } ``` > 设置dialogstatus状态 true or false ， hashchange的方法 $(window).on("hashchange", function () { $actionSheet.hide(); delete that.appCache.staff.cstaffinfo; }); ## Storage 中取出的是字符串 "false" 不是 false,不能直接用 > 注意 var list = localStorage.getItem('list'); console.log(list) if(!list){ console.log(' this list is false') } if(list == 'false'){ console.log(' this list is false') } ## 配置项 字符串 replace 的用法 config{ emailContent: '尊敬的企业通用户您好，您的密码为:{pwd}。请妥善保存！', } 用法： content: config.emailContent.replace('{pwd}',that.password.toString()) 结果： 尊敬的企业通用户您好，您的密码为:321123。请妥善保存！ ## 取对象 键值方法： var boj = {'name': 'zhangsan','name2':'lisi'}; 取name方法: obj[index] ## APP底部 四栏 顶部： 状态栏 选项菜单： 首页 购物车 消息 我的 --> tabbar 选项卡： tab ## 服务器错误 报错 有时候是传的数据有问题，不一定都是借口问题 ## 通讯录scrollTop值相差1px that.arr.forEach((v, i) => { if (v === item) { document.documentElement.scrollTop = this.heightArr[i] - 54; document.body.scrollTop = this.heightArr[i] - 54; } }); ## 字符之间的空隙 样式 letter-spacing：2px ## mint-ui组件 http://mint-ui.github.io/#!/zh-cn ## Web App 与native本质区别是 + Native App是独立的可执行文件，直接与操作系统进行联系， + Web App则在浏览器里面运行，通过浏览器引擎与操作系统通信。 ### 获取scrollTop值 完美的获取scrollTop 赋值短语 ： ```var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;``` `` ## 去除arr1 中 arr2 中相等的元素 //做比较的两个数组 ``` var arr1 = [12, 23, 21, 24, 35, 45, 65, 56, 76, 58, 86]; var arr2 = [35, 58]; quchu(arr1, arr2); function quchu(arr1, arr2) { //临时数组存放 var temparr1 = [];//临时数组1 var temparr2 = [];//临时数组2 for (var i = 0; i < arr2.length; i++) { temparr1[arr2[i]] = true;//将数arr2 中的元素值作为temparr1 中的键，值为true； } for (var i = 0; i < arr1.length; i++) { if (!temparr1[arr1[i]]) { temparr2.push(arr1[i]);//过滤arr1 中与arr2 相同的元素； } } console.log(temparr2) // [12, 23, 21, 24, 45, 65, 56, 76, 86] } ``` ## @click.native 调用两次 正常情况下绑定click事件就可以了，如果遇到事件拦截的话，使用.native才有用。 ## 当元素获得焦点时，发生 focus 事件。 $("#code2").focus(); ### 报错： 报错：Uncaught SyntaxError: Unexpected token < in JSON at position 1 var cstaffinfo = JSON.parse(getLocalStorage("cstaffinfo")); 改为 getLocalStorage("cstaffinfo"); ### 报错： Error in mounted hook: "TypeError: Cannot read property '$el' of undefined" found in ... 看这个元素是否绑定ref,注意data中也要有绑定的ref元素值 ### 报错： Uncaught SyntaxError: Unexpected token < in JSON at position 1 var cstaffinfo = JSON.parse(getLocalStorage("cstaffinfo")); 改为 getLocalStorage("cstaffinfo"); ### 报错： Cannot read property 'filter' of undefined ## 项目运行环境： dev,开发环境; test,测试环境; product,生产环境 仿真环境 ## APP --> 启动页 lib -- 插件庫 hybrid视频教程 ## 获取随机数 getrandomnum = function (len) { len = len || 8; var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; var maxPos = $chars.length; var code = ''; for (i = 0; i < len; i++) { code += $chars.charAt(Math.floor(Math.random() * maxPos)); } return code; } ## base64 var decodeResponse = new Buffer(SAMLResponse,'base64').toString(); //基于base64 编码转为二进制数据字符串化 ## http get和 GET - 从指定的资源请求数据。 POST - 向指定的资源提交要被处理的数据 ## 审查元素快捷键 直接右键--》检查 ctrl + shift + c 选中元素 ## 布局 word-spacing letter-spacing word-spacing 属性增加或减少单词间的空白（即字间隔）。 letter-spacing 属性增加或减少字符间的空白（字符间距）。 ## 有的不用管 有的文件要到手机上才能出来 ## npm 不能下载就用cnpm ## npm run dev 不能启动项目 可能是node_modules模块有问题，删掉重新下载就行 ## 报错的一般是配置项未配置成功 根据报错提示 npm install 相应配置 ## google快捷键 Ctrl+数字快捷键切换标签页 Ctrl+Tab切换标签页 Ctrl+W也可以关闭当前的标签页 ## 改dns就是修改网络 网络--更改适配器选项--以太网--属性--IPV4--修改DNS服务器地址 ## 打包 1.基于cordova 打包 ios 和android 应用，并在手机端测试所有功能。 2.调研ios手机cookie删除的问题 3.调研手机原生通知功能 app.get('/',function (req, res) { res.send(arr); // send是返回给客户端的 }) ## 500M git config http.postBuffer 524288000 ## option 标签 option 元素定义下拉列表中的一个选项（一个条目）。 HTTP状态码 200 & OK: 请求成功； 204 & No Content: 请求处理成功，但没有资源可以返回； 206 & Partial Content: 对资源某一部分进行请求(比如对于只加载了一般的图片剩余部分的请求)； 301 & Move Permanently: 永久性重定向； 302 & Found： 临时性重定向； 303 & See Other: 请求资源存在另一个URI，应使用get方法请求； 304 & Not Modified: 服务器判断本地缓存未更新，可以直接使用本地的缓存； 307 & Temporary Redirect: 临时重定向； 400 & Bad Request: 请求报文存在语法错误； 401 & Unauthorized: 请求需要通过HTTP认证； 403 & Forbidden: 请求资源被服务器拒绝，访问权限的问题； 404 & Not Found: 服务器上没有请求的资源； 500 & Internal Server Error: 服务器执行请求时出现错误； 502 & Bad Gateway: 错误的网关； 503 & Service Unavailable: 服务器超载或正在维护，无法处理请求； 504 & Gateway timeout: 网关超时； 200 接口成功状态码 400 接口错误状态码 500 服务器内部错误 4001 会话信息为空 4002 会话信息失效 4003 应用是否实名认证 ## SEO 搜索引擎优化