zslzz

zslzz 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

zslzz 赞了文章 · 1月7日

讲技术-什么是Web Hook?

(一、)什么是Web Hook?

Webhook是一个API概念,并且变得越来越流行。我们能用事件描述的事物越多,webhook的作用范围也就越大。Webhook作为一个轻量的事件处理应用,正变得越来越有用。

简单来说就是一种反向API机制,类似于触发器的一样.

场景模拟:

在传统的web server设计中,我们项目A想要获取项目B的数据,通常项目B需要提供一个API,然后项目A去请求项目B的API,从而获得数据,这样的过程我们称之为"拉"数据。

==通过webhook机制,对客户端-服务端的模式进行了逆转。==

继续回到场景中:

新增了一个需求,项目A需要实时获取到项目B的最新数据,在传统做法中,我们需要不停的去向项目B做轮询操作,以便获取到最新数据,这样的效率和性能都非常低下,通过webhook机制来设计

传统做法:项目A需要不停轮询去拉取项目B的最新数据

项目A   -> 项目B

webhook机制:项目A提供一个webhook url,每次项目B创建新数据时,便会向项目A的hook地址进行请求,项目A收到项目B的请求,然后对数据进行处理

项目B   -> 项目A

用一张图来说明,这个流程.
image

(二、)如何使用webhook?

使用webhook就需要为对应的服务端设计一个hook url,用于接收服务端的请求。

例如:

http://www.abcd.com/api/video/hook

通常webhook请求过来的数据格式为xml和json两种,在现代Web应用中,都能很好的解析和对这两种数据进行交互.

(三、)主要应用场景

都常应用于异步编程中,如:高安全的支付、微信登录(OAuth)、资源同步、资源创建与更新、耗时较长。

场景A:
你需要向视频处理服务器上传一个视频、你需要获得视频处理后的结果,然而视频处理服务器上视频很多,在排队进行处理,你不能立刻获取到视频的处理结果,此时你可以设计一个hook url,当视频处理完成后,视频处理服务器自动向你的hook url发送请求,告诉你视频已经处理完毕.

(四、)安全问题

由于webhook会向公网上的hook url发送数据,这就意味着某些不好心的人可能会找到这个url,从而进行发送错误的数据,但是我们可以通过以下一些技术手段来解决这个问题:

  • 增加token机制
  • 增加auth认证
  • 只接收对应服务端domain或IP请求
  • 数据签名

(五、)需要注意的问题

当我们使用web hook机制需要特别注意的问题

  1. 当服务提供者通过web hook将数据发送你的服务端后,就不会再去关注这些数据。假设你的服务端此时出现了崩溃,或者无法请求成功等原因,就需要主动去尝试请求数据。
  2. webhook会发出大量的请求,可能会造成你的应用阻塞,在此需要确保你的应用能够处理好这些请求。
查看原文

赞 16 收藏 7 评论 1

zslzz 赞了回答 · 2019-02-26

解决遍历list的时候为什么不能修改呢?

你的问题描述得不太准确,标签是javalisp,只写过一点 racket 代码就不谈论 lisp 了,以下默认修改为 list 的 add/remove 操作

  • 首先, java 里面有很多种 list :

      java.util.ArrayList;
      java.util.LinkedList;
      java.util.Stack;
      java.util.Vector;
      java.util.concurrent.CopyOnWriteArrayList;

    其中 CopyOnWriteArrayList在遍历的时候修改是不会出错的,实现方法是读写分离,参考维基 Copy-on-write

  • 其次, java 里面有好几种遍历方式:

    for
    iterator
    foreach
    • for,在 for 循环中修改并没有问题,除非你把要访问的对象删除,数组越界,或者一直add生成无穷序列

    • iterator,你用 iterator.remove() 是不会有问题的,因为 iterator.remove() 会设置

      this.expectedModCount = ArrayList.this.modCount;//(1)

      这样之后遍历执行 iterator.next() 就不会抛异常

      public E next() {
      this.checkForComodification();
      ...
      }
      
      final void checkForComodification() {
      if(ArrayList.this.modCount != this.expectedModCount) {
          throw new ConcurrentModificationException();
      }
      }
    • foreach,本质上是隐式的 iterator (可以用 javap -c 比较字节码),由于没有重新设置 expectedModCount ,当你使用 list.remove() 后遍历执行 iterator.next() 时就会报ConcurrentModificationException

  • 最后,这里面有一个特别的地方,就如果删除的是 list 里倒数第二个值,这样触发 hasNext() 的时候结果正好为 false 退出循环不继续执行 next() 也就不会报错

        public boolean hasNext() {
            return this.cursor != ArrayList.this.size;
        }

