目录:

前言:使用nodejs实现登录、注册、商品发布、商品列表展示Demo,通过这个demo熟悉nodejs使用,mongoDB的一些简单操作。

一、关于nodejs

一、环境准备

1.nodejs安装

到官网下载安装包,或者在nvm上下载,我本地的node版本为v6.9.2

2.mongoDB安装

a.第一种方法是直接下载压缩包解压

   第二种方法使用在终端brew install mongodb

b.启动mongoDB:

进入到安装mongo的目录下的mongo/bin路径下

sudo mongod

ca88手机版 1

mongo启动成功

看到这个界面即mongo启动成功。

c.可以下载mongoDB图形管理工具,查看和管理数据库,我用的是Robomongo。

  Node.js (http://nodejs.org/)是一个基于Chrome JavaScript
运行时建立的一个平台, 用来方便地搭建快速的,
易于扩展的网络应用。Node.js 借助事件驱动, 非阻塞 I/O
模型变得轻量和高效, 非常适合 run across distributed devices 的
data-intensive 的实时应用。

二、开始写代码啦

环境准备好后,可以开始写nodejs逻辑以及页面了,你需要有的基础是:

1.html+css+javascript前端基础

2.npm简单操作

3.学习node
API以及express,推荐阮一峰nodejs教程,里边讲得简单明了,阮老师的教程一直都很赞

4.项目目录结构

├── productNode       项目根目录

│   ├── database       启动监听数据库操作目录

│   ├── public            静态资源文件放置目录

│   ├── node_modules     npm安装包存放目录

│  ├── routes            路由及接口目录

│   ├── app.js              项目初始化及启动服务文件

│  ├── package.json    package.json文件

  1. app.js 项目初始化及启动服务文件

var express=require(‘express’);

var app=express();

var hbs=require(‘hbs’);

var bodyParser=require(‘body-parser’);

var cookieParser=require(‘cookie-parser’);

var multipart=require(‘connect-multiparty’);//上传图片中间件

var router=require(‘./routes/route’);

require(‘./database/db’);

app.set(‘view engine’,’html’);

app.engine(‘.html’,hbs.__express);//指定模板为html

/\中间件*/*

app.use(bodyParser({uploadDir:’./public/upload’}));//body消息体解析

app.use(cookieParser());

app.use(multipart());

app.use(express.static(‘./public’))//静态资源

app.use(router);//路由

app.listen(8080);

a.我这里用到的是express框架,使用了hbs模板引擎,指定模板文件为html格式的,是我们比较熟悉的格式,使用jade也可以。

app.set(‘view engine’,’html’);

app.engine(‘.html’,hbs.__express);

这两句设置使用的模板引擎。

b.

var bodyParser=require(‘body-parser’);

app.use(bodyParser({uploadDir:’./public/upload’}));//body消息体解析

使用中间件的方式,引用你需要的模块,可在npm中安装即可,例如npm install
body-parser。引用这个就能在接口请求中获取客户端发送过来的body消息体,还指定了文件上传路径为./public/upload。cookie-parser设置管理cookie的中间件,multipart文件上传的中间件,设置这个可以获取到客户端上传过来的file信息。

c.app.listen(8000)启动服务,为8000端口

6.连接数据库 /database/db.js

var mongoose=require(‘mongoose’);

var url=’mongodb://localhost:27017/product’;

var db=mongoose.connect(url);

db.connection.on(‘open’,function() {

console.log(‘数据库连接成功’);

});

db.connection.on(‘error’,function() {

console.log(‘数据库连接失败’);

})

安装mongoose是nodejs中操作mongoDB数据库的框架,mongoose.connect(‘mongodb://localhost:27017/product’)连接数据库,默认的端口号为27017,数据库名称为product,并监听open事件,和error事件,连接成功或连接失败都会进到相应的时间回调中。

/database/produc.js指定集合product的数据结构,创建模型

var mongoose=require(‘mongoose’);

var Schema=mongoose.Schema;

var productSchema=newSchema({

*      name:String,  //商品名称*

*      description:String, //商品描述*

*       price:Number, //商品价格*

*       user:String,   //发布人*

*      createTime:Number,  //商品创建时间*

*      image:String  //商品图片路径*

});

var product=mongoose.model(‘product’,productSchema);

module.exports=product;

  1. public静态资源文件夹

public用于存放静态资源文件,我们在app.js初始化文件中已经指定了静态资源存放的文件夹为public,里边的资源在服务启动后即可通过相应的路径访问到

–images

–upload

–styles

–js

以上文件夹分别用于存放图片资源,上传的图片存放位置,css样式,页面逻辑的js文件。

8.views中用于存放html页面文件

9.routes/route.js  路由及接口

var express=require(‘express’);

var router=express.Router();

express框架中的Router方法。

路由

router.get(‘/’,function(req,res) {

    res.render(‘index’,{

         title:’首页’

   })

});

请求匹配到/,进入到改回调中,response.render渲染index模板,我们在初始化中已经指定了模板为html格式的文件,这里就可以不用写html后缀了。用这样的方法匹配路径,渲染模板。

接口

//登录

var user=require(‘../database/user’);   //user集合的数据格式模型

router.post(‘/api/login’,function(req,res) {

var name=req.body.name;

var password=req.body.password;

var query={

*   name:name,*

*    password:password*

}

var hash=hashPW(name,password);

user.find(query,function(err,docs) {

if(err) {

*        console.log(‘find user error’);*

}else{

*     if(docs.length==0) {*

*         res.send({*

*             status:500,*

*            message:’用户名或密码错误’*

*        });*

*      }else{*

*            res.cookie(“account”, {account:name,hash:hash},
{maxAge:86400000});*

*            res.send({*

*               status:200,*

*               message:’login success’*

*         });*

}

}

});

});

匹配到客户单发送post请求/api/login后进行相应的处理,根据用户的输入账号密码查询数据库,如果没有查询到结果,res.send发送数据给客户端,没有查询到,账号或密码错误,如果数据库中查询到该用户了,返回状态码200,登录成功。登录成功并进行cookie设置,用于保持登录状态。

 
express(http://expressjs.com/)应用于nodejs的一个很火的web应用框架。

三、上代码

demo里还有上传图片的代码,大家也可以参考下。喜欢的麻烦给个star哦!^_^

nodejs商品发布Demo的git地址

  npm(https://www.npmjs.org/)nodejs包管理器。

二、nodejs案例开发完整流程

 
此案例主要是调用百度地图api实现一个基于当前坐标的周边生活搜索和交通导航。

1、用到的开发环境:

os:windows7(x64)

软件:mongodb(v2.6.0)、nodejs(v0.10.26)、npm(v1.2.19)、 express(v3.5.0)

2、完整流程

 2.1、在win7下安装运行mongodb

  2.1.1、下载mongodb

 
通过网址https://www.mongodb.org/dr//fastdl.mongodb.org/win32/mongodb-win32-x86_64-2008plus-2.6.0.zip/download下载mongodb,然后解压。

  程序文件都在bin目录中,bin目录主要包括如下几个程序:

  1. mongo.exe,命令行客户端工具。
  2. mongod.exe,数据库服务程序。
  3. mongodump.exe,数据库备份程序。
  4. mongoexport.exe,数据导出工具。
  5. mongofiles.exe,GridFS工具。
  6. mongoimport.exe,数据导入工具。
  7. mongorestore.exe,数据库恢复工具。
  8. mongos.exe,貌似是性能检测工具。

  2.1.2、设置mongodb目录和数据文件路径

  将其解压到
e:\,再重命名为mongodb,路径为e:\mongodb;在e:\mongodb\路径下新建一个data文件夹,在data文件夹中新建db文件夹,路径e:\mongodb\data\db。

  2.1.3、启动mongodb

  进入cmd提示符控制台,输入命令E:\mongodb\bin\mongod.exe
–dbpath=e:\mongodb\data\db

 2.2、下载安装nodejs

  2.2.1、点击http://nodejs.org/download/下载.exe的nodejs安装文件。

 
2.2.2、在e:\创建文件夹nodejs,然后将下载的node.exe文件放入e:\nodejs\路径下,并在系统环境变量Path中加入“E:\nodejs;” 便于在任意位置执行node应用。

 2.3、下载安装npm

  2.3.1、在https://github.com/isaacs/npm/tags中下载相应的npm zip包

  2.3.2、在e:\新建npmjs文件夹,将npm源代码解压到e:\npmjs目录中。

  在命令提示符窗口中执行下面的操作,完成npm的安装:

cd e:\npmjs

node cli.js install -gf

  另外:

node cli.js install npm -gf //可以安装最新版的NPM
node cli.js install npm@1.0.105 -gf //可以安装指定版本的NPM

 
2.3.3、NPM安装完成后,将”e:\nodejs\node_modules”加入系统环境变量NODE_PATH中。

 2.4、安装express

在命令提示符窗口中执行 npm install express -g //全局安装最新版express

 2.5、创建nodejs工程目录并创建一个nodejs示例项目

 
在e:\下创建nodejsworkspace\project,进入工程目录使用express创建一个使用默认模板引擎的nodejs项目:

cd e:\nodejsworkspace\projcet

express node-demo

ca88手机版 2

 根据提示,下载该项目的依赖包

ca88手机版 3

 示例项目建立成功,启动示例项目

E:\nodejsworkspace\project\node-demo>node app.js

ca88手机版 4

   本地的3000端口被打开,通过浏览器访问:
localhost:3000。通过node启动程序,每次代码修改都需要重新启动。
有一个工具supervisor,每次修改代码后会自动重启,会为我们开发省很多的时间。

通过npm安装supervisor:

`npm install supervisor`

  再次启动项目:

 
supervisor app.js

ca88手机版 5

 

3、示例项目的改进

通过 express -e nodejs-demo 创建支持ejs模板的nodejs项目:

3.1、目录结构:

node_modules, 存放所本项目的所有依赖库
package.json,项目依赖配置及开发者信息
app.js,程序启动文件
public,静态文件(css,js,img)
routes,路由文件(MVC中的C,controller)
Views,页面文件(Ejs模板)

3.2、ejs模板的使用
让ejs模板文件使用扩展名为html的文件。
修改app.js文件:

app.engine(‘.html’, require(‘ejs’).__express);
app.set(‘view engine’, ‘html’);
//app.set(‘view engine’, ‘ejs’);

 3.3、然后将项目中view文件夹中的所有以.ejs为后缀的文件另成为以.html为后缀的文件,另存为时编码格式必须为utf-8(否则启动工程以后,凡是含有中文的页面都会出现乱码)!!!

 3.4、nodejs项目中的路由功能

  3.4.1、在app.js文件中进行工程的路由配置:

  类似的语句如下:

var routes = require(‘./routes’);

var user = require(‘./routes/user’);

var blog = require(‘./routes/blog’);

var interface = require(‘./routes/interface’);

app.get(‘/’, routes.index);

app.all(‘/login’, notAuthentication);
app.get(‘/login’, routes.login);

app.get(‘/users’, user.list);

app.get(‘/blog’, blog.index);
app.get(‘/lbs’, interface.index );
app.get(‘/lbs/k/:keyword’, interface.keyword );
app.get(‘/lbs/c/:coord’, interface.coord );
app.get(‘/lbs/ip’,interface.ip);

app.get(‘/lbs/init/lng/:lng/lat/:lat’,interface.initl);

app.get(‘/lbs/init/word/:word’,interface.initw);

注:get为get请求,post为post请求,all为所有针对这个路径的请求

* * 3.4.2、然后打开routes/index.js文件,增加对应的方法:

exports.index = function (req, res) {
res.render(‘index’, {
title: ‘Index of Baidumap’
});
};

exports.login = function (req, res) {
if(req.session.uer){
return res.redirect(‘/home’);
}
else{
res.render(‘login’, { title: ‘用户登陆’});
}
};

 
综合3.4.1和3.4.2来看,可以这么理解,当我们通过浏览器访问http://localhost:3000/时,实际是通过app.js文件中的app.get('/‘,
routes.index)语句定位到了routes/index.js文件中的exports.index语句,此时服务器就向客户端传回了views文件夹下的index.html页面。

 3.5、功能模块的介绍

  3.5.1、登录模块

 
登录模块中的功能主要是,在数据存储方面通过mongodb实现本web应用中session数据的存储。

  3.5.2、调用百度地图api实现当前坐标的周边搜索和公交导航功能

  1、百度地图API(http://developer.baidu.com/map/)

  百度地图JavaScript
API是一套由JavaScript语言编写的应用程序接口,可帮助我们在网站中构建功能丰富、交互性强的地图应用。

 
2、实现该功能的大致流程是通过给定的地址解析地址对应的经纬度坐标,然后在经纬度坐标出添加覆盖物类:图像标注,给图像标注添加click事件监听函数,在点击目标图像标注时生成当前地址对应的SearchInfoWindow信息窗口工具。而后就可以通过此信息窗口工具搜索当前地址周边的生活娱乐场所,同时也提供搜索当前地址到目标地址的交通导航方案。实现此功能时主要用到的百度地图api如下:

 
1、Web服务API>Geocoding
API
  

2、JavaScript
API
>类参考 Class:覆盖物类/Marker

*

  3、JavaScript
API
>开发指南>工具>SearchInfoWindow

注:百度地图API中的工具类已经被制作成开源库(lib)对外免费开放,可直接访问JavaScript
开源库
。若功能模块中使用了工具类,则需要确认已在开发工程中引入lib文件,具体引用方法可查看JavaScript
开源库
提供的示例源文件。注意,开源库必须与百度地图JS
API同时使用。

三、nodejs相关知识的学习

1、nodejs支持的模板

 
主要是ejs和jade(调侃下,本田有款车也叫jade,呵呵),其中jade是nodejs的默认模板。这两个模板个人学习运用的都还不够深入,所以只能在网上找找其他大牛的使用感受(至于对与错还需要进一步的验证):

  一个node官方的主流template
engine的对比说明:http://paularmstrong.github.io/node-templates/

  如何选择 EJS 和 Jade?:http://www.zhihu.com/question/20355486

2、jade模板的学习

 
jade模板的语法规范初看起来不大适应,但学习起来还是比较好上手的。jade官网中提供了调用jade模板的方法和jade的详细api说明:http://jade-lang.com/api/

3、下面是笔者学习nodejs开发的第一个web应用和网上一些较好的nodejs
web应用的地址

 3.1、 https://github.com/peiyu420/baidumapAPI

 

 3.2、 https://github.com/peiyu420/hackathon-starter

 3.3、 http://blog.fens.me/series-nodejs/

相关文章