记录工作中的点点滴滴

记录工作中的点点滴滴


  • 关于

  • 标签

  • 分类

  • 归档

  • 公益404

  • 搜索
close
记录工作中的点点滴滴

手把手教你开发nodejs微博网站-用户注册篇

发表于 2017-02-07 | 分类于 nodejs | | 阅读次数

引子

  • 上一篇主要讲解了本项目开发使用的数据库MongoDb,MongoDB 的可视化管理工具Robomongo,MongoDB 的驱动库Mongolass,已经具备了功能开发的基本条件。
  • 本篇我主要讲解用户注册功能的开发。

目录结构

在正式开发之前,我们先来看一下项目的目录结构,如下:
directory

阅读全文 »
记录工作中的点点滴滴

手把手教你开发nodejs微博网站-连接数据库

发表于 2017-02-06 | 分类于 nodejs | | 阅读次数

引子

博客肯定是以用户为中心,包括用户的注册,用户的登录,用户发表留言,对留言进行评价等等功能,所以,自然离不开数据库。
本篇文章将涉及到三个名词: MongoDB,Robomongo,Mongolass。看完该文后,就对它们有一个清晰的认识了。

MongoDB

MongoDB简介
  1. MongoDB是一个开源的NoSql数据库,相比mysql那样的关系型数据库,它更为轻巧,灵活,非常适合在数据规模很大,事务性不强的场合下使用
  2. MongoDB将数据存储为一个文档,数据结构由键值对(key=>value)组成。字段值可以包含其他文档,数组及文档数组
  3. 相对于mysql这类需要把对象属性转换成SQL语句才能保存下来 ,MongoDB这些可以直接保存JS对象成数据库的文档,来看一个MongoDB文档的示例:
    1
    2
    3
    4
    5
    6
    {
    "_id" : ObjectId( "4f7fe8432b4a1077a7c551e8" ),
    name : 'phping',
    age : 28,
    hobby : ['movies','music','nba']
    }

可以看到数据格式为json,因此与javascript的亲和性很强,我们的项目也是使用MongoDB。

阅读全文 »
记录工作中的点点滴滴

手把手教你开发nodejs微博网站-首页篇

发表于 2017-01-09 | 分类于 nodejs | | 阅读次数

引子

  1. 接着上一篇,本篇我们开始详细讲解用户首页的开发。
  2. 使用express-generator来快速搭建一个简单的网站,能够在浏览器里通过localhost:3000访问,输出:’Welcome to Express’ 表明搭建成功。

注明:只有上面的第二步安装成功,我们才能进行后面的工作。大家可以点这里有详细的介绍。

一.重中之重

express-generator安装成功之后,在工程目录下面执行

1
npm start

然后在浏览器上访问:

1
http://localhost:3000/

输入如下:
默认首页

看到没,一个简单的web网站已经搭建起来了,有了这个,我们在此基础上进行添砖加瓦,来为我们所用。

阅读全文 »
记录工作中的点点滴滴

手把手教你开发nodejs微博网站-开站篇

发表于 2016-12-31 | 分类于 nodejs | | 阅读次数

手把手教你开发nodejs微博网站-开站篇

引子

本项目参考Nodejs开发指南一书的第5章,受限于书中的nodejs和express版本太低,相当一部分代码在新版本的nodejs和express下都是无法使用,因此自己通过nodejs社区和参考网上的一些问题解决方式,最终完成了一个社交微博网站的雏形。

一.项目功能

微博网站以用户为中心,包括:

  1. 用户注册
  2. 用户登录
  3. 用户发表信息
  4. 显示用户发表的信息
  5. 权限控制
  6. 其它功能

由于要保存用户信息,这里要牵涉到数据库连接,我使用的是Mongodb。
本人也是nodejs的初学者,暂时先完成了着一些基本的功能。
还有其它的功能点,比如:对微博的评论,转发等功能会在后面的学习中一步一步完善。

阅读全文 »
记录工作中的点点滴滴

nodejs新手小笔记之-express-generator安装

发表于 2016-12-19 | 分类于 nodejs | | 阅读次数

nodejs新手小笔记之-express-generator

上一篇简单的介绍了express的安装,这一篇我们来讲一下express-generator。

什么是express-generator

先来看一下express 在github上的介绍,其中有一句话是这样说的:
express-generator
翻译一下大概意思是:
开始使用express框架最快的方法是利用可执行express(1)生成一个应用程序如下所示:
安装可执行文件。可执行的主要版本将匹配express:

1
$ npm install -g express-generator@4

那么,express-generator是个什么东东呢?

阅读全文 »
记录工作中的点点滴滴

nodejs新手小笔记之-express安装

发表于 2016-12-17 | 分类于 nodejs | | 阅读次数

nodejs新手小笔记之-express安装

