在vue-cli构建的项目中使用vue-touch报priority错误 造成的原因可能是你的vue-touch安装的版本不对，vue2.0及其以上的版本的项目需要安装的是：npm install vue-touch@next后面的next必须加上，否则安装的vue-touch的版本则是版本1，加上next安装的版本才是2，才可以用于vue2.0构建的项目当中!作者：kitty_777链接：https://www.jianshu.com/p/8457348af319来源：简书简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

thinkphp3.2使用JWT进行用户token签名 总所周知，http是一种无状态协议，而当我们在传统的MVC模式下面，通常情况下是靠session来进行登陆验证。而现在的WEB已经发展到前后端分离的状态了，那么传统模式的session已经不能满足我们的需求。使用AXIOS与thinkphp进行跨域（非跨域）通信的时候，在服务端是无法使用session的，那么我们怎么来判断用户是否登陆呢？这个时候我们则使用到了现在流行的JWT方法。JWT是JSON Web Token的缩写JWT的作用是加密和解密。它可以把一堆数据加密，并生成一串密文，也可以把密文解密，还原原始数据。这样一来就可以用JWT加密个人登录信息，以便个人登录时，并提供密文，以证明自己是合法用户。 例如：把登录后的uid加密形成密文，然后发回个客户端，客户端以后每次都携带密文，访问带有权限验证的页面，服务服务端通过解密，得到uid，说明是已登录过的用户，并开放访问。这样，就必须要求客户端在访问每个需要验证的页面，都必须携带密文，同时在服务端也就不需要使用session验证了。顺便也避免了服务端session数据大的时候，引起的问题。因为加密的密文不是很长，服务端解密是很快的，所以不会给服务端造成压力。这样带来的好处是，多种设备使用一种密钥，都可以通用，可以避开手机端使用session等问题。同时，由于JWT是使用base64进行对称加密，也就是说是可以进行解密的，所以千万不要存储用户的密码等敏感信息！同时，由于JWT是使用base64进行对称加密，也就是说是可以进行解密的，所以千万不要存储用户的密码等敏感信息！同时，由于JWT是使用base64进行对称加密，也就是说是可以进行解密的，所以千万不要存储用户的密码等敏感信息！好了，现在我们来介绍一下在thinkphp如何使用JWT首先通过git获取https://github.com/firebase/php-jwt把获取到的JWT放至thinkphp的目录下，目录结构如下：Thinkphp/Library/Vender/Firebase/JWT此时JWT文件里面应有4个文件分别为：SignatureInvalidException.php JWT.php ExpiredException.php BeforeValidException.php除了JWT.php是我们要引入的主文件以外，其他文件不用直接引入。我们在需要使用JWT的文件里面添加上命名空间然后在要使用的操作类里面通过thinkphp的Vendor方法引入public function Login(){ Vendor('Firebase.JWT.JWT'); // 使用JWT进行密钥签名 define('KEY', '28ksdfgdioaiowjqwreosod23ldmbsm2Xa'); // 自定义私有密钥 // 这里的$data是通过查询数据库里面是否有相应的用户名，并且密码正确返回的信息，我这里忽略了验证数据库信息的过程 if($data){ $nowtime = time(); $token = [ 'iss' => 'teaxia', //签发者 'aud' => username, //jwt所面向的用户 'iat' => $nowtime, //签发时间 'nbf' => $nowtime, //生效时间（马上生效） 'exp' => $nowtime + 3600, // 过期时间1小时 'data' => [ 'userid' => $data['id'], // 数据库的用户ID（请自行获取） 'username' => $data['name'] // 数据库的用户名（请自行获取） ] ]; $jwt = JWT::encode($token, KEY); // 通过JWT获取token $this->ajaxReturn($jwt); // 返回用户token } }以上，通过JWT生成用户TOKEN的过程就完成了，那么我们在验证TOKEN的时候，使用$key = "28ksdfgdioaiowjqwreosod23ldmbsm2Xa"; // 私钥 $decoded = JWT::decode($jwtstr, $key, array('HS256')); // $jwtstr是每次请求时传过来的token $arr = json_decode(json_encode($decoded), true); // 解密数据这里面的$arr就是解密的用户信息，拿到这个用户信息就可以判断用户权限这些东西了

