feng 发布的文章

vue实现异步加载组件

公司项目有一个需求,在展示平台页面以网格化页面展示,每个网格可以根据用户配置,搭配不同的组件,
可搭配的组件最终可能有上百种,如果不用异步的模式加载组件的话,最终打包的app会有很大一部分的冗余代码(用户没有配置的组件也会打包到js文件中)
这个时候,每个组件分别打包成一个js,最终通过异步加载的形式加载进来是比较好的办法.
关于异步打包,vue官方文档已经有写
官方链接
不过官方写的有点不好理解,其实搭配webpack只是最简单的改一下:

// import xxx from './xx/xxx'  // 头部不再需要引入
export default {
    components:{
       ...,
       xxx: resolve=> require(['./xx/xxx.vue'],resolve)  // 在components对象中引入路径即可,最终webpack打包会是一个单独的js文件
    }
}

其他代码都是一样的,不过一般来说,如果是动态引入组件的,基本上不会用template模板去写html标签,会直接在对象中写render方法
组件的名称以字符串的形式引入即可:

export default {
  ...,
  render(h){
     h('xxx')    // 创建一个xxx组件 等于<xxx /> h的具体用法参考vue官方createElement 
  }
}

关于render的学习用法,一个简单的方法是自己写一个template模板页面,然后用webpack打包后,在打包后的js中通过定位搜索找到render函数,看官方vue-template-compiler处理后的js代码,看几次就很明白了.(感觉这是最好的办法^_^)

js代码模拟实现输入框input事件

一些时候我们要做网页插件时往往需要去做很多输入框自动赋值,去实现对应功能.
随着web前端发展,MVVM框架的流行,很多页面想要实现自动赋值不再向以前那样对输入框简单的赋值即可,还需要对应的触发相关的事件让对应框架去取值才行.
一般情况下,最常见的就是发送输入框input事件了,(如vue的v-model本身就是自动帮你绑定了input事件去取值)
这里简单封装了一个方法.

window.___inputValue = function (dom, st) {
  var evt = new InputEvent('input', {
    inputType: 'insertText',
    data: st,
    dataTransfer: null,
    isComposing: false
  });
  dom.value = st;
  dom.dispatchEvent(evt);
}

简单的调用:

window.___inputValue(document.querySelector('input'),'输入要赋值的内容')

这方面的资料相对较少,这里记录一下以便将来需要用到时查阅方便.

vue中实现jsx语法编译

vue的template模板在平时写业务代码的时候非常好用,但是很多时候封装vue组件的时候,template就没有那么灵活.
这个时候我们基本上会舍弃他的template模板,直接写render函数去渲染,这个时候要是可以用jsx语法,就会大大简化我们的代码以及提高代码可读性,并且让我们的代码看起来非常优雅.
简单记录一下vue通过babel编译实现在render函数中写jsx的要点:
首先需要安装babel-plugin-transform-vue-jsx
装好后npm会提示你babel-helper-vue-jsx-merge-props没装,所以一起装上.

npm install babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev

如果只装这两个还是会报错,实际上这个插件里面还用到了babel-plugin-syntax-jsx,所以也装上.

npm install babel-plugin-syntax-jsx --save-dev

装完后在.babelrc的plugins添加上:

{
   ...,
   "plugins": [
    ...,
    "transform-vue-jsx"
  ]
}

最后记得在webpack的config文件加上对jsx文件的编译

{
  ...,
  module:{
    ...,
    {
      test: /\.jsx$/,
      loader: 'babel-loader'
    }
  }
}

现在就可以跟导入vue文件一样导入jsx文件了.(记得所有用jsx语法的文件用.jsx后缀结尾)

C# webapi实现jwt口令认证入门

jwt因为他的简单易用,并且有一定的加密性,在restful中会广泛使用.
这里记录一下简单的jwt登录验证实现.
通过nuget管理工具安装jwt管理,可以根据自己项目依赖性选择 4.0 3.0或者2.x,本人用的是3.0.0

凡是口令都是两部分,一部分是加密后发送到客户端,一部分是获取客户端加密后的字符串,解密后得到真实值.

using JWT;
using JWT.Algorithms;
using JWT.Serializers;
using Newtonsoft.Json;
....
        // 对象实体类加密
        public static string CreateJWTToken<T>(this T payload, string secret)
        {
            IJwtAlgorithm algorithm = new HMACSHA256Algorithm();
            IJsonSerializer serializer = new JsonNetSerializer();
            IBase64UrlEncoder urlEncoder = new JwtBase64UrlEncoder();
            IJwtEncoder encoder = new JwtEncoder(algorithm, serializer, urlEncoder);

            string token = encoder.Encode(payload, secret);

            return token;
        }

上面是最简单的加密方式,可以根据自己的需要换不同的加密方式.

        public static string GetJsonByToken(string token, string secret)
        {
            try
            {
                IJsonSerializer serializer = new JsonNetSerializer();
                IDateTimeProvider provider = new UtcDateTimeProvider();
                IJwtValidator validator = new JwtValidator(serializer, provider);
                IBase64UrlEncoder urlEncoder = new JwtBase64UrlEncoder();

                IJwtDecoder decoder = new JwtDecoder(serializer, validator, urlEncoder);

                string json = decoder.Decode(token, secret, true);

                return json;
            }
            catch (TokenExpiredException)
            {   //口令过期
                //Console.WriteLine("expired");
                return "expired";
            }
            catch (SignatureVerificationException)
            {   //无效口令.
                //Console.WriteLine("Err");
                return "err";
            }
            catch (Exception)
            {
                throw;
            }
        }

上面是简单的把口令解密成json字符串的方法.不过实际上我们希望得到的一般都是对应的实体类,可以再做一层封装:

        public static T GetObjectByToken<T>(string token, string secret)
        {
            var json = JWTHelper.GetJsonByToken(token, secret);
            if (json == "expired" || json == "err") return default(T);
            try
            {
                T obj = default(T);
                var data = JsonConvert.DeserializeAnonymousType(json, obj);
                return data;
            }
            catch (Exception)
            {
                return default(T);
            }

        }

JsonConvert.DeserializeAnonymousType 这个方法很好用,一般是用来有些json对象只用到一次的时候,单单创建一个匿名对象,而不是重新建一个实体类.

jwt口令加密及解密,就写这么多了,具体如何用到webapi中,可以参考之前写的一篇文章:
AuthorizeAttribute权限配置入门

Map地图上覆盖物实现事件透传

做地图页面的时候,很多情况下我们会在页面上加各种悬浮在地图上的dom元素,又不希望能影响地图的点击事件.
只要给dom元素css样式: pointer-events:none

当dom内部某些子元素按钮需要有点击事件时,只要给子元素css样式重新设置:pointer-events: auto即可

小技巧在做地图时非常有用,自己记录一下~