❗️你有0条未读消息

14/53,每周一篇博,坚持!

每周一篇博文的目标还是比较艰巨的,有时候时间比较紧张的时候根本来不及想主题。。

准备开一个系列,介绍下我收藏的那些小而美的JS开源库。这是第一篇,关于一个设计良好的美观实用PC、移动兼容良好的弹框库–notie

关于notie

众所周知,浏览器默认的弹框–alert是异常丑陋的,我们在业务中通常是不会直接使用alert来显示应用弹框消息的,一般都会重新设计应用自己的弹框来替代之。
notie就是一款用来替代alert的消息弹框库。

阅读全文 »

13/53,每周一篇博,坚持!

背景

Mysql一直是我的弱项之一,以前跟数据库打交道比较少,基本只限于基本的操作。现在专职做后端之后,跟数据库打交道的机会多了很多,Mysql这块也在有意识的补强。这篇博客就记录一下最近项目中使用到的CASE…WHEN的使用。

很多情况下,我们会用到映射结构,如将某个类型描述映射为某个数字,常见的如页面下拉框中通常我们会把文本赋值具体显示的值,把value赋值映射过的数字,如下代码所示:

1
2
3
4
5
6
<select name="status">
<option value="0">全部</option>
<option value="1">试运营</option>
<option value="2">运营中</option>
<option value="3">已退出</option>
</select>

我们在代码中拿到了相应的数字通常是使用Switch…Case结构来获取映射的状态值。而Mysql中的CASE…WHEN结构就是做类似的事情。

阅读全文 »

12/53,每周一篇博,坚持!

背景

我的工作性质是属于全栈的,也就是前后端都需要干的那种”全干工程师”。在阿里又会用到很多内部自研的框架,有的框架就不那么的好用。如工作中用到的这个前端框架,写的CSS文件不支持@import语法。。。这意味着,如果你想将不同页面间样式的公共部分抽取出来再@import的方式不可行,你只能不停的重复同样的样式代码,丑陋且不可维护。
好在框架支持less等CSS编译语言,而在less中写@import语句是没问题的。于是想到了一个可行的方式:项目维护less样式文件,抽取公共的部分,在需要的地方@import进来,唯一的问题就是需要将这些less文件编译成浏览器认识的CSS。我可不想每次自己来执行编译。

阅读全文 »

11/52,每周一篇博,坚持!

续上篇

前面几篇把如何搭建一个评论系统的后端描述了一下,这篇就主要讲一下如何把评论系统的前台搭起来。

第四部分 前端交互及页面UI的实现

前端不涉及应用,主要就是HTML、CSS、JS。
评论系统的前端部分主要包括:

  1. 评论框主体
  2. 用户登录
  3. 评论提交动作
  4. 消息提醒
  5. 评论信息的渲染
  6. 事件注册响应

主要是以上几个部分,还有一些细节部分。前端部分主要是仿造原来畅言的风格,具体的渲染方式,如HTML容器怎么放置,CSS样式怎么编写等细节,本篇就不再赘述,前端的实现“一千个人眼中有一千个哈姆雷特”,同样的效果可以有完全不同的实现方式。

阅读全文 »

10/52,每周一篇博,坚持!

续上篇

上一篇里我们主要讲了评论系统的后端应用搭建及主要评论接口的实现,这篇里继续讲一下后端应用里其他一些逻辑的实现,如评论提醒功能。
前端的交互逻辑和渲染放到下一篇里进行。

第三部分 后端应用的其他功能逻辑实现

为了给评论系统提供更好的体验,我们有必要给评论系统添加上消息提醒,这里存在两种场景:
一个是当有评论被回复时,评论者应该收到提醒消息,
二是若评论时选择了记住个人信息,那么在同一个人再次访问时如果有未读的评论消息应该在页面上显示出提醒框。

阅读全文 »

9/53,每周一篇博,坚持!

续上篇

上一篇我们主要讲了一下一个评论系统的基本设计思路和数据库的设计,这篇我们主要讲一下如何使用Node.js来构建评论系统所需要的后端服务。

第二部分 搭建后端应用

Express框架介绍

这里我们使用Node.js的Express框架来构建相应的后端应用,相应的准备工作大致包括Node.js环境的安装,npm的安装,MongoDB的安装等,不赘述。

首先我们需要安装Node下的Express框架:

1
npm i express-generator -d -g

上述命令为我们安装了Express框架的生成器,我们只需调用:

1
express comment

即可生成一个comment的Express框架工程的目录。
然后安装工程依赖:

1
2
cd comment
npm install

依赖安装完成后,该目录即已完成一个Express工程的初始化了,启动后就是一个WEB服务器了。

1
npm start

该命令在本地的3000端口启动了一个WEB服务器,可以通过访问:http://localhost:3000来测试下是否正常。

以上只是一个简单的Node.js下Express框架的介绍,详细可以查看官方文档

阅读全文 »

8/53,每周一篇博,坚持!