PS:使用的JDK是java-8-openjdk-amd64

关注 5 回答 4

zslzz 赞了文章 · 2018-12-04

基于Vue实现后台系统权限控制

基于Vue.js 2.x系列 + Element UI 的后台系统权限控制

前言:关于vue权限路由的那些事儿……

项目背景:现有一个后台管理系统,共存在两种类型的人员

①超级管理员(称作admin),②普通用户(称作editor)

每种类型的人看到的操作栏并不一样,可以进行的操作也不尽相同,于是就需要程序处理一下各个权限问题。

过程说难不难,说简单不算简单

vue权限

【迷茫的前期】

上百度、Google,狂搜了好多关于权限的问题,也许是仁者见仁智者见智吧,五花八门的介绍让自己更加迷茫不堪,真心不知道从哪里下手:

1)让后端返回关于权限的json数据吧,但却不太懂这样的数据应该怎样处理;

2)在前端路由那里处理,可是不明白应该怎样使用何种属性来实现这个功能;

【最后】

最后看到一篇文章 手摸手,带你用vue撸后台 系列二(登录权限篇)
,但是发现代码非常多权限功能是整合在框架里面的,伤心,我就想实现一个小小的权限功能,没办法还是仔细的研究了起来。

具体实现思路

1 创建vue实例的时候将vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限的公用的页面。

2 当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。

3 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。

4 使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件。

<font color=red size=4 face="黑体">是不是有点懵没关系下面我尽量用通俗点的话来讲每一步</font>

1在路由router.js里面声明权限为admin的路由(异步挂载的路由asyncRouterMap)

// router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRouterMap = [
  {
    path: '/',
    redirect: '/login',
    hidden: true
  },
  {
    path: '/login',
    name: '登录页面',
    hidden: true,
    component: resolve => require(['../views/login/Login.vue'], resolve)
  },
  {
    path: '/Readme',
    // name: 'Readmehome',
    index: 'Readme',
    meta: {
      title: 'Readme',
      icon: 'el-icon-menu'
    },
    component: resolve => require(['../components/common/Home.vue'], resolve),
    children: [
      {
        name: 'Readme',
        path: '/',
        meta: { title: 'Readme', icon: 'el-icon-menu' },
        component: resolve => require(['../components/page/Readme.vue'], resolve)
      }
    ]
  }
]

