先學vue還是學node，008 - vue node rem

## VUE項目開發  關于跨域的處理
1.   C:\Windows\System32\drivers\etc     ---  修改映射localhost   jiuzhou.zyd1994.top   batu.bchltech.cn地址在前   域名在后將要映射的內容 ---- localhost
2.   config ---  prod.env.js  ---   API HOST
3.   config ---  idnex.js   --- target##  VUE路由處理 beforeEach
```javascript
router.beforeEach((to, from, next) => {console.log(to);if(to.path === '/path'){to.query.type = true;next();}
})頁面上要根據路由來處理：
var flag = this.$route.query.type;
if(flag == true){console.log('true');
}else{console.log('false');
}
```## ajax 發送大量數據
ajax 發送參數包含大量數據時，后端接口無響應：用post請求并用`JSON.stringify()`處理參數，后端用`JSON.parse`解析## node項目啟動報錯：events.js:160throw er; // Unhandled 'error' eventProcess 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還是學node、##  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循環綁定 表達式
```vue
<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用法
```vue
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 指定的。用vue還需要node中間層么？##  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屬性。vuecli3配置webpack、
```
{"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。},//  像下面這樣的寫法可以采用簡寫。vue3.2發布？"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"><spanclass="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"，這樣就不會出現問題了。node如何與vue一起用。 ##   “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 版本太低。vue-vis？需重新下載安裝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" οnclick="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##   注意對接接口的 urlurl   是 /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 樣式問題 warningbootstrap 的 btn 點擊事件自帶邊框藍色樣式。
【解決方法】去掉引用的btn類名```$xslt<button class=" btn_white btn_search" type="button" οnclick="searchProduct(this)"> 
```###  jquery $.each(data, function (index, value) {}
是遍歷處理data，可以是數組、DOM、json等，取決于直接給定或者ajax返回的類型
function (index, value)中index是當前元素的位置，value是值。vue布局、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=122.設置或獲取對象指定的文件名或路徑。
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 號碼。new vue、
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_-])+/;
--》 完整郵箱校驗  anc.liu@abc.com
var emailReg = /^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@([A-Za-z0-9]+[-.])+[A-Za-z0-9]{2,5}$/;1、純數字 
比如：123456@jb51.net 
2、純字母 
3、字母數字混合 
4、帶點的 
比如：web.blue@jb51.net 
5、帶下劃線 
比如：web_blue@jb51.net 
6、帶連接線 
比如：web-blue@jb51.net 【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 = [];//臨時數組2for (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 事件。vue rem、
$("#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 1var 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;
}## base64var 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 搜索引擎優化##  【增量更新】
正式環境上項目改了那個文件，更新哪個文件。vue router？給整個包叫【重新部署】 

?