express概述

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。使用express我们可以快速的搭建一个网站。
很多流行的nodejs框架都是基于express,例如:Feathers,ItemsAPI
KeystoneJS等。

express安装

注:前提是已经安装过node.js

  1. 创建一个目录用来当做你的工作目录,保存你的应用程序。

    1
    2
    $ mkdir myapp
    $ cd myapp
  2. 为你的应用创建一个包配置文件。如果想详细了解这个配置文件是如何工作的,可以点这里。

    1
    $ npm init

    执行这个命令后,会提示你一些信息,比如你想为你的应用程序起的名字,版本号,描述信息等。通常情况下,我们选默认的,直接回车即可。
    执行完毕后,会在myapp目录下面生成一个package.json文件,如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
    "name": "myapp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
    }

如果我们想把main文件的名字起为app.js的话,可以在

entry point: (index.js)

的时候输入 app.js即可。

  1. 安装express
    配置文件生成后,就可以安装express框架了.
    1
    npm install express --save

命令执行完后,会生成一个 node_modules 目录,同时再次打开pack.json文件,会发现新添加了一个依赖列表,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"name": "test2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.14.0"
}
}

查看版本

1
2
express --version
4.14.0

至此,express已经安装成功,是不是很简单呢…

记录工作中的点点滴滴

nodejs之文件操作(fs模块)

发表于 2016-10-16 | 分类于 nodejs | | 阅读次数

Nodejs学习之文件操作

文件操作

NodeJS 提供一组类似 UNIX(POSIX)标准的文件操作API。

1.Node 导入文件系统模块

Node 导入文件系统模块(fs)语法如下所示:

1
var fs = require("fs")

2.异步和同步

NodeJS能够操作文件。小至文件查找,大至代码编译。
NodeJS文件系统(fs 模块)模块中的方法均有异步和同步版本,例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync()。
异步的方法函数最后一个参数为回调函数,回调函数的第一个参数包含了错误信息(error)。

阅读全文 »
记录工作中的点点滴滴

从零开始nodejs系列之案例一:HTTP小爬虫

发表于 2016-10-07 | 分类于 nodejs | | 阅读次数

一.前言

漫漫长路,从脚下开始;
那么就从一个一个案例开始吧,在这个叫做blog的地方做为笔记记录下来。。。

二.案例一:HTTP小爬虫

1. 从零开始nodejs系列之案例一:HTTP小爬虫

本案例用来抓取慕课网的nodejs课程列表,如下:

QQ20160925-0@2x.png

2.爬虫抓取结果如下:

QQ20160925-1@2x.png
注意:篇幅所限,这里我就截取了前三章的课程列表。

阅读全文 »
记录工作中的点点滴滴

手把手教你实现echarts3的折线图下钻drilldown功能系列篇二

发表于 2016-09-21 | 分类于 echarts3 | | 阅读次数

开场白

好了,上一篇介绍了关于echarts下钻(drilldown)的一些信息,通过上一篇文章我们知道echarts折线图,柱状图没有支持下钻(drilldown)功能的api,那就需要我们自己动手,丰衣足食了。
这一篇我开始进行实质性的代码演示。你可以按照我的步骤一步一步来做,有什么疑问可以留言我。

一.效果贴图

为了避免枯燥无味,我先不贴代码,写贴上我的demo图,这里还会拿上一篇的那个demo图为例。

1.下钻(drilldown)前效果

QQ20160921-0@2x.png

从图可以看出:这是展示2016年1月一直到2016年9月份的数据的折线图。

阅读全文 »
记录工作中的点点滴滴

手把手教你实现echarts3的折线图下钻drilldown功能系列篇一

发表于 2016-09-19 | 分类于 echarts3 | | 阅读次数

一.抛出需求:折线图-下钻功能

最近接到领导的一个需求:说是想在原来的月份数据的折线图上,点击某个月份后能显示一个该月份对应的每一天的一个折线图。

折线图图一如下:

QQ20160919-0@2x.png

领导的意图是:比如,点击201609月份这个点后,能够出现一个新的折线图,显示的是201609月份的每一天的数据。

需求看到这里,相信以前接触或使用过highcharts的童鞋就知道了,这是一个下钻的功能。

我的项目现在使用的是echarts3,以前是用过highcharts

二.highcharts的下钻功能

1.看图表

我们来看highcharts官网的一个例子,显示的是各个主流浏览器的一个数值比重,我这里截图如图二所示:

QQ20160920-0@2x.png

阅读全文 »
123
liuyongfei

liuyongfei

Rome was not built in a day!

21 日志
7 分类
37 标签
RSS
Weibo GitHub segmentfault
LINKS
  • 阮一峰
  • 酷壳
© 2012 - 2020 liuyongfei
由 Hexo 强力驱动
主题 - NexT.Muse