export default new Router({
  routes: constantRouterMap
})
// 异步挂载的路由
// 动态需要根据权限加载的路由表
export const asyncRouterMap = [
  {
    path: '/permission',
    // name: 'permissionhome',
    meta: {
      title: 'permission',
      icon: 'el-icon-setting',
      roles: ['admin']
    },
    component: resolve => require(['../components/common/Home.vue'], resolve),
    children: [
      {
        name: 'permission',
        path: '/permission',
        meta: {
          title: 'permission', icon: 'el-icon-menu', roles: ['admin']
        },
        component: resolve => require(['../components/page/permission.vue'], resolve)
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]

这里我们根据 vue-router官方推荐 的方法通过meta标签来标示改页面能访问的权限有哪些。如meta: { role: ['admin','super_editor'] }表示该页面只有admin和超级编辑才能有资格进入。

注意事项:这里有一个需要非常注意的地方就是 404 页面一定要最后加载,如果放在constantRouterMap一同声明了404,后面的所以页面都会被拦截到404,详细的问题见addRoutes when you've got a wildcard route for 404s does not work

2当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由,生成最终用户可访问的路由表。路由表存在vuex里面

permission.js

// permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 验权

const whiteList = ['/login', '/authredirect'] // 不重定向白名单

router.beforeEach((to, from, next) => {
  if (getToken()) { // 判断是否有token
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store.getters.roles.length === 0) {
        console.log('roles====0')
        store.dispatch('GetInfo').then(res => { // 拉取用户信息
          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
          console.log('roles?', roles)
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
            console.log('addrouters', store.getters.addRouters)
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch(() => {
          store.dispatch('FedLogOut').then(() => {
            Message.error('验证失败,请重新登录')
            next({ path: '/login' })
          })
        })
      } else {
        console.log('====1')
        next() // 当有用户权限的时候,说明所有可访问路由已生成 如访问没权限的全面会自动进入404页面
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
    }
  }
})

3使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件(菜单)。

sidebar

最后预览链接

vue实现的权限系统

源码下载

https://github.com/mgbq/vue-p...

打赏 衷心的表示感谢

打赏

最后如有不对的麻烦指正

查看原文

赞 37 收藏 36 评论 6

zslzz 赞了回答 · 2018-11-07

解决使用Vue的axios vue-resource跨域不成功 但原生xhr就可以

刚好也遇到了类似的问题,已解决,试着解答下你的问题。

首先,axios 发送请求时的数据默认是 JSON 格式的。这是导致用 axios POST 跨域出错的主要原因。

根据 CORS 的标准,当浏览器发送跨域请求时,如果请求不是GET或者特定POST(Content-Type只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain的一种)时,强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request),从而获知服务器端对跨源请求所支持 HTTP 方法。

所以,使用 axios 直接发送 POST 的跨域请求,如果web后端对 OPTIONS 的响应有问题,就会报错。我没有 Node 环境,对 Node 也不了解,所以没法验证你的配置是否OK,但参考我 Nginx 上的配置,我感觉你在 Allow-Headers 里再加点内容可能会OK?

另外,至于为何 XHR 可以。我猜也是跟数据格式有关,XHR 应该是 form-urlencoded 格式吧。因为你的截图看不到 Form Data,所以不好下结论。

最后,我用 axios 解决跨域的方案和你类似,不过是先把 params 转换为字符串格式了,见末尾的官方用x-www-form-urlencoded格式的说明

import qs from 'qs';
import axios from 'axios';

let reqUrl = 'http://xxx.com';
let reqParams = {
    name: 'aaa'
};
axios.post(url, qs.stringify({
    params: reqParams
})).then(response => {
    console.log(response);
})
#
# Wide-open CORS config for nginx
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
}

官方用x-www-form-urlencoded格式的说明

CORS标准的说明

关注 12 回答 4

zslzz 赞了问题 · 2018-10-25

解决应该用forEach改变数组的值吗?

由于js中的数组是引用类型,所以可以利用类似指针的特性通过改变另一个变量去修改原始的值。我认为这其实是js中的缺陷,所以我不喜欢利用这个"缺陷"去实现一些功能,在最近的一次code review中,同事指出了这个问题。所以我希望有更多朋友能给我一些建议。

下面就是简单的例子。

let arr = [{
    a:1,
    b:2,
}, {
    a:3,
    b:4,
}];

如果有以上数组,我需要将每一项的a改为3。大概有两种写法,一种是用forEach,另一种是用map来返回一个新数组(暂不考虑for循环)。

forEach:

arr.forEach((item) => {
    item.a = 3; 
});

map:

arr = arr.map((item) => {   //  有同事指出应该声明一个新变量来存储map的结果,这个建议我认为是对的。
    item.a = 3;
    return item;
});

关注 6 回答 2

zslzz 评论了文章 · 2018-10-20

基于Vue实现后台系统权限控制

基于Vue.js 2.x系列 + Element UI 的后台系统权限控制

前言:关于vue权限路由的那些事儿……

项目背景:现有一个后台管理系统,共存在两种类型的人员

①超级管理员(称作admin),②普通用户(称作editor)

每种类型的人看到的操作栏并不一样,可以进行的操作也不尽相同,于是就需要程序处理一下各个权限问题。

过程说难不难,说简单不算简单

vue权限

【迷茫的前期】

上百度、Google,狂搜了好多关于权限的问题,也许是仁者见仁智者见智吧,五花八门的介绍让自己更加迷茫不堪,真心不知道从哪里下手:

1)让后端返回关于权限的json数据吧,但却不太懂这样的数据应该怎样处理;

2)在前端路由那里处理,可是不明白应该怎样使用何种属性来实现这个功能;

