nodejs+express+mongodb+ejs 数据渲染实例

前言 nodejs+express+mongodb+ejs 的搭配相信很多朋友都不会陌生了,但对于初学者来说,这可以是一道不可逾越的鸿沟。比如:怎么从数据库中读取数据并渲染到页面中?这是一个前端总是会遇到的问题,下面我就给大家分享下如何实现数据的渲染。为了不让你有过多的负担,我这里只把关键代码贴出来,但也足以解决你的问题了。 例子 ejs 模板代码 <!DOCTYPE html> <html> <head> ...

2016
10-08

connect-flash 用法详解

前言 说到 connect-flash ,估计也有很多朋友像我一样被它虐了好一阵子,很多朋友可能都会遇到过这个问题:Express4.x 中的 connect-flash 为什么不起作用?或者 connect-flash 怎么用?诸如此类的问题,在这里我就给大家戳破 connect-flash 的神秘面纱! 官方解释 The flash is a special area of the session used for storing messages. Messages are written to the flash and cleared after being d...

2016
10-05

自己开发的第一个 gulp 插件-文件筛选

前言 自动化工具 gulp 的出现给我们这些从事前端的开发人员提供了很多便利,这让我们的开发效率得到了很大的提高。首先npm 官网上的gulp插件就非常地多,常用的插件基本都可以找到(图片压缩,CSS压缩,js压缩,文件重命名……),如果对这些基本的插件还不了解的可以看看这篇文章《前端自动化工具gulp 初识》。但在实践的项目中,很多时候需要也不是那么简单或者说单纯的现有插件已经满足不了...

2016
09-30

两次电话面试,都败给了自己,一个字“服”

因为自己想找个跟自己职业规划有交集的平台,于是不经意间开始了面试之旅。下面是自己对两次电话(分别对应两家公司)面试分析总结,以便让自己查缺补漏。这里我所说的是专业技能方面的电话沟通。 拍摄于珠海唐家港湾大道2015/11/28 首先,对两次面试中自己出现的共同问题进行分析记录。 通过这两次面试后, 我发现自己在跟别人沟通的时候,语速会不自觉地变快,甚至快到连话都说不清。虽然第一次电话面...

2016
09-22

前端自动化工具 gulp 初识

前言 我们先来看看官方是怎么说的: 易于使用:通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。 构建快速:利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。 插件高质:Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。 易于学习:通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。 gulp安装 初始化项目,初始化的的作用就...

2016
09-20

mongoose 安装及配置

前言 mongoose 是什么,有什么用?要想知道这个问题的答复,我们就不得不先说说mongodb了。关于mongodb在这里我只是抛砖引玉,如果想了解更多内容,可以自行查找,网上多得是。 MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。他...

2016
08-31

纯 JavaScript 带小图导航的焦点图、图片切换效果

作为前端,我们以开发页面时,难免会用到一些切换效果,比如常用的焦点图(Banner),但在这里我要跟大家分享的是一个带小图导航的图片切换效果,一个不基于其它库(如:jQuery)的实现方法。我们还是先来看看这个效果的过截图吧,一个是垂直方向的,一个是水平方向的,我想就这两个基本的效果都可以解决你90%关于带小图导航的图片切换了问题了。 由于代码有点多,就不在这里贴出来了,你可以点击对应效果...

2016
08-29

MongoDB 在 window 下安装及配置方法

MongoDB 下载 第一步肯定是要下载 MongoDB,你可以到官网上下载,官方下载网址为: https://www.mongodb.com/download-center#community 择window版本,下载msi版本的MongoDB,下载完之后直接安装就可以了,这里有一点值得注意的是,MongoDB 的安装路径最好不要太深,因为后面会得经常切换到MongoDB 的 bin 目录(以下所执行的命令行都是在bin目录下执行的)。 MongoDB 安装、配置 把MongoDB安装到D:\...

2016
08-26

学习计划:centos7 web服务器配置(完)

