基于Vue.js的SSR方案之Nuxt.js

前端技术真是分分合合、合合分分,从前些年HTML、CSS、JavaScript混写到模块化的CommonJS、AMD、CMD,模块多了影响加载,又有了grunt、gulp、webpack等打包工具,最后发展到现在类似Vue的单文件组件,表面来看,似乎更爽了,但这样的模块化还是要靠写的人来把控了,稍有不慎,团队还真有人把.vue玩成当年的.html。

今天要说的是最近了解的一款基于Vue.js的SSR框架——Nuxt.js,用过react.js的童鞋可能都或多或少接触过Next.js,没错,这玩意和它是做同一件事的,正如前面所说,分分合合、合合分分,前后端分离好不容易在国内实施得火热起来,可百度并不怎么认你的单页App,且盲目使用之余,很多App文件过于庞大,以至于按需加载后首页渲染性能还是不理想,面对这样的问题,有SEO需求、对首屏渲染有提升要求的技术小伙伴们又在前端的小圈子里划分出了服务端,也因此有了传统型的express、koa、adonisJS等,但这并不能阻止我们前进的脚步,回到现实,当前火热的react.js、angularjs、vue.js都有了服务器端渲染方案,于是因为工作用vue.js的缘故,接触了Nuxt.js。 查看更多...

前端跨域问题及解决方案

对于绝大多数B/S系统开发者来说,"跨域"并不是什么陌生的词汇,但也往往因为熟悉而忽略其本质。众所周知,Web浏览器往往是不安全的,出于安全考虑,Netscape公司1995年在浏览器中引入同源策略(same-origin policy),目的是为了保证用户信息的安全,防止恶意的网站窃取数据。目前,所有浏览器都实行这个政策,"跨域"问题也由此形成。

所谓同源,简单的讲,就是网址必须是同协议、同域名(主域、子域与不同子域都称为非同域名)、同端口,两个网址出现任一项不同则出现跨域。

受同源策略影响,出现跨域的情况,我们不能做以下三类事

1)不能操作cookie、LocalStorage(SessionStorage) 和 IndexDB
2)不能操作DOM
3)不能发送AJAX 请求

显然,同源策略影响的不止是"恶意网站",合理的用途也受到影响。下面将介绍如何规避上面三种限制。
查看更多...

IDEA系列64bit启动时Failed to create JVM…问题解决

大概2015年的时候,写过一篇名为《合理使用Intellij Idea,提高开发效率,避免内存溢出》的博文,简单介绍了自己在使用idea过程中解决操作界面卡顿等性能问题的方法。意外的是,近一年来百度来路每天都有二三十个搜idea内存优化找到上面提到的文章,可能国内最近使用idea的用户越来越多了吧。

个人猜测,可能是因为当时版本的idea系列安装时并不会提示用户该软件有64bit的入口,而且安装后的快捷方式默认都是32bit,所以大部分用户都是直接使用32bit做开发,而且很多用户怨声载道。而近一年的版本已经做了改进,如果系统是64bit,默认有复选框提示生成32bit、64bit的快捷方式,这样一来,稍微有点计算机基础的用户,可能都会选择使用64bit作为入口了。

随之而来的,可能是对于内存的调优,但稍有不慎,可能出现Failed to create JVM:error code -1。

网上大部分介绍是说没有配置JAVA_HOME,当然如果是非idea用户,真有可能忽略了此步骤,但如果本身就是Java开发人员,基本可以忽略这个可能性(当然是在自己确认无误的情况下)。接下来遇到这样的问题,就不能看错误提示表象了,可能是改了配置,配置参数不对或者内存不够,因为初始化最大内存750,作为开发人员,基本也可以忽略这个了。所以,只有一种情况,配置不对。

最新版的配置参数有所缩减,移除了-XX:MaxPermSize等配置项,基本如下(64bit) 查看更多...

Android系统Web字体/行高异常解决

相信做前端开发的朋友很多时候会遇到这样的问题,设置行高来达到文本垂直居中的目的,但移动端会遇到略偏上或者偏下,通常情况下轻微的偏移可能出现于设备像素密度、容器高度、字体大小等原因,比如30px容器内放15px文字,就做不到完全居中,这个不在今天问题范围,不再赘述。

今天的问题其实算是旧事重提,遇到这个问题,最初是在2015年了,当时团队其他同事做混合app有类似问题,同事最终似乎是采用padding的形式取代了行高,但实际上这个还会引起一些问题,主要是Android系统设置字体后,WebView内字体大小深圳和字体相关的属性都受到影响。

在去年4月份曾写过一篇文章《QQ内置浏览器下网页行高、字体大小显示异常解决》,但是当时只注意到Android系统下手机QQ内嵌的浏览器,直至后期做自己的Android App使用WebView内嵌网页,也发现了同样的问题,经过翻阅网上资料案例,发现近期挺多类似文章和提问,主要原因是Android系统多使用sp作为单位,会根据用户设置缩放字体。

