Vue-Core-Image-Upload 一款Vue轻量级的图片裁剪上传插件

[项目地址](https://github.com/Vanthink-UED/vue-core-image-upload) 最近把jquery.core.image.upload迁到了vue的版本。当然Angular的版本还在写。 改的过程中，有的时候还在纠结要不要写个状态去维护对一些值的操作。后来到测试的时候才发现，各有优势吧。Vue目前交给了移动组的同事再弄，自己只参与了这次插件的改写，毕竟jQuery版本是自己维护的。有趣的是，发现代码量相对jquery少了很多，比如移动和拖拽，以前是依赖jquery.ui新的版本完全脱离这些，但是目前还是将其独立封装成一了一个类，但是写法还并非Vue的写法,因此后期可能还会有些变动吧。参数这些没有太多变化，还是和jquery的那个版本的功能保持一致。当然目前测试还没有添加进去。需要后面更新。 使用 npm i vue-core-image-upload --save Code Example (ES6) import VueCoreImageUpload from './vue.core.image.upload.vue'; new Vue({ el: '#app', components: { 'vue-core-image-upload': VueCoreImageUpload }, data: 详情 »

查看详情

实现类似Pinterest 的图片预加载功能

提起Pinterest，大家第一印象可能是图片社交网站，里面有很多用户上传的各式各样的图片。从前端设计出发的话，我们一定不会忘记我们曾经非常流行的瀑布流布局。但是今天，给大家简要分析上 Pinterest上另外一项非常值得借鉴图片加载细节。 看看下面的截图: 大家可以感觉到图片出来的时候预先绘制轮廓，重点是预制区域的颜色采用与图片较为相似的色彩值，当图片加载完全后，会有种渐入的效果。 效果体验 其中谷歌的图片搜索也用到了类似效果: 我们称之为这种效果为Color Placeholder [色彩预置]，当图片加载的时候，我们优先显示其所在容器的背景颜色（如同很多会显示一个加载的gif），由于受限于不同的图片和大小，因此相比与齐刷刷的加载gif，不同色块体验 可能 更好吧(至少Pinterest Google这么认为吧). 实现步骤 接下来我们进入正题，如何自己实现这样的动画加载效果(实现的方式肯定有很多的也欢迎大家提出更好的思路) 我们先定义下基本的html结构 <!--一个post当作一个单位--> <div class="post"> <div class="image-bg" style="background-color:#141646"> < 详情 »

查看详情

去掉单页应用中的可恶的'#' (hashbang)

随着谷歌开始支持对Ajax站点应用的抓去，那么Angular,Vue或者其他单页应用(SPA) 网站的seo将变得容易得多。但是 # hashbang 符号有着一定的限制。或者那些执着于伪静态url的追求的话，一定是想尽办法去掉这个符号。修改完成之后大家可以参考这个站点fadeit.dk 如何转换为静态路由以及开启html5 mode 前面的例子，大家可以明显看到url中失去了＃，我们看下angular中的代码吧: angular.module('main', []).config(['$locationProvider', function($locationProvider) { ... $locationProvider.html5Mode(true); ... }); 如果你使用的是Apache，则你需要添加重写规则的文件.htcaccess。 RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ 详情 »

查看详情

使用React Native制作圆形加载条

先放运行截图说明做什么吧， react-native-percentage-circle 项目地址 最近需求需要一个显示百分比的加载条。然而去搜索了很久，没能发现比较满意的组件，只好自己解决了。当然对于大多数前端而言，这个并不是特别难的，可能思路众多，然而面对React Native似乎就有点相形见绌了。解决这样的问题，我们还是得回归前端本身，看看有什么可以嫁接的方案没。 前端常规制作进度条方法 前端实现相对容易点，我们可以用canvas去绘制圆，也可以用SVG去绘制. 使用SVG <svg style="width:2.8rem" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 详情 »

[转]大型网站架构系列：负载均衡详解

原文地址: http://www.cnblogs.com/itfly8/p/5043435.html 作者 @ ITFLY8架构师之家 面对大量用户访问、高并发请求，海量数据，可以使用高性能的服务器、大型数据库，存储设备，高性能Web服务器，采用高效率的编程语言比如(Go,Scala)等，当单机容量达到极限时，我们需要考虑业务拆分和分布式部署，来解决大型网站访问量大，并发量高，海量数据的问题。 从单机网站到分布式网站，很重要的区别是业务拆分和分布式部署，将应用拆分后，部署到不同的机器上，实现大规模分布式系统。分布式和业务拆分解决了，从集中到分布的问题，但是每个部署的独立业务还存在单点的问题和访问统一入口问题，为解决单点故障，我们可以采取冗余的方式。将相同的应用部署到多台机器上。解决访问统一入口问题，我们可以在集群前面增加负载均衡设备，实现流量分发。 负载均衡（Load Balance），意思是将负载（工作任务，访问请求）进行平衡、分摊到多个操作单元（服务器，组件）上进行执行。是解决高性能，单点故障（高可用），扩展性（ 详情 »

React Native 升级遇到的问题纪录

最近由React Native 0.21升级到0.30。升级完后，宝宝的心情是： 升级需要谨慎。一打开，全是黄色弹窗。说说遇到的问题吧，当时没有截图，大概凭借记忆说些吧。 react 版本有问题，最好不要用依赖的，会提示关于样式stylesheet的一些报错，安装15.2.0就好。 网络的问题，需要在xcode中的info.plist修改 会提示一些属性的不支持，在下一版本中会放弃掉，建议不再适用。 在module引入的语法发生了变化，建议: import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; Component 的写法有了一些变化吧。 第三方的，去Gitub上看有没有新版本吧。老版本的有的不太支持。 详情 »

查看详情

前端独立技术博客推荐

从起初觉得搞技术拥有独立博客是标配，随着日积月累，觉得博客慢慢变成了一个坚持。无论什么内容，记录下来，有的写给自己有的写给他人。如同之前你搜索看到的是别人的影响力，随着积累，自己的影响力也就慢慢产生了。 推荐几个自己比较喜欢的博客，他们至少在最近一个季度都还在更新博客内容。 阮一峰博客 内容很丰富，而且搜索中文权重很高，而且也一直在原创坚持。 张鑫旭的个人博客 哈哈学前端的都知道他，非常高产，而且质量很高，乐于探索。 十年踪迹的博客 传说中的月影大大的博客，近期产量极高，质量都非常好，非常乐于探索，并且也会对前端工程师的职业成长以及团队管理写一些自己的心得。 JerryQu 的小站 屈屈的博客，好搜的负责人。写了很多技术原创文章，尤其最近关于http/http2的文章很值得大家学习，而且一直在坚持进行文章积累。 hax的技术部落格 Hax大大的博客，尤其对编程素养基础知识以及分析问题深度有所帮助。 当耐特的博客 当耐特，腾讯Aolly Team的核心，博客多涉及到一些非常酷炫的实现，以及关于Aolly team一些项目的文章。 Jenkov.com Jenkov的多为教程，国外的一位博主，搜索权重很高，写了很多教程，有Angular ,Svg,jQuery等。 Una Kravets' Blog 详情 »

查看详情

Node.js开启Https的小实践

最近自己的 https://www.jackzoo.org/ 切换到了 https。其实去年想把博客给迁移过去，但是太穷找了个免费的证书(可以去这里弄Let's Encrypt)，实际效果不是很好。 （可以访问 https://www.jackpu.com ）但是最近腾讯云推出了免费的ssl证书申请。楼主是亲测有效的。（我没有打广告） 申请成功后，你直接下载证书就可以用了。 配置nginx 在/etc/nginx/conf.d/下加入你的域名配置比如xxx.com.conf,内容如下 server { listen 80; listen 443 ssl; server_name www.xxx.com; ssl_certificate /etc/nginx/ssl/www.xxx.com_cert.crt; ssl_certificate_key 详情 »

查看详情

React Native 开发小Tips

相信好多写React Native的都是前端出身，当然遇见问题的，也很多时候会想从前端出发，但由于React Native本身的限制，并不是支持足够多的属性和样式，所以Bo主结合自己的开发实践,并总结了一些将来开发可能会遇见的问题并给出一些小的代码参考;(PS实现不好的希望能大家提出看法，自己也会更新)。 自己将代码放到了example下，并且做成了一个App.这样可以查看具体运行效果： 截图1: 截图2: 项目地址 开始 git clone https://github.com/JackPu/react-native-tips.git 进入example 目录 react-native start 用xcode打开ios目录下的项目，运行就可以看到上面的运行界面了。 1.关于按钮 写习惯了html我们看到按钮，第一时间想到的便是Button,但是目前React Native并没有这个组件，不过没关系，我们可以使用 TouchableHighlight,TouchableOpacity来实现按钮组件，当然常用的样式可以应用在上面，形成格式各样的按钮。 <TouchableHighlight onPress={this._onPressButton}> <Text>This is Button& 详情 »

查看详情

写给刚入门的前端工程师的前后端交互指南

作为刚接触前端的不久的童鞋，大家都会兴奋于CSS和JS所带来漂亮界面，然而，前端工程师除了UI重构外，还有非常重要的职责在正确的区域渲染出服务端的数据。毕竟，我们要构建一个大的web应用，必然不是普普通通的静态页面构成。 下文将罗列将来前端工程师应该必备的同后端打交道的常用技能。 服务端渲染 谈起服务端渲染，对于动态服务而言，这个世界上跑的大多数页面都经历过服务端的数据渲染，接口->前端赋值->模版渲染 。这一切都在服务器完成，我们查看源码时候，可以看到完整的html代码，包括每个数据值。 常用的php模版有，Smarty,Blade,Mustache,如果你们团队使用Smarty，我们可以看到一些view的文件里会前套Smarty的模版语言; <div> {foreach $list as $item} <h3>{$item['name']}</h3> <p>{$item['desc']}</p> {/foreach} </div> 如果Node, 详情 »