我的博客是建立在Hexo的基础上,了解Hexo的朋友应该都知道,Hexo是一种使用Node.js将markdown文件编译成HTML文件的纯静态博客系统。

因此整个博客网站你只需要有一个Web服务器即可,网站的所有内容都是基于HTML、CSS、JS三大件的。这样的好处就是轻量,博客作者也可以将注意力集中在写作上。尤其对于没有技术基础的博主来说,Hexo尤为友好便利:自己只要专注于写作,会点markdown语法就可以了。

但缺点也是同样明显的,正因为是静态博客,所有需要动态交互的地方,如数据持久化、评论、内容推荐、流量统计、分享等等静态博客就提供不了了,这也是所有静态网站的缺陷。Hexo在这方面就需要接入很多的第三方服务来进行补充。如博客的评论系统通常就是使用Disqus,多说,畅言等等。我的博客用过一阵子多说,2017年左右多说关闭切换到了畅言,可以查看我的博客网站大事记

阅读全文 »

7/53,每周一篇博,坚持!

续上篇

3. 沟通能力

有了表达能力的加持,你的沟通能力就可以在此基础上培养了。

沟通的目的,就是透过语言交流,最终让彼此的思想都能够达成一致共识,取得某些效果。例如你跟家人沟通,就是希望对方能够按照你的想法去做,又或者你希望透过沟通,能够解决到对方不开心这个问题。

也就是说,沟通不像闲聊,可以天南地北的任意胡侃,而是需要透过你的语言,跟交流对象一起寻求最适合彼此的解决方案。

看到朋友失恋,你跟她沟通,就是希望可以让对方振作起来;看到孩子不听话,你跟他沟通,就是希望还在能够安分守己一点;看到老板这么苛刻,你跟他沟通,就是希望员工能够获得更好的待遇。

一篇文章讲述沟通,基本上很困难。

但一个好的沟通,应该做到五个方面:

阅读全文 »

6/53,每周一篇博,坚持!

续上篇

2. 表达能力

你能够流利说话,接下来就需要提高自己的表达能力。

什么是表达能力?

就是你能够透过口头语言,把自己的思想准确表达出来,而且别人也能够理解到你所说的意思。

在我们日常生活当中,口头表达大致可以分为两类:对话方式和独白方式。只要把这两种方式的表达能力提高,我们就可以应付生活上各种交流的需求。

表达能力差的人,很难快速把看到、听到的客观事物,或者自己想到的意思,准确的给听众传递出来。例如你看完一部电影,你怎么告诉朋友这部电影是好看或者不好看呢?

《金字塔原理》这本书提供的一个逻辑表达方案,就是先观点,后理由;而上一级的理由也是下一级的观点。

简化之后的表达流程,就是观点,理由,例子(例子和理由调换次序也可以)。

但这个表达流程,看上去很容易,运用起来却并不是每个人都得心应手。究其原因,有两点没有做好。

阅读全文 »

5/53,每周一篇博,坚持!

作为程序员,每天跟机器打交道的时间远超过跟人打交道,工作环境周边也很少有异性的存在,久而久之导致我们程序员群体大都是敏于行讷于言,钢铁直男般的存在。

直来直往的沟通方式,以及没什么社交经验导致大部分的程序员口才都很一般,然而在职场打拼一段时间后,我们会发现,无论什么职业什么工种,良好的口才对我们个人的重要性不言而喻,小到跨部门沟通合作,大到汇报工作晋升答辩等等,口才对工作成败的加分非常可观。

偶然在微博上看到了这篇程序员锻炼口才的微博,特将其转载在此,作为今年提升沟通能力目标的训练方法之一,一年后看成效如何。

0. 概述

说好话,并不能让我们到达最终的目的,但通往每个最终目的的路上(如找对象,找工作),说好话可以给予我们更多的帮助。所以锻炼口才,就是为了提高我们获得这些帮助的几率,让我们更接近自己人生中的各种最终目的。

但是很多人尽管知道自己需要恶补口才,却苦于不知道怎么着手开始锻炼。如果你没有一个系统性的计划,东一头练一下,西一头练一下,这样就很难出效果。

锻炼口才,必须有针对性,更不能操之过急。

最好的方法,就是按照一定的流程去练习。而这个流程一般分为四大部分。

  • 第一部分/ 基本功锻炼,旨在提升我们口齿伶俐的程度
  • 第二部分/ 表达能力锻炼,旨在提升我们组织言语表达自我思想的纯属度
  • 第三部分/ 沟通能力锻炼,旨在提升我们与人交往过程中双向交流的互动度
  • 第四部分/ 高级说话能力锻炼,旨在让我们掌握不同情况下各种说话形式的语言运用

这四个部分,在锻炼的时候最好循序渐进的各个击破,否则,前面的部分还没有掌握好就急于进入下一个部分练习,那一旦有个部分练习的不好,就会拉低我们口才的整体发挥效果。

那每一个部分,应该怎么锻炼呢?

阅读全文 »