Windows下Node.js环境的搭建并结合WebStorm IDE开发环境

一、环境搭建

1、下载并安装Node.js,在Windows下的安装步骤比较简单,一直下一步就可以了。安装完成后它会在环境变量Path中配置好Node的目录。所以我们可以直接在命令行中使用Node的命令,如:node和npm,可以测试一下是否安装完成,打开命令行,输入node如何出现可以进入就表示安装完成了。

2、下载安装WebStorm现在的版本是7.0.2安装步骤也比较简单这里就不赘述了。

3、WebStorm中配置Node.js环境,在打开WebStorm后点击下图中画红框的图标进行配置。

点击【Install】安装需要的功能包。

现在Node跟WebStorm就配置完成了,可以使用WebStorm开发Node.js的Web项目了。

二、Node.js的基本概念

1、模块

在Node.js中一个模块就是一个Node.js文件,这个文件可能是javascript代码、JSON文件或者是编译过的C/C++扩展。

2、模块的创建与加载

因为一个文件就是一个模块所以Node.js创建模块很简单。Node.js提供了两个对象字来操作模块,分别是exports和require。其中exports用于对外公开模块接口,require用于从外部获取模块公开的接口,即获取exports对象。

下面是定义和调用模块的例子:

//model.js
var message;
 
exports.setMessage = function (msg){
     message = msg;
}
 
exports.showMsg = function (){
     console.log(message);
}

把setMessage()和showMsg()函数通过exports暴露出去。

调用模块,代码如下:

//main.js
var msg = require( './model' );
 
msg.setMessage( "Hello World!" );
 
msg.showMsg();

通过require引用同目录中的model.js模块。require是单次加载,也就是无论我们加载多少次,这个模块都是同一个。

如果你想对外暴露一个类,可以有两种方式。

1)、第一种:

function User(){};
 
exports.User = User;
 
User.setName = function (){
     console.log( "调用到了!" );
}

调用方式如下:

var user = require( './user' ).User;
 
user.setName();

2)、第二种:

function Hello(){};
 
module.exports = Hello;
 
Hello.setHello = function (){
     console.log( "成功调用!" );
}

调用方式:

var hello = require( './hello' );
 
hello.setHello();

第一种方式跟第二种的区别在于是否覆盖了exports,调用是否需要在后面加后缀,即:var user = require(‘./user’).User;后面的.User。所以我们一般都是有第二种方法。

3、包

Node.js的包是一个目录,其中包含一个JSON格式的包说明文件package.json。

package.json的格式包括:

  • name—包的名称,必须是唯一的,可以包括小写英文字母、数字和下划线组成。
  • description—包描述
  • version—包版本。
  • keywords—包关键字数组。
  • maintainers—维护者数组
  • dependencies—包的依赖。

下面是一个例子:

{
"name" : "application-name" ,
"version" : "0.0.1" ,
"description" : "一个使用Node.js + Express + MongoDB开发的博客系统" ,
"keywords" : [
"Node.js" ,
"Express" ,
"blog" ,
"MongoDB" ,
"博客"
],
"repository" : {
"type" : "git" ,
},
"author" : {
"name" : "zyw" ,
"email" : "zyw090111@163.com" ,
"url" : ""
},
"private" : true ,
"scripts" : {
"start" : "node app.js"
},
"dependencies" : {
"express" : "3.2.6" ,
"ejs" : "*" ,
"mongoskin" : "*" ,
"connect-mongo" : "*" ,
"connect-flash" : "*" ,
"eventproxy" : "*"
}
}

4、包管理

Node.js的包管理使用官方提供的npm来进行管理。

1)、npm [install/i] [package_name]                   安装一个包。例如:npm install mongskin。或者使用npm i mongskin

2)、Node.js的包安装模式分为本地和全局两种模式。npm默认会到http://npmjs.org上去搜索下载包,并将他安装到当前目录的node_modules的子目录中。使用npm install package_name会使用默认模式安装,即安装到当前目录的node_modules的子目录中。如果想安装到全局模式,就是需要使用npm install –g package_name。

三、使用WebStorm+express进行Web开发

1)、【File】->【New Project】

选择【Node.js Express App】点击【OK】

创建完成后的工程目录如下:

node_modules是依赖包的目录,其中包括ejs和express包

public目录包含静态文件,如:图片、js和css

routes 请求路由文件夹,相当与MVC中的控制层(个人理解)

views 包含视图页面,这里是ejs的模板文件。

app.js 是应用系统的入口

package.json 应用的包定义,如:名称,依赖等。

运行这系统,点击下图中画框的按钮。

在地址栏输入:http://localhost:3000可以看到如下页面

让我们回头看看app.js文件,他的代码如下:

/**
  * Module dependencies.
  */
 
var express = require( 'express' );
var routes = require( './routes' );
var user = require( './routes/user' );
var http = require( 'http' );
var path = require( 'path' );
 
var app = express();
 
// all environments
app.set( 'port' , process.env.PORT || 3000);
app.set( 'views' , path.join(__dirname, 'views' ));
app.set( 'view engine' , 'ejs' );
app.use(express.favicon());
app.use(express.logger( 'dev' ));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(express.cookieParser( 'your secret here' ));
app.use(express.session());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public' )));
 
// development only
if ( 'development' == app.get( 'env' )) {
   app.use(express.errorHandler());
}
 
app.get( '/' , routes.index);
app.get( '/users' , user.list);
 
http.createServer(app).listen(app.get( 'port' ), function (){
   console.log( 'Express server listening on port ' + app.get( 'port' ));
});

从代码中可以看到该文件引入了五个模块,并创建一个expresss对象。

app.set(‘port’, process.env.PORT || 3000); 设置端口

app.set(‘views’, path.join(__dirname, ‘views’));设置视图路径

app.set(‘view engine’, ‘ejs’);设置视图引擎

下面是使用的一些中间件:

app.use(express.favicon());使用网站图标也就是浏览器上显示的图片。

app.use(express.logger(‘dev’));日志记录,这里设置的是开发模式

使用app.use(express.bodyParser())相当于使用了一下三个中间件

app.use(express.json());json数据的中间件

app.use(express.urlencoded());url编码的中间件

app.use(express.multipart());文件上传中间件

app.use(express.methodOverride()); 从名称上是方法重新,实际不知道

app.use(express.cookieParser(‘your secret here’)); cookie解析

app.use(express.session()); session开启

app.use(app.router); 使用路由

app.use(express.static(path.join(__dirname, ‘public’)));静态文件路径

app.get(‘/’, routes.index);地址栏输入”/”由routes.index来处理

app.get(‘/users’, user.list);输入“/users”由user.list来处理

Node.js的访问处理是REST风格的。post请求由app.post()来处理。

到处Node.js和WebStorm的环境基本搭建完成,以后我们就可以根据这个模板进行应用开发了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值