前端农民工

前段时间在服务器上安装了docker,同时也在docker里面部署了一个jenkins容器，由于我的服务器在刚买的时候已经装好了lnmp环境，所以我就没有在docker里面部署nginx服务器了，本次实践就是直接修改nignx配置，网站的根目录直接使用vue项目打包后的dist目录，当然如果后期要继续玩jenkins自动化部署以及灾备相关实践的话，我估计还会得在docker里面部署一个nignx容器，这个后面再说。这篇博客我先简单说说如何自动化部署托管在github上的vue项目。

今天搭上支付宝小程序扶持计划的末班车，以个人开发者身份获得一台2vCPU+4Gib的云服务器免费使用两个月和一个com域名免费使用一年。不想浪费这台服务器资源，所以我想在上面安装一些个人时间和项目管理工具，今天创建好服务器实例后，首先就给它装上了一个gitlab服务器，接下来简单说说安装的过程。

右键复制下载链接

刚刚安装好Docker，现在接着安装自动化部署工具Jenkins。

拉取docker jenkins镜像

$ docker pull jenkins:latest

查看内核版本

$ uname -r

Docker要求Centos系统的内核版本要高于3.10才能安装，通过 uname -r命令可以查看你的服务器的内核版本。

更新yum

$ sudo yum update

为了提升网站的用户体验，我们通常会给网站的右下角添加一个回到顶部的按钮，最近工作中在忙的移动端网站就有很长的列表页面，如果不给页面加个回到顶部的按钮，用户肯定会抓狂。这个组件的实现思路也比较简单，核心是监听window的scroll事件，在页面滚动的过程中获取”window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop”值，并将这个值跟一个临界值比较，返回一个布尔值，再将这个布尔值赋值给组件的一个watch属性”showTop”来动态控制回到顶部按钮是否显示。最终效果如下：

今天测试同学给我提了个bug,就是在一个商品信息的卡片中，有个字段是显示商品的上新时间，后端返回给前端是一个这样格式的字符串：”2019-01-07 23:46:50”，前端从里面提取时和分，因为这个字符串可以直接转成一个Date对象，所以二话不说就new一个对象：

new Date('2019-01-07 23:46:50')

然后分别使用getHours()和getMinutes()方法获取到时和分，并渲染到页面上。

最近开始忙一个新需求，就是给公司的电商网站接入微信第三方登录，由于之前的工作中很少接触微信公众平台这一块的开发，所以在开发之前做了比较多的准备工作，查阅微信公众平台开发者文档和相关资料，然后我也试着用PHP做后端简单实现一下这个功能，由于个人订阅号没有获取OpenId和用户基本信息的权限，所以我申请了一个公众平台测试账号来进行开发。

现在我们在开发项目的时候通常都是多人合作一起开发，所以保持代码的风格一致很重要，在前端团队中，一般都是遵循eslint规则进行代码的编写。下面以配置Vue项目为例，简单介绍下如何使用vscode自动帮我们对代码进行格式化。

今天上班写页面的时候，遇到有个需求是做一个可以横向滑动的菜单，类似于小程序里面的scroll-view组件。当然，如果只是简单的使用overflow-y:scroll去实现横向滑动菜单的话，体验不怎么好，因为在左右滑动的时候，总会有一种卡顿不流畅的感觉，为了改善这种状况，我决定引入一个滴滴前端团队的某位成员开源的滚动插件：better-scroll，不过这个插件使用比较多的场景还是在竖直方向的下拉列表里面，但今天我借助它来制作横向滑动的菜单，两种场景在使用上其实差不多，区别仅仅是横向滚动的场景中需要我们手动计算一下所有item的宽度之和，然后把总宽度赋值给它们的父容器，先看看最终的效果：