hapi-confidence

记录一个confidence插件,简单明了地根据不同环境变量更换配置。平时我们写 config 或者 settings 文件要仔细区分环境,参数值比较混乱,难管理。有了 confidence 插件之后,再也不用担心环境参数混乱的问题了。

confidence 地址
https://github.com/hapipal/confidence

基本结构

结构很清晰,根据不同的环境变量获取不同的值。还能做一些范围控制。使用起来很简单,只要配置标准参数(如:$filter)即可。

{
    "key1": "abc",
    "key2": {
        "$filter": "env",
        "production": {
            "deeper": {
                "$value": "value"
            }
        },
        "$default": {
            "$filter": "platform",
            "android": 0,
            "ios": 1,
            "$default": 2
        }
    },
    "ab": {
        "$filter": "random.a",
        "$range": [
            { "limit": 10, "value": 4 },
            { "limit": 20, "value": 5 }
        ],
        "$default": 6
    },
    "$meta": {
        "description": "example file"
    }
}

angular_relevant_links

aem-test

记一次 aem test sharing。(AEM是一个庞大的,前后端未分离的,用java各种配置的框架。)
仔细查找文档发现了一些有助于 UI 测试的知识并记录。
参考资料总结如下:
https://blogs.perficient.com/2015/10/19/front-end-testing-with-hobbes-js/
https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/test-api/hobs.actions.core.wait.html

koa-helmet

Koa-helmet 确保 koa 安全最强中间件!

官网: https://helmetjs.github.io/

无论前端还是后台,对安全都是极其重视的。前端同学在面试的时候常常被问到 XSS 黑客攻击手段。面试答案也很固定,其实安全防御的重点还是在服务器, koa-helmet 这个中间件能有效的防御 XSS 等攻击。这个中间件使用起来非常方便。Helmet 从14个方面守护着用户的安全,能抵挡大多数黑客攻击。本文简略的说明14种攻击类型,帮大家理解这个安全的中间件。

一: Content Security Policy(内容安全策略): 简称CSP,实质就是白名单制度,开发者明确告诉客户端,哪些外部资源可以加载和执行,等同于提供白名单。它的实现和执行全部由浏览器完成,开发者只需提供配置。

koa-jwt 全面解析,安检利器

学习 Koa 不易,今天学习到了 koa-jwt 这个登陆验证必不可少的中间件。本文会说明 jwt是什么、token怎么来的、如何验证token。

一反常态,先上代码!(本代码由 koa-generater 生成,安装 koa-jwt, jsonwebtoken 两个 npm 包 )

文件名: app.js

红色框:jwt 相关的代码

rich editor(富文本编辑器)

今天我们来介绍5个前端富文本编辑器

1.vue-quill-editor

地址:https://github.com/surmon-china/vue-quill-editor

这款富文本编辑器,能搞定 vue 的 SPA 和 SSR 富文本编辑问题。使用起来很方便。文档易懂,要深入了解就要详细的看看quill的文档了,和quill一样可以通过注册组件来扩展功能。不过quill目前的release版本是1.3.6,vue-quill-editor依赖的是1.3.4 部分扩展组建用起来可能会有隐藏的bug。如果想深入了解推荐看1.3.4版本的quill。目前的版本改动较大。不过,这款编辑器和quill一样,对table的支持不太友好。扩展quilljs-table有蛮多bug,全选删除会留下一行表格,怎么都删不掉,该起来源代码也不那么容易。如果需要用到table功能,不建议使用quill系列的编辑器。


vue key有个坑

在vue2.x 中,我们经常使用key来提高组件性能,给了 input 或者 在 v-for 中 给子组件/元素一个 key 来加速diff渲染,这也是官方推荐的做法。不过 key 的赋值还真的不能马虎。

案例1. 无key的情况,切换 input 无法自动清空

在 input 不加 key 的时候,切换这两个 input 标签,input 框框里的值不会变

案例2. key相同tag标签,多次出现在同一个页面

这个bug很少见,但见了后会很头疼。通常我们使用key 偷懒的情况使用index来做key,

node generate pdf solutions(pdf 解决方案)

当当当,今天分享下如何生成pfd一个高效的解决方案。在管理系统中,我们需要将页面的内容打印 PDF 和 excel。HTML 打印 PDF 有很多方法,比如先将页面转换成canvas,然后打印canvas等。今天我们介绍2个 npm包,来帮助我们打印出来我们想要的PDF。其实打印pdf这个事儿主要工作在后端,众所周知前端能够做的东西有限,有限,,,

思路

1.在页面上点击打印,把需要打印的内容传送给后台

2.在后端生成对应页面的template(或者是先生成好的)

3.向template中填充前端传来的数据

padStart & padEnd

在ES8中,为String新增 padStart & padEnd, 用来填充字符串。

1.使用场景

  • 生成统一位数的文件名、编号等;eg:0001.txt ~ 9999.txt
  • 带有统一前缀或后缀的字符串、名字、编码等;eg:¥1,000.00,#EFEFEF,0x001F
  • 生成位数一样的字符串,以便打印和显示。

2.语法

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×