前言 由于自己的虚拟空间也快到期了,并且自己有两个站(云库网、朝夕熊博客),如果不用云主机的话,那么真的吃不消,所以为了在到期之前换上云主机,于是就有了这个学习计划,centos7 web服务器配置。都说站长都是全能的,什么都得自己来,现在我信了。下面我就把这段时间以来学习web服务器配置的心得分享出来,并把一整套学习计划记录清单都列出。 学习心得 学习东西不是一天打鱼两天晒网,学习是一...

2016
08-24

Centos 7 phpMyAdmin 服务安装及配置

前言 现在跟大家来讲讲最常用的数据库管理工具 phpMyAdmin 。这个工具我就不用多说了,对于不怎么了解数据命令的朋友来说用它最适合不过了,它把一行行让人记不住的命令变成了界面操作,就像操作window系统一样简单。好了话不多说,我们开始吧。 phpMyAmin 下载、安装 下载 我们打开  phpMyAdmin 官网找到下载页面,这里我给大家下链接  http://www.phpmyadmin.net/downloads/ 在页面里你可以看到不...

2016
08-23

Node.js + Express.js 环境配置

前言 Node.js 如今越来越火,不管你走到哪里,跟Node.js 打交道的机会还是很多的,例如:当你想换工作的时候,在各大求职网站上东找找西找找的时候,你肯定会看到 会Node.js 或者 精通 Node.js。一直都觉得 Node.js 好高大尚,所以也不敢撞他,但不管我如何对它,都不会阻止它的流行及在前端中的地位,所以今天我还是硬着头皮开始了Node.js 之旅。我这次是在Window 系统下安装测试的,但是万变不离其踪,...

2016
08-14

常用的 JavaScript 函数封装

获取兄弟节点 所有兄弟节点(不含自己) // 获取所有兄弟节点(不包含自己) function yk_sibling( elem ) { var ar = []; var n = elem.parentNode.firstChild; for ( ; n; n = n.nextSibling ) { if ( n.nodeType === 1 && n !== elem) { ar.push( n ); } } return ar; } 所有节点(含自己) // 获取所有兄弟节点(包含自己) functio...

2016
08-11

wordpress 后台编辑器 TinyMCE 自定义按钮

前言 这是一篇很不错的文章,你可以从这篇文章里得到一个提高效率的方法,一个关于如何为 wordpress 后台自带的编辑器 tinymce 添加自定义按钮的方法,纯粹干货,行过路过,真的不要错过。 在写这篇文章的时候,我也把这个自主开发的,云库网制造的说它不是 wordpress 插件,但它又确确实实有插件的功能的两堆代码。不多说,是马是驴,拉出来溜溜就知道。代码如下,分两步。 代码案例 修改functions.p...

2016
08-06

纯 JavaScript 固定导航效果(fixed)

前言 现在不少网站页面本身内容都会比较多,从而导致页面过长,当用户浏览页面时,如果要用户反手动拉滚动条回到顶部找导航那多少会有点不方便,或者说这样用户体验不怎么好。其实他个问题有很多种解决方案,如:给页面添加一个返回顶部的按钮,这样用户就可以快速地返回到顶部。那很多时候我们就是导航固定在页面的顶部,毕竟这个对于提高用户体验还是有帮助的。下面我们就来看看如何通过纯 JavaScript ...

2016
08-04

纯 JavaScript 实现单条新闻滚动效果

前言 单条新闻滚动效果相信你已经见过不少了,这个效果在很多导航页面中或多或少都会出现。最近我们360导航中就看到了这个效果,可当我研究下这是怎么实现的时候,竟然有意外的收获,这个页面里用到的方法是我从来都没有想过的,不过我也不知道我的猜测对不对,光从页面中的 HTML 结构及运动效果我大概地想到了这是如何实现的,但到底不是不真的像我想的那样,那就不一定了。好了费话不多说,我们还是来...

2016
08-01

纯 JavaScript 实现 tab 切换效果