【最后】

最后看到一篇文章 手摸手,带你用vue撸后台 系列二(登录权限篇)
,但是发现代码非常多权限功能是整合在框架里面的,伤心,我就想实现一个小小的权限功能,没办法还是仔细的研究了起来。

具体实现思路

1 创建vue实例的时候将vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限的公用的页面。

2 当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。

3 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。

4 使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件。

<font color=red size=4 face="黑体">是不是有点懵没关系下面我尽量用通俗点的话来讲每一步</font>

1在路由router.js里面声明权限为admin的路由(异步挂载的路由asyncRouterMap)

// router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRouterMap = [
  {
    path: '/',
    redirect: '/login',
    hidden: true
  },
  {
    path: '/login',
    name: '登录页面',
    hidden: true,
    component: resolve => require(['../views/login/Login.vue'], resolve)
  },
  {
    path: '/Readme',
    // name: 'Readmehome',
    index: 'Readme',
    meta: {
      title: 'Readme',
      icon: 'el-icon-menu'
    },
    component: resolve => require(['../components/common/Home.vue'], resolve),
    children: [
      {
        name: 'Readme',
        path: '/',
        meta: { title: 'Readme', icon: 'el-icon-menu' },
        component: resolve => require(['../components/page/Readme.vue'], resolve)
      }
    ]
  }
]

