webstorm默认保存在临时文件,
把settings=>appearance=>system=>synchornization=>
最后一项勾去掉,亲测可用
之前一直用的是Vue1.0,要么是2.0没有使用webpack,抽时间看看!
首先安装 webpack
cnpm install webpack -g (-g表示全局安装)
安装vue脚手架
cnpm install vue-cli -g
开始使用
vue init webpack
会有一些初始化的设置,如下输入:
Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
Project name (vue-test)直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字
开始安装依赖
(建议使用npm安装(需要科学上网))cnpm会导致包不全等等情况…
npm install(非常慢)
安装完成
npm run dev
打开浏览器就看到效果了…
如果安装报错,记得先升级npm
npm update -g
起因
今天,运维给开了一个git仓库,无奈一直无法建分支~~
后来百度查到
要先commit一次才会真正建立master分支,此时就可以新建立分支了。
于是先提交一次代码
git branch 查看本地分支
没有分支,建立一个分支 git branch dev
建立好了,推送这个本地分支到远程 git push origin dev:dev ( 远程没有分支则自动创建一个)
git push origin local_branch:remote_branch,
这个操作,local_branch必须为你本地存在的分支,remote_branch为远程分支,如果remote_branch不存在则会自动创建分支。
类似,git push origin :remote_branch,local_branch留空的话则是删除远程remote_branch分支。
好了,可以进行开发了!!!
手机上测试过了,可用!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
jQuery(document).ready(function($) { window.addEventListener("compassneedscalibration", function(event) { alert('您的罗盘需要校准,请将设备沿数字8方向移动。'); event.preventDefault(); }, true); if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); } var speed = 10;//speed var x = y = z = lastX = lastY = lastZ = 0; function deviceMotionHandler(eventData) { var acceleration =eventData.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) { alert(1); } lastX = x; lastY = y; lastZ = z; } }); |
1、隐藏微信网页右上角的按钮
1 2 3 4 5 6 7 8 9 |
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过下面这个API隐藏右上角按钮 WeixinJSBridge.call('hideOptionMenu'); }); document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过下面这个API显示右上角按钮 WeixinJSBridge.call('showOptionMenu'); }); |
2、隐藏微信网页底部的导航栏
1 2 3 4 5 6 7 8 9 |
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过下面这个API隐藏底部导航栏 WeixinJSBridge.call('hideToolbar'); }); document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过下面这个API显示底部导航栏 WeixinJSBridge.call('showToolbar'); }); |
3、在微信网页中获取用户的网络状态
1 2 3 4 |
WeixinJSBridge.invoke('getNetworkType',{},function(e){ // 在这里拿到e.err_msg,这里面就包含了所有的网络类型 alert(e.err_msg); }); |
e.err_msg的取值如下所示:
network_type:wifi wifi网络 2 network_type:edge 非wifi,包含3G/2G 3 network_type:fail 网络断开连接 4 network_type:wwan 2g或者3g
在附录三中有所有涉及的菜单项列表
wx.hideMenuItems({ menuList: [] // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3 });
使用方式,直接将项隐藏的菜单项
admin阅读(2027)
仅仅是一次摸索,大概思路如下:
首先,根据官方文档,我成功匹配到了路由,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter) // 1. 定义(路由)组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器, // 或者,只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在,应用已经启动了! |
可是怎么动态载入模板呢?因为Angular 可以直接传入组件路劲动态载入,我想,Vue应该也是可以的吧~~于是开始查找资料,最后得到结果!这里可以动态修改组件的内容,于是变成这样~
1 2 3 4 5 6 7 8 |
component: function (resolve){ $.get('test.vue', function(data) { const Foo = { template: data, }; resolve(Foo); }); } |
继续完善组件的其他信息,最后变成这样:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
{ path: '/foo', name:'foo', params:{},//对象,包含路由中的动态片段和全匹配片段的键值对 query:{},//对象,包含路由中查询参数的键值对。 matched:{},//数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 component: function (resolve){ $.get('test.vue', function(data) { const Foo = { template: data, props:['list'], data:function () { return{ name:666, a:444 } }, methods: { dianwo: function () { console.log('点我干啥...'); }, increment: function () { console.log(111111); } }, computed: {} }; resolve(Foo); }); }, //子路由 subRoutes: { '/news': {}, '/message': {} } } |
组件里面是这样:
1 2 3 4 5 6 7 8 9 |
<div :list="list"> 哎呀我去 <p>{{$data.mama}}</p> <b>{{name}}</b> <dd><b>{{a}}</b></dd> <div @click="dianwo">4444</div> <button v-on:click="increment">{{ name }}</button> <button>{{list}}</button> </div> |
走到这里前面的1和2已结解决,那3怎么办?
数据获取以后,我们的项目要多人开发,怎么防止文件冲突呢?
于是想到了 requireJs, 最后变成这样~
1 2 3 4 5 |
require(['js/a','js/b'],function (a,b) { console.log(a); console.log(b); //合并对象 }); |
js/a变成了这样
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
define(function (){ return obj = { path: '/foo', name:'foo', params:{},//对象,包含路由中的动态片段和全匹配片段的键值对 query:{},//对象,包含路由中查询参数的键值对。 matched:{},//数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 component: function (resolve){ $.get('test.vue', function(data) { const Foo = { template: data, props:['list'], data:function () { return{ name:666, a:444 } }, methods: { dianwo: function () { console.log('点我干啥...'); }, increment: function () { console.log(111111); } }, computed: {} }; resolve(Foo); }); }, //子路由 subRoutes: { '/news': {}, '/message': {} } }; }); |
js/b变成了这样
1 2 3 4 5 6 7 8 9 10 11 12 |
define(function (){ return obj = { path: '/bar', component: function (resolve) { const Bar = {template: ''}; $.get('bar.vue', function(data) { Bar.template = data; resolve(Bar); }); } } }); |
今天就先到这里吧,后面继续研究~
1.3 日补充: 最终解决方案代码 : http://git.oschina.net/shala/myClass/tree/master/vue/vueRouter
资料: http://www.cnblogs.com/avon/p/5943008.html
文档: http://router.vuejs.org/zh-cn/essentials/getting-started.html
一.前言
权限验证在开发中是经常遇到的,通常也是封装好的模块,如果我们是使用者,通常指需要一个标记特性或者配置一下就可以完成,但实际里面还是有许多东西值得我们去探究。有时候我们也会用一些开源的权限验证框架,不过能自己实现一遍就更好,自己开发的东西成就感(逼格)会更高一些。进入主题,本篇主要是介绍接口端的权限验证,这个部分每个项目都会用到,所以最好就是也把它插件化,放在Common中,新的项目就可以直接使用了。基于web的验证之前也写过这篇,有兴趣的看一下ASP.NET MVC Form验证。
二.简介
对于我们系统来说,提供给外部访问的方式有多种,例如通过网页访问,通过接口访问等。对于不同的操作,访问的权限也不同,如:
1. 可直接访问。对于一些获取数据操作不影响系统正常运行的和数据的,多余的验证是没有必要的,这个时候可以直接访问,例如获取当天的天气预报信息,获取网站的统计信息等。
2. 基于表单的web验证。对于网站来说,有些网页需要我们登录才可以操作,http请求是无状态,用户每次操作都登录一遍也是不可能的,这个时候就需要将用户的登录状态记录在某个地方。基于表单的验证通常是把登录信息记录在Cookie中,Cookie每次会随请求发送到服务端,以此来进行验证。例如博客园,会把登录信息记录在一个名称为.CNBlogsCookie的Cookie中(F12可去掉cookie观察效果),这是一个经过加密的字符串,服务端会进行解密来获取相关信息。当然虽然进行加密了,但请求在网络上传输,依据可能被窃取,应对这一点,通常是使用https,它会对请求进行非对称加密,就算被窃取,也无法直接获得我们的请求信息,大大提高了安全性。可以看到博客园也是基于https的。
3. 基于签名的api验证。对于接口来说,访问源可能有很多,网站、移动端和桌面程序都有可能,这个时候就不能通过cookie来实现了。基于签名的验证方式理论很简单,它有几个重要的参数:appkey, random,timestamp,secretkey。secretkey不随请求传输,服务端会维护一个 appkey-secretkey 的集合。例如要查询用户余额时,请求会是类似:/api/user/querybalance?userid=1&appkey=a86790776dbe45ca9032fc59bbc351cb&random=191×tamp=14826791236569260&sign=09d72f207ba8ca9c0fd0e5f8523340f5
参数解析:
1.appkey用于给服务端找到对应的secretkey。有时候我们会分配多对appkey-secretkey,例如安卓分一对,ios分一对。
2.random、timestamp是为了防止重放攻击的(Repaly Attacks),这是为了避免请求被窃取后,攻击者通过分析后破解后,再次发起恶意请求。参数timestamp时间戳是必须的,所谓时间戳是指从1970-1-1至当前的总秒数。我们规定一个时间,例如20分钟,超过20分钟就算过期,如果当前时间与这个时间戳的间隔超过20分钟,就拒绝。random不是必须的,但有了它也可以更好防止重放攻击,理论上来说,timestamp+random应该是唯一的,这个时候我们可以将其作为key缓存在redis,如果通过请求的timestamp+random能在规定时间获取到,就拒绝。这里还有个问题,客户端与服务端时间不同步怎么办?这个可以要求客户端校正时间,或者把过期时间调大,例如30分钟才算过期,再或者可以使用网络时间。防止重放攻击也是很常见的,例如你可以把手机时间调到较早前一个时间,再使用手机银行,这个时候就会收到error了。
3.sign签名是通过一定规则生成,在这里我用sign=md5(httpmethod+url+timestamp+参数字符串+secretkey)生成。服务端接收到请求后,先通过appkey找到secretkey,进行同样拼接后进行hash,再与请求的sign进行比较,不一致则拒绝。这里需要注意的是,虽然我们做了很多工作,但依然不能阻止请求被窃取;我把timestamp参与到sign的生成,因为timestamp在请求中是可见的,请求被窃取后它完全可以被修改并再次提交,如果我们把它参与到sign的生成,一旦修改,sign也就不一样了,提高了安全性。参数字符串是通过请求参数拼接生成的字符串,目的也是类似的,防止参数被篡改。例如有三个参数a=1,b=3,c=2,那么参数字符串=a1b3c2,也可以通过将参数按值进行排序再拼接生成参数字符串。
使用例子,最近刚好在使用友盟的消息推送服务,可以看到它的签名生成规则如下,与我们介绍是类似的。
来源 : http://www.cnblogs.com/4littleProgrammer/p/6220351.html
起因分析
前端打包工具五花八门有很多,但是结合自己的实际项目, 却都不怎么实用,首先,我们的前端页面要嵌套进php的mvc框架里面,作为view层使用,如果使用打包工具生成了项目,再作为php的view层,后期维护将特备麻烦,因为里面已经写入了php相关代码,而前端重新修改组件,势必破坏之前的内容~~
所以暂时,想到了这样的方法:
首先把复用性极强的前端部分代码,写进一些单独的组件, 然后在使用的时候,动态载入到项目,载入完成后,作为vue的模板内容,加载到vue模板中…
大概代码逻辑如下:
html部分:
模板部分
效果如下:
本人也是刚开始系统接触前端的东西,正在摸索学习中,如果你有更好的方法或者建议,欢迎给我留言~
项目代码地址 : 点我看看
大概有好久没有使用requireJS了,今天好好地再复习一下,看了新公司的项目,感觉因为马上要派上用场了!
(1),在页面的引入:
1 |
<script type="text/javascript" data-main="main" src="require.js"></script> |
(2)配置文件:
1 2 3 4 5 6 7 8 9 10 11 12 |
require.config({ baseUrl:'public', paths:{ 'jquery':'jquery.min', 'layer':'layer/layer', }, shim:{ 'layer':{ 'deps':['jquery'], }, } }); |
baseUrl : 引入文件的基础路劲
paths: 模块的地址
shim: 依赖关系
(3) 模块化开发
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
define(['jquery'],function () { return { show:function () { require(['layer'],function () { conssole.log(123); }) console.log('show'); }, hide:function () { console.log('hide'); }, hehe:function () { console.log('hehe'); }, } }) |
模块页面调用
1 2 3 |
require(['../app/init'],function(a){ a.show(); }) |
Vue虽然是一个比较轻量级的框架,简单轻量的同时还非常的人性化,其提供的API也是非常的容易理解,同时也提供了一些很便捷的指令和属性。
相比较而言我个人认为Vue的代码编写风格更加简洁,并且通俗易懂。
下面是一些基础的demo案例~