JS 将有父子关系的平行数组转换成树形数据 假设数据结构为：let data = [ {id: 1, text: 't11', parentId: 0}, {id: 2, text: 't11', parentId: 0}, {id: 3, text: 't11', parentId: 1}, {id: 4, text: 't11', parentId: 1}, {id: 5, text: 't11', parentId: 3}, {id: 6, text: 't11', parentId: 2}, ]; 需要转换成：// let tree =[{ // id:1,text:'t11',parentId:0, // child:[...] // }] 计算代码：data.forEach(ele => { let parentId = ele.parentId; if (parentId === 0) { //是根元素的hua ,不做任何操作,如果是正常的for-i循环,可以直接continue. } else { //如果ele是子元素的话 ,把ele扔到他的父亲的child数组中. data.forEach(d => { if (d.id === parentId) { let childArray = d.child; if (!childArray) { childArray = [] } childArray.push(ele); d.child = childArray; } }) } }); //去除重复元素 data = data.filter(ele => ele.parentId === 0); console.log('最终等到的tree结构数据: ', data);

VUE项目打包后使用apicloud编译成APP（IOS&Android） 本文主要解决以下问题怎么样才能使用apicloud把我们生产的项目打包成app呢？可以在vue里面调用apicloud的api访问我们的设备，使用一些硬件功能呢？使用VUE项目npm run build打包过后，我们得到的其实就一个index.html跟static资源文件夹。当然，我们直接把代码部署到服务器时候是没有任何问题的。但是我们怎么样才能使用apicloud把我们生产的项目打包成app呢？并且可以在vue里面调用apicloud的api访问我们的设备，使用一些硬件功能呢？关于生成app的部分，其实很简单。首先我们看看apicloud的打包目录我们可以看到里面有一些css html image等目录，但是我们在使用npm run build的时候webpack就已经把项目里面使用到的资源压缩到static目录里面了，如果我们强行把它分离出来的话，index.html肯定会报错，所以我们不能把资源分离出来。我们直接在apicloud的打包目录里面把static资源目录直接增加进去，然后index.html覆盖以前的文件。这样我们其实就可以直接使用apicloud打包了。（下图是增加了static的目录结构，其实只用把打包的文件直接复制进apicloud的根目录覆盖就可以了）解决了打包问题，我们回头来看看如何在VUE里面使用apicloud的API呢？首先我们在index.html里面引入apicloud的api.js.png<script src="script/api.js"></script>这段别改，因为script是apicloud的目录，你复制到apicloud的打包目录才有的东西，所以也就是说，你如果使用了apicloud的API,那就只能在真机上才能运行。引入了api以后，你就可以直接在VUE里面使用api了。比如我现在加入一个扫描二维码然后回调赋值给vue的内部变量里面引入了apicloud的FNScanner扫码模块在回调函数里面直接把值赋值给vue就可以了。

Vux+Axios拦截器增加loading的问题 很多时候，我们在页面使用Ajax刷新时候，会希望它出现loading的图标，让用户体验更好一些。那么如果我们每次在Axios里面进行请求，都要显示loading图标的话，那么没有一个全局的方法的话，势必会造成代码冗余的问题。有什么方法可以实现这个方法呢？这里，我们就要用到Axios的请求拦截器与相应拦截器了首先，我们在请求拦截器里面增加一个VUX的loading组件axios.interceptors.request.use( config => { //请求拦截器，调用loading插件 // 显示loading // 判断是否重复提交请求，也就是loading是否还存在，如果存在则不显示新的loading let isShow = window.app.$vux.loading.isVisible() if(!isShow&&config.showLoading){ window.app.$vux.loading.show({ text: 'Loading' }) } config.data = JSON.stringify(config.data); config.headers = { 'Content-Type': 'application/json', } return config; }, error => { return Promise.reject(err); } ); 整个数据里面，我们看到了里面有一个参数是$vux.loading.isVisible()这个。这个是vux自带的一个loading状态显示的参数。如果loading正在显示的话，它会是true，否则的话就显示false因为我们不希望同时有多个请求的时候，出现多个loading状态，这样的话用户看起来会很迷茫，所以我们在调用的时候，先判断一下这个状态。然后在响应拦截器里面关掉它就好了