作为前端开发人员,一些效果你肯定会常常用到,在这里我给大家分享一个tab 切换效果,这个效果我已经封闭好了,如果你想用直接把源代码复制到你的项目中就可以了,下一步你只需要在需要用到这个效果的页面调用这个函数就可以了,不管页面中有多少个Tab 切换,你都可以轻而易举地完成。下面我就直接把源代码贴出来。 移动端 Tab 切换 JavaScript 代码 function tab(tabWrap,tabMenu,tabLink,tabContent,...

2016
07-30

纯 JavaScript 生成随机数方法

前言 用到随机数的地方还是挺多的,如有些网站为了吸引用户就会对网站文章的点赞数,评论数,阅读数等等作出一个可观的数字,让别人看起来觉得不点都不舒服,虽然把随机数用到这里有点不好,但这种现象确确实实存在于我们的生活中。随机数除了这个用途外,其实还有很多方面会用到它。下面我们变来了解下如何通过 JavaScript 生成一个随机数。 相关方法 在说随机数之前我们先来了解JavaScript 中的几个...

2016
07-27

Z-Blog常用标签大全(精华版)

前言 博客系统的历史可以说很悠久了,还记得我刚开了自己的博客的时候,有朋友跟我说,现在都什么年代了,还玩博客。他说得也不无道理,但很多东西有没有价值,用不用,关键还是看自己,我觉得博客还是个好东西,我可以把工作中的经验都记录下来,把生活中的快乐,想法或者些许感悟都记录下来,以便日后装B之用。扯远了,回到正题,本文要介绍的是 Z-Blog 常用标签,相对来说我还是比较喜欢 Z-Blog 博客...

2016
07-21

织梦常用标签大全(精华版)

前言 之前跟大家分享过了 wordpress 常用标签,现在跟大家说说织梦常用的标签,为什么说是常用的,因为本文是基于一个实践网站(云库网)所用到的标签的基础上添砖加瓦的。如果你是一个初学者,那么这篇文章真的非常适合你,如果你对于常用的织梦标签已经比较熟悉了,那么也可以把它叫藏起来,毕竟好记性不如烂毛头。 为了让你看得更加清晰明了,有些直接把完整的 HTML 结构也贴出来了。这个对于理解如...

2016
07-19

Centos 7 nginx 服务安装及配置

前言 nginx 跟 Apache 的作用差不多,都是提供 WEB 服务,但 nginx 相对于 Apache 来说,在性能上有更好的体现,而 Apache 有稳定性方面会比 nginx 好一些,所以要用哪一个,自己喜欢就好。下面就给大家分享下 nginx 的安装及配置方法。如果你觉得下面记录的东西有点乱,你可以直接看本文后面的总结也是可以的,更省时,更省心。我在这里。 小插曲 如果你直接执行命令 # yum install nginx 你会得到这...

2016
07-16

Centos 7 Apache,php,MariaDB,FTP的卸载方法

前言 作为站长或者前端开发者,云服务器对于你来说应该不陌生了。我相信你还经常跟Centos 7 Apache,php,MariaDB,FTP等这些极常用的服务打了不少交道。包括这些服务的安装,配置和卸载。本文要分享的是如何卸载这些服务。下面我们就一步一个脚印来了解这些服务的卸载方法。 卸载 Apache 卸载 我们的第一个例子就先拿 Apache 来开刀。不管你信不信现在我就要把它从Centos里卸载掉,不要问为什么,你...

2016
07-15

Centos 7 php 环境安装及配置

前言 在这篇文章之前,我已经分享过三篇有关于在 centos 7下配置 web服务器环境的文章了,如果你有什么不懂可以前往阅读在这里为您开个传送门,速度有点快,请系好您的安全带《Centos 7 FTP(vsftp)服务安装及配置》、《Centos 7 Apache 服务安装及配置》、《Centos 7 MariaDB 数据库服务安装及配置》。加上这一篇文章就刚好凑够 WEB 服务器环境配置的四大天王了。php 的安装及配置相对于前面三个服务的...

2016
07-13

Centos 7 MariaDB 数据库服务安装及配置

小插曲 一开始在网上看到装 mysql 教程,于是就跟着做了,可执行了第一行命令就把错了 # yum install mysql-server 回车后显示如下错误提示 Loaded plugins: fastestmirror base | 3.6 kB 00:00 extras | 3.4 kB 00:00 rpmforge | 1.9 kB 00:00 updates | 3.4 kB 00:00 updates/7/x86_64/primary_db | 5.7 MB 00:00 Loading mirror speeds from cached hostfile * base: mirrors.yun-idc.com * extras: m...

2016
07-13

Centos 7 Apache 服务安装及配置

前言 在上一篇文章中,我已经对 Centos 7 FTP(vsftp)服务安装及配置进行了详细的介绍,如果你对于FTP有什么不懂的可以去看看这篇文章。在这里我就不重复了。本文给大家介绍下在Centos 7 下如何安装及配置 Apache,Apache的安装及配置比FTP的安装及配置更为简单些。只需要几行代码就可以了。下面我们马上开始吧! Apache 安装 Apache的安装非常地简单,你只需要输入一行代码回车就可以了 # yum instal...

2016
07-11

Centos 7 FTP(vsftp)服务安装及配置

作为前端工程师,要想在中国有一席之地,你不得不作出不可能的努力,把自己变成一个全能的人。你不仅仅要会 HTML、CSS、JavaScript、PhotoShop、Node.js、Angular.js、以及各种前端流行框架 如Boostrap、Kube、UIKIT、amazeui 等等,你还得会配置服务器Linux、Windows。所以下面我们变来聊聊的服务器的配置,在本文中我们要介绍的是在 Centos 7 下安装及配置 FTP 服务。 提示FTP服务的软件有很多,在这里我...

2016
07-10

meta viewport 你真的了解吗?

前言 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 上面是一行我几乎每天都用到的代码,它给我们带来的好处是非常明显的,一眼就可以看到的,除了这一点,我对它就一无所知了,我天真地以为只要认识它能给我实现什么样的效果就足够了,可事实却告诉我:“你这小子也太天真了,你千万别被网上一大堆的搜索结果骗了,...

2016
07-09

设备像素,设备独立像素,CSS像素

前言 这两个属性说难不难,说容易又不易容。但如果你弄明白了这个,你就明白了一些东西,一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起,其实虽然标题里是三个名词,但我们接下来只聊两个就可以了,为什么?看完你就知道了。 基本定义 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。 CSS...

2016
07-02

wordpress 常用标签大全(精华版)

title标题 <title><?php if ( is_home() ) {bloginfo('name');} elseif ( is_category() ) {single_cat_title(); echo " - "; bloginfo('name');} elseif (is_single() || is_page() ) {single_post_title(); echo " - "; bloginfo('name');} elseif (is_search() ) {single_post_title(); echo " - "; bloginfo('name');} elseif (is_search() ) {echo "搜索结果"; echo " - "; bloginfo('...

2016
06-27

document.querySelector()

前言 在平时的前端开发中,我们经常需要写一些小效果,比如TAB切换、图片轮播等等,不管是写什么 JavaScript 效果,你肯定离不开获取元素作为对象,然后对这个对象进行一系列的操作。而获取元素时,我们可以使用jQuery 库,也可以使用 JavaScript 为我们提供的原生的并且比较常用的方法getelementbyid()、getelementbyTagName()、getElementsByClassName()。但是本文要跟大家分享是另一种方法也是 JavaSc...

2016
06-22

纯 JavaScript 实现页面返回顶部效果

前言 对于一个内容有点多的页面来说,当你滚动页面底部浏览了一通后,突然想回到页面顶部,而如果页面没有类似于返回顶部功能的按钮,那么你也只能乖乖地滚动鼠标滚轮或者拉动浏览器滚动条来实现回到页面,很多时候你会觉得这个很费劲,特别是在手机端,一个屏幕本来就小得可怜的手机,如果内容非常,那么手动滚动回到页面顶部就如同噩梦一般。所以下面就给大家分享一个纯 JavaScript 实现的页面返回顶部...

2016
06-21