雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码
分享到：

前端之旅 第13页

去分类设置中添加分类描述吧

关于phpstorm,webstorm使用vue-cli，热替换不起作用

2017-03-11admin阅读(1683)评论(0)

webstorm默认保存在临时文件，

把settings=>appearance=>system=>synchornization=>

最后一项勾去掉,亲测可用

QQ截图20170310164421


 QQ截图20170310164200

Vue2.0开始爬坑

2017-03-05admin阅读(1867)评论(0)

之前一直用的是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

打开浏览器就看到效果了…

QQ截图20170305025519

如果安装报错,记得先升级npm

npm update -g

git 操作那些小事

2017-03-04admin阅读(3138)评论(2)

起因

今天,运维给开了一个git仓库,无奈一直无法建分支~~

123

后来百度查到

要先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分支。

333

好了,可以进行开发了!!!

html5重力感应事件解析

2017-02-28admin阅读(1981)评论(0)

手机上测试过了,可用!

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;
        }
    });

 

微信禁用右上角的分享按钮，WeixinJSBridge API以及隐藏分享的子按钮等菜单项

2017-02-20admin阅读(5004)评论(0)

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 });

使用方式，直接将项隐藏的菜单项

  • 发送给朋友: “menuItem:share:appMessage”
  • 分享到朋友圈: “menuItem:share:timeline”
  • 分享到QQ: “menuItem:share:qq”
  • 分享到Weibo: “menuItem:share:weiboApp”
  • 收藏: “menuItem:favorite”
  • 分享到FB: “menuItem:share:facebook”
  • 分享到 QQ 空间/menuItem:share:QZone

对 Vue Route功能的一次摸索性尝试

2017-01-01admin阅读(2027)

仅仅是一次摸索，大概思路如下：

  1. 路由匹配成功后，我怎么把模板载入进来呢？
  2. 模板载入后，我怎么传递数据呢？
  3. 数据获取以后，我们的项目要多人开发，怎么防止文件冲突呢？

首先，根据官方文档，我成功匹配到了路由，

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

分享api接口验证模块

2016-12-27admin阅读(1767)评论(0)

一.前言

权限验证在开发中是经常遇到的，通常也是封装好的模块，如果我们是使用者，通常指需要一个标记特性或者配置一下就可以完成，但实际里面还是有许多东西值得我们去探究。有时候我们也会用一些开源的权限验证框架，不过能自己实现一遍就更好，自己开发的东西成就感（逼格）会更高一些。进入主题，本篇主要是介绍接口端的权限验证，这个部分每个项目都会用到，所以最好就是也把它插件化，放在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&timestamp=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

使用RequireJs+Vue开发适合于自己项目的组件化

2016-11-29admin阅读(2874)评论(0)

起因分析

前端打包工具五花八门有很多,但是结合自己的实际项目, 却都不怎么实用,首先,我们的前端页面要嵌套进php的mvc框架里面,作为view层使用,如果使用打包工具生成了项目,再作为php的view层,后期维护将特备麻烦,因为里面已经写入了php相关代码,而前端重新修改组件,势必破坏之前的内容~~

所以暂时,想到了这样的方法:

首先把复用性极强的前端部分代码,写进一些单独的组件, 然后在使用的时候,动态载入到项目,载入完成后,作为vue的模板内容,加载到vue模板中…

大概代码逻辑如下:

luoj

html部分:

QQ截图20161129143753

模板部分

QQ截图20161129172637

效果如下:

vueres
本人也是刚开始系统接触前端的东西,正在摸索学习中,如果你有更好的方法或者建议,欢迎给我留言~

项目代码地址 : 点我看看

重新拾起好久不见的requireJS

2016-11-24admin阅读(1461)评论(0)

大概有好久没有使用requireJS了,今天好好地再复习一下,看了新公司的项目,感觉因为马上要派上用场了!

(1),在页面的引入:

1
&lt;script type="text/javascript" data-main="main" src="require.js"&gt;&lt;/script&gt;

(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的资源和demo

2016-11-23admin阅读(1697)评论(0)

Vue虽然是一个比较轻量级的框架，简单轻量的同时还非常的人性化，其提供的API也是非常的容易理解，同时也提供了一些很便捷的指令和属性。
相比较而言我个人认为Vue的代码编写风格更加简洁，并且通俗易懂。
下面是一些基础的demo案例~

j2MRZv

去看看

  • 上一页
  • 1
  • ···
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 下一页
  • 共 16 页
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说：
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说：
  • Dawn 9年前 (2016-09-16)说：
    call_user_func_array最后的例子是错哦，你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说：
    tp框架设置了全局捕获异常的，这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说：
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图