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 全局缓存  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 指定的。##  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"><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"，这样就不会出现问题了。 ##   “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" ο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是值。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 号码。
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 事件。
$("#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 搜索引擎优化##  【增量更新】
正式环境上项目改了那个文件，更新哪个文件。给整个包叫【重新部署】
008 - vue node rem相关推荐

vue+node+mongodb 搭建一个完整博客
Vue + Node + Mongodb 开发一个完整博客流程前言前段时间刚把自己的个人网站写完, 于是这段时间因为事情不是太多,便整理了一下,写了个简易版的博客系统服务端用的是 koa2框架 ...
vue+node+mongodb实现的功能
用vue+node +mongodb实现前后台交互的页面代码,已经上传到github上, 地址是: https://github.com/GainLoss/vue-node-mongodb https ...
微信扫码关注登录(vue+node+express+mongodb)
微信扫码关注登录(vue+node+express+mongodb) 文章目录前言一.微信扫码关注登录是什么? 二.为什么要使用微信扫码关注登录? 三.思路前端部分后端部分: 四.微信后台授 ...
环境监测系统/智能监测平台---Vue/Node.js
智能环境检测/大数据分析环境监测系统/智能监测平台-Vue/Node.js 摘要:通过开发板编写相关代码程序驱动各传感器感知采集环境数据,利用Node.js与云平台将采集到的环境数据上传至云平台,并 ...
Vchat — 从头到脚，撸一个社交聊天系统（vue + node + mongodb）
前言项目开始是因为工作需要一个聊天室功能,但是因为某些原因最终选用的是基于xmpp协议的Strophe.js写的.于是就想用node自己写一套,本来只是想简单的写个聊天页面,但是写完了又不满意,所以 ...
用Vue+Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅（上篇）
前言本人移动端开发妹子工程师一枚 ,因为公司项目需要用到前端的技术(主要是vue),自己自学了一段时间,最近花了半个月在工作之余的时间终于自己完完整整写下来一整个前后端商城项目(当然是跟了一个线上项 ...
【想稳，必看】毕业设计写这个你就赢了《Vue+Node 项目实战：拼多多前后端商城》
拒绝白嫖,各位看客记得点赞评论"妙-啊~~~"在此占坑在某个年纪之前,你可以靠透支身体.小聪明和老天给你的运气一直取巧地活着.然而到了某个年纪之后, 真正能让你走远的,都是自律. ...
Vue 使用 rem布局
Vue 使用 rem布局 1.rem布局需要安装两个插件 npm i lib-flexible -S npm i postcss-pxtorem@5.1.1 -D 最新版本postcss-pxtore ...
用Vue+Node搭建网上购物商城——记录篇
PC端网上购物商城 github地址前言项目采用的技术栈: Vue+Node+MySQL 前端:用Vue-cli搭建,使用Vue全家桶+element-ui 后端:express框架数据库:My ...
008 - vue node rem

008 - vue node rem相关推荐

最新文章

热门文章
