0

用JQuery仿造QQ头像裁剪功能

最近工作真心忙碌,几乎没时间写博客。今天趁有时间来仿一个QQ头像裁剪功能插件,效果如下:原理:主要是通过css的clip来裁剪图片可视区域,拖动剪裁窗口这里使用了JQ-UI的draggable插件(但是缩放没有,贪方便可以使用Resizable插件,但都用插件的话就没有研究的意义了)。缩放功能原理其实很简单,不外乎获取剪裁框的offset()或position(),以及各容器宽高、鼠标位置,然后做个大杂侩计算。只能说咱做前端的必须要认真耐心地去做计算,虽然过程颇为麻烦,但绝对不是“做不出来”。有的朋友在做某些功能前,可能会因为需要涉及较麻烦的计算就放弃,这是不靠谱的做法。P.S.:像效果图中会...

阅读全文>>

0

使用VUE一年后

从去年年底开始接触VUE,到现在已经整整一年了。这也是我接触的第一个MVVM的框架。在这之前,我也是长期执迷于JQ大法,在项目中尝试过一些常见的UI框架:MiniUI 这是一个很好用的框架,可惜收费较贵,排除这一点,肯定是JQ时代的首选EasyUI 用过一次,复杂的API设计让我败下阵来Bootstrap 上手快,文档详细,但交互上太弱LayUI 近几年新出来的框架,功能丰富,接口简洁,很值得一试在用JQ的时候,一些功能实在难以找到适合项目,或者说是适合自己的,就自己造轮子,比如TinySelect 一个下拉选择组件,用以代替系统的 select 标签TinyForm 一个表单工具,用以读写以...

阅读全文>>

0

浏览器的底层是如何完成一次网络请求的?

对于面试的大部分前端开发者来说,对浏览器的了解也算是一知半解,因为我们一开始前端觉得,我们开发中通常使用浏览器来显示和调试页面用的,不会涉入到太过的相关浏览器工作原理知识。这你就大错特错了,虽然浏览器默默的为我们工作,但是有关浏览器的工作原理不但在你就业前端面试中属于重中之重,也是在前端优化中占有很大比重。作为一个前端开发如果不了解浏览器的工作原理,只能永远停留在前端“切图仔”水平。PS:前几天还有个读者和小鹿说,之前看到小鹿朋友圈发过这个这个导图,当时没当回事,第二天面试竟然问到了。学习浏览器工作原理是为了能够运用到实际项目中,比如前端的性能优化以及错误排查,都会涉及到浏览器相关的知识,所以...

阅读全文>>

0

axios 核心源码实现原理

1. Interceptors 拦截器axios 官网中对 Interceptors 的使用方法如下: 用户可以通过 then 方法为请求添加回调,而拦截器中的回调将在 then 中的回调之前执行:// Add a request interceptoraxios.interceptors.request.use(function (config) { // Do something before request is sent return config;}, function (error) { // Do something with request error return Promi...

阅读全文>>

0

每个开发人员都应该知道的11个控制台命令

这些控制台命令可提高日常工作效率Photo by Sai Kiran Anagani on Unsplash命令行使我们的生活变得更加轻松,因为我们可以自动化一些平凡的任务并使事情运行更顺畅。 无需单击图形用户界面(GUI),我们可以触发一些命令并将其称为完成工作。Unix shell是命令行解释器或shell,可为类似Unix的操作系统提供命令行用户界面。 Shell程序既是交互式命令语言又是脚本语言,并且操作系统使用它来控制系统的执行。默认情况下,每个基于Linux或Mac的操作系统都安装了一个命令行程序,通常以" Terminal"为名称。命令行(CLI)使我们可以轻松地移动和重命名文件...

阅读全文>>

0

Proxy error: Could not proxy request /user/login from localhost:9529 to http://127.0.0.1:9528/mock.

vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。 GitHub上的下载地址为: https://github.com/PanJiaChen/vue-element-admin 在本地调试时,发现无法登录。提示错误: Proxy error: Could not proxy request /user/login from loca...

阅读全文>>

0

Github上发现的一个有意思的项目,Vuejs版本的开心消消乐

介绍笔者在浏览Github时发现一个有趣的项目,因为最近在学习Vue,在Vue板块中发现了这样的一个项目,觉得比较还比较有意思,因此在本文中分享给大家,共同学习和进步!本文内容来源于Github!Githubhttps://github.com/lcs1998/HappyEliminate效果展示游戏规则:初始时会给玩家十分的初始分,每拖动一次就减一分,每消除一个方块就加一分,直到最后分数为0游戏结束任意两个方块都可以拖动界面设计页面的布局比较简单,格子的数据是一个二维数组的形式。<div v-for="(item, index) in squareData" :key="index" ...

阅读全文>>

0

是时候拯救我的 HTML 技术了

和 JavaScript、CSS 相比,HTML 经过三十多年的发展,似乎逐渐走进无人问津的角落,如何才能让 HTML 再次回到人们视野的中心。作者 | Yaser Adel Mehraban译者 | 谭开朗,责编 | 屠敏出品 | CSDN(ID:CSDNnews)以下为译文:有多少次,身为开发者的你编写了一个HTML块而没有意识到可能编码得并不理想?为什么HTML一直处于无人问津的角落,因为JavaScript和CSS总是吸引人们的注意力。请在脑海里先保留这种印象,因为我要用一些简单的技巧来发挥作用,让HTML再次回到人们视野的中心。以下是创建一目了然、可维护和可扩展的代码的一些方法,其很...

阅读全文>>

0

web常见的五种前端布局方式

web大前端布局 常用的布局 常用的布局一般分为一下几大类: 文档布局(text) 文档流本质是 nomal flow (普通流、常规流) 元素在文档中的特点 块级元素,和内联元素。 块级元素:是自带有这行效果,在文档中独占一行的效果,块状元素会自上而下的排列且在默认宽度是父元素的100%而高度默认被内容撑开。 内联元素:内联元素在文档流中只占自身的大小,会默认从左向右排列,如果一行中不足以容纳所有的内联元素,则换到下一行,继续自左向右。在文档流中,内联元素的宽度和高度默认都被内容撑开。 什么是文档流(文档布局...

阅读全文>>

0

放下Axios,手写纯原生Ajax通信接口

前言axios作为vue框架中最常用的ajax工具包之一,可以与后台API接口进行通信,传送或接收数据,在前后端分离开发中,发挥了通信桥梁的重要作用。虽然像axios这样的第三方工具包很好用,但是这类工具包并不能很好地帮助前段开发人员,尤其是新人理解JavaScript原生的ajax通信机制。因此,本文将通过JS原生的ajax通信实例,为读者详细介绍原生ajax通信机制和使用方法。关于Ajax1999年,微软公司发布 IE 浏览器5.0版,第一次引入新功能:允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意,直到2004年 Gmail 发布和2005年 G...

阅读全文>>