export default new Router({
  routes: constantRouterMap
})
// 异步挂载的路由
// 动态需要根据权限加载的路由表
export const asyncRouterMap = [
  {
    path: '/permission',
    // name: 'permissionhome',
    meta: {
      title: 'permission',
      icon: 'el-icon-setting',
      roles: ['admin']
    },
    component: resolve => require(['../components/common/Home.vue'], resolve),
    children: [
      {
        name: 'permission',
        path: '/permission',
        meta: {
          title: 'permission', icon: 'el-icon-menu', roles: ['admin']
        },
        component: resolve => require(['../components/page/permission.vue'], resolve)
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]

这里我们根据 vue-router官方推荐 的方法通过meta标签来标示改页面能访问的权限有哪些。如meta: { role: ['admin','super_editor'] }表示该页面只有admin和超级编辑才能有资格进入。

注意事项:这里有一个需要非常注意的地方就是 404 页面一定要最后加载,如果放在constantRouterMap一同声明了404,后面的所以页面都会被拦截到404,详细的问题见addRoutes when you've got a wildcard route for 404s does not work

2当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由,生成最终用户可访问的路由表。路由表存在vuex里面

permission.js

// permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 验权

const whiteList = ['/login', '/authredirect'] // 不重定向白名单

router.beforeEach((to, from, next) => {
  if (getToken()) { // 判断是否有token
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store.getters.roles.length === 0) {
        console.log('roles====0')
        store.dispatch('GetInfo').then(res => { // 拉取用户信息
          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
          console.log('roles?', roles)
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
            console.log('addrouters', store.getters.addRouters)
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch(() => {
          store.dispatch('FedLogOut').then(() => {
            Message.error('验证失败,请重新登录')
            next({ path: '/login' })
          })
        })
      } else {
        console.log('====1')
        next() // 当有用户权限的时候,说明所有可访问路由已生成 如访问没权限的全面会自动进入404页面
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
    }
  }
})

3使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件(菜单)。

sidebar

最后预览链接

vue实现的权限系统

源码下载

https://github.com/mgbq/vue-p...

打赏 衷心的表示感谢

打赏

最后如有不对的麻烦指正

查看原文

zslzz 赞了回答 · 2018-07-30

解决vuejs webpack模板里import路径中@符号是什么意思

没事儿就去看看vue模板的代码,里面都有,这是webpack的路径别名,相关定义在这里:

resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue',会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

关注 6 回答 2

zslzz 回答了问题 · 2018-07-09

Tomcat 部署应用失败,访问404

看起来像版本不对
建议检查下 spring 、tomcat、jdk的适配版本

关注 3 回答 3

zslzz 赞了文章 · 2018-06-21

github上值得关注的前端项目

http://microjs.com/#

该网站的资源都托管到了githubmicrojs.com是一个可以让你选择微型的js类库的网站,该网站里的js库都是压缩后不大于5KB的,非常实用

图片描述

https://plainjs.com/(10.22更新)

The Vanilla JavaScript Repository,该仓库都是用原生js写的插件和组件,很实用。里面的项目也都托管到了github

图片描述

综合/资源


  • front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。star:860



  • f2e-hub 包含Animation,UI,dialog,Carousels,color,image,workflow等。star:100



  • fks 前端技能汇总,包含前端知识架构,后端知识,linux,书籍推荐等。star:4000


  • node123node.js中文资料导航。star:1200



    • Front-end-tutorial 最全的资源教程-前端涉及的所有知识体系。(12.25更新)

    样式/UI/css

    • Semantic-UI 让你使用任何HTML标签 来表现UI控件。

    这是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。star:17500

    图片描述

    • primerCSS风格指南。star:3600


    • glue 一个生成CSS sprites的简单的命令行工具。star:2.5K (7.19更新)


    • postcss 用js插件来对css进行转换,类似Sass的预编译器,但实现了模块化,并且更加强大。star:4.5K(7.31更新)



    • mui 轻量级css框架。star:1.5K(10.15更新)
    • img2css 将图片转为纯css的黑科技。star:1.5K(12.25更新)

    测试/工具

    • mocha 一个简单、灵活有趣的 JavaScript 测试框架,用于 Node.js 和浏览器上的 JavaScript 应用测试。 star:6680

    687474703a2f2f662e636c2e6c792f6974656d732f336c316b306e32413155334d3149314c323130702f53637265656e25323053686f74253230323031322d30322d32342532306174253230322e32312e3433253230504d2e706e67

    • csscss css代码冗余分析仪,用于分析冗余 。star:2800


    • es6-toolses6 工具集,包括Grunt Tasks,Gulp Plugins,Broccoli Plugins,Brunch Plugins,Webpack plugins等等。star:1860


    • async 一个工具模块,提供了直接而强大的 JavaScript 异步功能。虽然是为 Node.js 设计的,但是它也可以直接在浏览器中使用。star:13000


    • simditor 团队协作工具 Tower 使用的富文本编辑器。star:1300


    • HTMLHintHTML 静态代码分析工具,可以集成到IDE环境或编译系统中。star:900


    • jshintjs静态代码分析工具,可以帮你检测js语法错误和潜在的问题。star:5100


    • csslint 分析和优化你的CSS样式表的工具。由[Nicholas C.
      Zakas][30]所写。star:2700


    • protractor 一款端对端的angular apps 测试框架。star:4K


    • casperjs 一个基于PhantomJS的开源导航脚本和测试工具。star:4.8K


    • Karma 自动化完成单元测试,允许你在多个浏览器里执行js代码。让你的TDD变得简单,快速,有趣。star:5.3K


    • jasmine 是一个简易的JS单元测试框架, 用来测试Javascript代码。star:9.1K(6.28更新)


    • chai 一个针对 Node.js 和浏览器的TDD(测试驱动开发)/BDD(行为驱动开发)的断言框架,可与任何 JavaScript 测试框架集成。star:2K(6.29更新)


    • Qunit 一个很容易使用的js单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件。star:3.3K(6.29更新)

    Workflow/构建工具

    • Grunt 基于Node.js的项目构建工具。拥有数量庞大的插件,是一款优秀的前端自动化工具。star:9500


    • yeoman 一个强健的工具,库,及工作流程的组合。star:960


    • gulp 基于node.js流的新一代前端构建系统。star:14000


    • spmCMD 的包管理工具,需要和 Sea.js 配合使用。

    canvas/数据可视化

    • echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。star:6900


    • Chart.js 使用<canvas>标签的简易HTML5图表。star:14600


    • sketch.js 跨平台JavaScript创意编码框架,gzip压缩后仅有2kb。star:1500


    • d3 一个基于数据操作文档的js数据可视化框架,最流行的可视化库之一。star:38000


    • zrender 一个轻量级的Canvas类库,MVC封装,数据驱动,提供类DOM事件模型,让canvas绘图大不同!star:850


    • c3 一个基于 D3.js 的可重用 JavaScript 图表库。几乎零学习曲线。star:4.5K(6.28更新)


    • img2css 将图片转为纯css代码。(11.3更新)

    模块管理/加载器

    • ESL 是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。

    ESL vs RequireJS

    体积更小 (Smaller)
    性能更高 (Higher performance)
    更健壮 (More Robustness)
    不支持在非浏览器端使用 (Browser only)
    依赖模块用时定义 (Lazy define)
    
    • seajs 一个遵循CommonJS规范的JavaScript模块加载器。提供简单、极致的模块化开发体验。star:4100


    • Component 一个模块化的JavaScript框架,同时也是面向前端的包管理器。


    • webpack一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。star:9K

    动画

    • animate.css 一个跨浏览器的CSS动画库。简单易用易上手。star:23000


    • move.js 极小的 JavaScript 库,支持 CSS3 的动画效果,非常简单优雅。star:2600


    • TweenJS 是一个简单但强大的 Javascript 动画库。CreateJS 套件的一部分。star:1500


    • bounce.js 一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript
      库,使用其特有的方式生成的动画效果。star:3600


    • Swipe 号称最精确的Slider触摸库,专为移动设备优化。star:4.7K


    • tween.js 一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。star:2.5K(7.15更新)


    • parallax.js轻量级的的视差引擎,能对智能设备的方向作出反应。。star:9K (10.17更新)
    • Velocity 是一款和jQuery的$.animate()有相同API的动画引擎。很适合移动端的动画开发,还打包了颜色动画,转换,循环,easing效果,类动画、滚动等功能。star:9.5K(12月25更新)

    插件



    • onepage-scroll 可以轻松建立一个动感的响应式的滚动效果页面,比较适用于单页面的专题站。支持现代浏览器和IE8以上版本。View demostar:7700


    • slick 一款完全响应式的 jQuery 图片滚动插件,能够根据容器自动适应宽度。star:10000view demo


    • superslides 致力于解决网站大部分特效展示问题。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决! view demostar:1100



    • slider 一个jquery完全开源的JavaScript代码库,用户可以开发,调试和深度定制自己的滑块。star:850view demo


    • github-hovercard github 鼠标悬停显示用户,仓库等摘要信息。(10.15更新)


    • onepage-scroll 一款带有背景视觉差效果的jQuery整页滚动特效插件。star:8K (10.17更新)view demo


    • justlazy.js 轻量级js图片延迟加载插件。(10.22更新)
  • 框架、库和组件

    • polymerweb组件构建框架。一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。 star:9900


    • impress.js 创建令人兴奋的演示。使用CSS3的转换和过渡,这个库允许你创建令人印象深刻的演示文稿。view demostar:24300


    • ionic 先进的HTML5 移动端开发框架。帮助开发者使用HTML5, CSS3和js做出不可思议的hybrid appstar:17000


    • reveal.js 基于CSS3的3D幻灯片工具。能够制作绚丽的演示文稿并生成HTML格式,将它发布到web上。star:21500view demo


    • pure.css 一组很小的,响应式的css组件,你可以在网页的项目上到处使用。star:12000


    • three.jsJavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。star:20000



    • jquery-pjaxajaxpushState的封装,让你可以很方便的使用pushState技术,用以实现页面无刷新加载。star:11500


    • highlight.jsjavascript语法高亮。既可以运行在浏览器端也可以运行在服务端。star:5500



    • togetherjsMozilla打造的一款可以给网站添加实时协作功能的JavaScript库。star:5K



    • MEAN.JS 全栈式javascript,使用`MongoDB, Express,
      AngularJSNode.jsstar:2.2K`


    • wechat.js 微信相关的 js 操作:分享、网络、菜单。star:700



    • progress.js 一个 jsCSS3的库,帮助开发人员为网页上的每个对象创建和管理进度条效果。star:1.6Kview demo


    • foundation 号称世界上最先进的响应式前端框架,也是一款Mobile First的框架。star:21K


    • Sugar 一个JavaScript库。它扩展了现有的JS对象的方法,让你可以用更少的代码做更多的事情。star:2.8K


    • todomvc 帮你挑选一款MV*框架,它使用不同的最流行的js MV*框架实现了一个相同的Todo应用。star:13K


    • yepnope.js 这是一个异步的条件加载框架,速度超快,只为用户加载需要的脚本。使用非常简单,非常有用!star:2.5K


    • Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React
      组件。star:8.8K(6.28更新)


    • Pikaday 是一个 JavaScript 日期选择器,特点是轻量级、无依赖和模块化的
      CSSstar:2.8K [view demo]104

    图片描述

    • vuejs 用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。star:6K(7.12更新)


    • meteor 超简单的,数据库无处不在的,用于自动化和简化实时运行的 Web 应用程序的开发。纯JavaScript的Web框架。star:27K(7.12更新)


    • webuploader
      一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。支持大文件分片并发上传,极大的提高了文件上传效率。star:1.8K


    • fastclick触摸UI上的消除点击延迟js库。star:1W(10.15更新)


    • wangEditor 轻量级web富文本框。 (10.15更新)


    • benchmark.js是强大的基准测试库,几乎适用于所有JavaScript平台。支持high-resolution定时器,并返回重要的统计结果。star:1.7k(10.15更新)


    • headroom.js是一个轻量级、纯 JS 组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间。star:7.5K (10.15更新)


    移动端

    • Swipe 加速移动触摸滑块与硬件之间的转换。star:5000


    • hammer.js 一个支持多点触摸的手势库。star:11000


    • amDoc 无线Web解决方案 - 文档规范指南


    • amazeui 移动优先的跨屏前端框架。面向HTML5开发,使用css3做动画和交互。star:4.1K


    • Zepto 一款面向移动端设备、APIjQuery兼容的基础库。


    • mui 最接近原生APP体验的高性能框架 。star:1.1K(6.28更新)


    • Swiperjavascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。star:6K(10月18更新)


    • SUI-Mobile由阿里巴巴国际UED前端出品的移动端UI库,轻量精美 star:2K(2016.1.14更新)


    • lib-flexible 淘宝出品的移动端可伸缩布局方案。star:1.3K+(2016.1.14更新)

    Node.js相关

    http://nodeframework.com/ 专门收集node.jsweb框架的网站。其项目同样均托管在github上。
    图片描述

    • nodeclub 使用 Node.jsMongoDB 开发的社区系统。star:3000


    • N-chat 使用 Express + Socket.IO 搭建的多人聊天室 。star:300


    • N-blog 使用 Express + MongoDB 搭建多人博客。star:1800


    • node-inspector 基于Blink开发者工具的Node.js调试器。star:7000



    • nodePPT 使用nodejs写的网络幻灯片。可能是迄今为止最好的网页版PPTstar:1.6Kview demo


    • hexo 一款快捷,简单,强大的博客框架,基于Nodejsstar:5.2K


    • koa 下一代Node.js Web 框架。由 Express 团队设计。star:6.3K



    • connectNode平台的中间件框架。Express就是基于Connect开发的。star:5.6K(6.29更新)


    • n node版本管理,tj大神所写。star:2.7K


    • nvm node版本管理,通过bash脚本来管理。star:7.5K
    • nodemon这个库是专门调试时候使用的,它会自动检测 node.js 代码的改动,然后帮你自动重启应用。star:7K+。(2.24.16)
    • supertestAPI使用流利的API测试node.js http 服务器。3.1K+

    React相关



    • react-native 一个用React构建native apps的框架。star:15000



    • awesome-react 关于react的工具,资源,视频的集合。star:700


    • Flux 是一个Facebook开发的、利用单向数据流实现的应用架构,用于
      ReactFlux应用有三个主要的部分组成:调度程序、存储和视图(React 组件)。star:6.8K(6.28更新)
    • iscroll 高性能,体积小,无外部依赖,跨平台的滚动组件 star:6K(7.19更新)
    • react-tappable Tappable component for React.(2016,1.4更新)
    • react-native-lessonreact-native入门指南.star:1.3K(2016,1.4更新)

    HTML5

    • html5-boilerplate 一套专业的前端模版,主要用于开发快速、健壮、适应性强的app或网站。star:27K (12.25更新)
    • BrowserquestMozilla开发的HTML5多人在线游戏。star:5200
    • video.js 开源的HTML5和Flash视频播放器。支持自定义进度条、按钮以及工具栏的底色。star:9.1K


    • html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:6K(7.15更新)


    • brunch 快速的前端 HTML5 构建工具。star:4.5K(7.19更新)


    • ulkit 一个轻量级的、模块化前端框架,它被用于快速开发强大的web界面。也是一款优秀的响应式HTML5 框架。star:5.3K (8.3更新)

    模板引擎

    • Handlebars.js 一个js语义模板库,能让你轻松高效的编写语义化模板。star:8.6K(6.29 update)


    • artTemplate 性能卓越的 js 模板引擎。star:1.7K


    • jade 一款高性能简洁易懂的模板引擎,JadeHamlJavascript实现。star:8.7K
    • ejs tj大神写的嵌入javascript的模板引擎,主要用于Node

    浏览器兼容方案

    • es6-shim 提供兼容性垫片,使ES6能兼容于传统的JavaScript引擎。star:1.5K(7.15更新)


    • Modernizr 用来检测浏览器功能支持情况的JavaScript库,可以检测18项CSS3功能以及40多项关于HTML5的功能。star:16000


    • normalize.css 一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准。支持IE8+。star:17000


    • html5shiv 主要解决HTML5提出的新的元素不被IE6-9识别。star:6K(7.15更新)



    • Babel 是一款为了写下一代js的编译器,无需等待浏览器支持就可以使用新的语法。star:8.3K (7.29更新)

    高产大牛

    • Evan You 前端轻量级框架MVVM框架vue.js作者,前Google工程师。followers:1.6K


    • TJ Holowaychuk Luna 编程语言, Koa, Express, Stylus, Cluster, Mocha, Jade, node-canvas, component 等知名开源项目的创建和贡献者。 followers:14.1K


    • PaulIrish 著名的前端开发工程师,同时他也是Chrome开发者关系团队成员,jQuery团队成员,Modernizr、Yeoman、CSS3 PleaseHTML5 Boilerplatelead developerfollowers:15.7K


    • Mike Bostock 知名可视化库 D3.js的主要作者。followers:8.3K



    • 司徒正美 前端迷你MVVM框架Avalon作者。followers:2.1K

    其他


    • Mars 腾讯移动Web前端知识库。star:1600


    • brackets 一款使用 HTML,CSS,JavaScript 创建的开源的针对 Web 开发的编辑器。star:23000


    • GhostNode.js开发最新博客系统, 简单简洁, 响应式设计, 支持完全自定义, 免费, 专注博客。star:16000


    • io.jsNodeJS里分离出来的一条分支。star:13000



    • ueditor 百度前端团队出品的富本文编辑器。star:1.1K

    优秀开源组织

    PS:文章在github更新,本篇文章停止更新

    查看原文

    赞 377 收藏 1820 评论 26

    zslzz 回答了问题 · 2018-06-12

    解决vue项目中,https上无法引用http的资源

    嗯,其实最终的解决也很简单,引用第三方资源本质上还是http请求,我用自己的后台转发一次,这样就解决了

    关注 1 回答 1

    认证与成就

    • 获得 4 次点赞
    • 获得 5 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 5 枚铜徽章

    擅长技能
    编辑

    (゚∀゚ )
    暂时没有

    开源项目 & 著作
    编辑

    (゚∀゚ )
    暂时没有

    注册于 2017-10-23
    个人主页被 418 人浏览