javascript代码实例教程-nodejs入门

发布时间:2019-02-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-nodejs入门脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 目录:

 

一、关于nodejs

 

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

 

  exPress(https://exPRessjs.COM/)应用于nodejs的一个很火的web应用框架。

 

  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、点击https://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

 

 

 

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

 

 

 

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

 

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

 

 

 

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

 

  通过npm安装supervisor:

 

  npm install supervisor

 

  再次启动项目:

 

  supervisor app.js

 

 

 

 

 

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: '@R_333_2126@'});

}

};

 

  综合3.4.1和3.4.2来看,可以这么理解,当我们通过浏览器访问https://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(https://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的对比说明:https://paularmstrong.github.io/node-templates/

 

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

 

2、jade模板的学习

 

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

 

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

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-nodejs入门全部内容,希望文章能够帮你解决javascript代码实例教程-nodejs入门所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。