常规的解决方法主要有以下两种 查看更多...

工作五年第一次,我失业了

公司也算是一个神奇的存在了,每次都悄无声息,第二天突然说要裁员。

我所经历的第一次是去年11月初,加班到晚上11点多发布版本后,第二天一早,研发团队砍掉一半。倒是把我留下了,当时心灰意冷,已不想再待下去,但因为一时没找到合适的坑,还是继续留下来,做着时有时无的新需求,半年后的今天,我们都要走人了,研发部剩下两个兄弟维护,其余的都撤了。

至此,我失业了!

谨以此文警示那些想去创业公司、已经去了创业公司的朋友们,互联网泡沫已破灭,且行且珍惜!

顺带提一句,有需要人的可以联系我哦,坐标深圳,五年经验,三年Java前后端,两年前端,联系方式见关于页。

异步输出网页列表查看详情后返回定位

最近有个需求,移动端网站,列表上拉加载,点击详情后返回,每次都固定返回到顶部,感觉这样不够人性化,希望固定到进列表前的页面,于是简单实现了一下。

这里有两个问题

1、数据都是异步的

2、只有返回的时候定位(刷新正常回顶部)

简单的实现思路及主要代码

为了方便二次加载,异步数据每次缓存到本地,同时拦截页面所有链接,在即将跳转的时候记录当前页面或者滚动元素的scrollTop值,下次进页面判断是否返回进来的,如果是直接进来或者刷新,则重新请求,如果为返回,则直接使用已缓存数据迅速加载后使用已缓存的scrollTop值定位到进详情页之前的位置,同时清除值,即scrollTop值的缓存仅一次有效。 查看更多...

Android优化之SparseArray替代HashMap

Java开发过程中,一般免不了使用HashMap来存储键值对以方便各种需求的实现,但是对于Android这种对内存非常敏感的移动平台,很多时候使用一些Java的API并不能达到更好的性能,相反反而更消耗内存,所以针对Android这种移动平台,也推出了更符合自己的API,比如SparseArray、ArrayMap用来代替HashMap在有些情况下能带来更好的性能提升。

对于SparseArray,比HashMap更省内存,在某些条件下性能更好,主要是因为它避免了对key的自动装箱(int转为Integer类型等),它内部则是通过两个数组来进行数据存储的,一个存储key,另外一个存储value,为了优化性能,它内部对数据还采取了压缩的方式来表示稀疏数组的数据,同时,还实现了SparseIntArray、SparseLongArray、SparseBooleanArray。 查看更多...

为你的Express应用增加CSRF防护

CSRF(Cross-site request forgery)跨站请求伪造,也被称为"One Click Attack"或者Session Riding,通常缩写为CSRF或者XSRF,是一种对网站的恶意利用。尽管听起来像跨站脚本(XSS),但它与XSS非常不同,XSS利用站点内的信任用户,而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。与XSS攻击相比,CSRF攻击往往不大流行(因此对其进行防范的资源也相当稀少)和难以防范,所以被认为比XSS更具危险性。

众所周知,Web系统并没有绝对的安全,就比如我们公司年前遇到的情况,有些恶心网站通过网络抓包等手段,截取验证码发送接口,通过伪造请求实现了传入任意手机号并发送验证码的功能,虽然这看起来并没有什么用,但当这些不法分子拔了成百上千个接口后,就形成了一个疯狂的短信轰炸机,对于服务提供者,这些地下网站只要有人使用,就会不断得消耗短信费用,给企业带来不必要的损失。 查看更多...

Android WebView内嵌网页input无法选择文件解决

最近发现公司APP内嵌的网页点击上传图片没任何效果,查资料得知是Android安全限制,WebView内网页默认没有读取本地文件的权限。虽然网上有解决方案,但是由于Android版本几经波折,API签名大相径庭,想要完全兼容,要实现多个方法,为方便以后使用,简单记录一下。

首先,在使用WebView的页面,增加如下全局变量,方便回调使用:
查看更多...

Android软键盘遮挡输入框问题解决

移动APP、网站有界面底部存在输入框的情况,无论是原生还是WebView内嵌,在软键盘弹出时,经常会有遮挡输入框的问题,解决方法就是让软键盘弹出时窗口自适应,而非软键盘直接悬浮,网上看到有三种解决方案:

1、在你的activity中的oncreate中setContentView之前加上如下代码

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE | WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);

2、在项目的AndroidManifest.xml文件中界面对应的Activity里加入android:windowSoftInputMode="stateVisible|adjustResize",这样会让屏幕整体上移。如果加上的是android:windowSoftInputMode="adjustPan"这样键盘就会覆盖屏幕。 查看更多...