nodejs入门篇---创建project并具体解释

想了非常久。总想写点对大家有优点的,今天解说生成项目。

如今市面上一般须要人全栈-----mean(mongo,express。angular,nodejs),这样能够从前端开发到后端以及数据库,听起来牛呼呼的。

这篇文章就说nodejs和比較流行的框架express4.X版本号(因为3.X版本号没怎么研究过。并且和4有一定差别。况且4也出来非常久了。非用不可啊),后面的文章会带上mongo(oh。应该说是mongoose)至于angualr我有独立的研究过。和nodejs之流放在一起用还没搞过,还是看实际情况吧。

这篇文章就写个生成项目(页面就用ejs,对jade木有还没研究,不能坑了大伙)

众所周知,一个project肯定有非常多目录以及文件。那么怎么高速生成开发框架呢。两种方式,第一是使用工具,我用的是webstorm,另一个是语法,用命令操作到工作空间,然后运行命令  express  -e   aTest(当中-e就是指ejs。aTest是project名。也是最上层的目录名),为了可以形象化截图。我们还是用工具生成。

1:new一个project,各种开发都是从这里開始的

2:选nodeproject

3:选版本和驱动面板,版本不改,驱动面板改成ejs。点击ok

因为我们本地已经安装了nodejs。所以我们点击cancel

这样,一个nodejsproject生成了。例如以下图

文件夹解释

app.js:启动文件,或者说入口文件

package.json:存储着project信息以及模板依赖,当在dependencies中加入依赖的模块时。执行npm install,nmp会检查当前文件夹下的package.json,并自己主动安装全部指定的模块

node_modules:存放package.json中安装的模块,当你在package.json加入依赖的模块并安装后,存放在这个目录下

public:存放image、css、js等文件

routes:存放路由文件

views:存放视图文件或者说模板文件

bin:存放可运行文件

打开app.js

<span style="font-size:14px;">var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

module.exports = app;
</span>

这里我们通过require()载入了express、path 等模块,以及 routes 目录下的index. js和 users.js 路由文件。 以下来解说每行代码的含义。

(1) var app = express():生成一个express实例 app。

(2)app.set(‘views‘, path.join(__dirname, ‘views’)):设置 views 文件夹为存放视图文件的文件夹, 即存放模板文件的地方,__dirname 为全局变量,存储当前正在运行的脚本所在的文件夹。

(3)app.set(‘view engine‘, ‘ejs’):设置视图模板引擎为 ejs。

(4)app.use(favicon(__dirname + ‘/public/favicon.ico’)):设置/public/favicon.ico为favicon图标。

(5)app.use(logger(‘dev’)):载入日志中间件。

(6)app.use(bodyParser.json()):载入解析json的中间件。

(7)app.use(bodyParser.urlencoded({ extended: false })):载入解析urlencoded请求体的中间件。

(8)app.use(cookieParser()):载入解析cookie的中间件。

(9)app.use(express.static(path.join(__dirname, ‘public‘))):设置public文件夹为存放静态文件的文件夹。

(10)app.use(‘/‘, routes);和app.use(‘/users‘, users):路由控制器。

(11)

app.use(function(req, res, next) {
    var err = new Error(‘Not Found‘);
    err.status = 404;
    next(err);
});

捕获404错误,并转发到错误处理器。

(12)

if (app.get(‘env‘) === ‘development‘) {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render(‘error‘, {
            message: err.message,
            error: err
        });
    });
}

开发环境下的错误处理器,将错误信息渲染error模版并显示到浏览器中。

(13)

app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render(‘error‘, {
        message: err.message,
        error: {}
    });
});

生产环境下的错误处理器。将错误信息渲染error模版并显示到浏览器中。

(14)module.exports = app :导出app实例供其它模块调用。

接下来再看看bin/www文件

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('aTest:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ?

'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ?

'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

解释一下:

(1)#!/usr/bin/env node:表明是 node 可运行文件。

(2)var debug = require(‘debug‘)(‘blog’):引入debug模块。打印调试日志。

(3)var app = require(‘../app’):引入我们上面导出的app实例。

(4)app.set(‘port‘, process.env.PORT || 3000):设置端口号。

(5)

var server = app.listen(app.get(‘port‘), function() {
  debug(‘Express server listening on port ‘ + server.address().port);
});

启动project并监听3000端口,成功后打印 Express server listening on port 3000。

以下再看一下 routes/index.js 文件:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

生成一个路由实例用来捕获訪问主页的GET请求,导出这个路由并在app.js中通过app.use(‘/‘, routes); 载入。

这样,当訪问主页时,就会调用res.render(‘index‘, { title: ‘Express‘ });渲染views/index.ejs模版并显示到浏览器中。

再看 views/index.ejs 文件:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

在渲染模板时我们传入了一个变量 title 值为 express 字符串。模板引擎会将全部 <%= title %> 替换为 express 。然后将渲染后生成的html显示到浏览器中,如上图所看到的。

通过上面的知识。我们学习了怎样创建一个project并启动它。了解了project的大体结构和运作流程。下一篇讲路由。

。。



时间: 2024-10-15 22:36:35

nodejs入门篇---创建project并具体解释的相关文章

nodejs入门篇(二)- 使用淘宝镜像

1.使用以下命令安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 参考:http://npm.taobao.org/ 原文地址:https://www.cnblogs.com/lichenx/p/11024537.html

【SSRS】入门篇(一) -- 创建SSRS项目

在本篇中,您将学习如何在 SQL Server Data Tools (SSDT) 中创建报表服务器项目. 报表服务器项目用于创建在报表服务器中运行的报表. 1.单击“开始 --> 所有程序 --> Microsoft SQL Server 2012 ,然后单击“SQL Server Data Tools”: 打开SQL Data Tools的界面如下: 2.在“文件”菜单上,指向“新建”,然后单击“项目”. 3.选择"商业智能 -->Reporting Services --

NodeJS入门

NodeJS入门 来源于: http://www.nodebeginner.org/index-zh-cn.html 作者: Manuel Kiessling 翻译: goddyzhao &GrayZhang &ondayChen 关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识.本书绝不是一本“Hello World”的教程. 状态 你正在阅读的已经是本书的最终版.因此,只有当进行错误更正以及针对新版本Node.js的改动进行

微信小程序入门篇

微信小程序入门篇: 准备工作 IDE搭建 就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程 图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教程 廖雪峰大神的博客 HTML+CSS 大概知道是干啥的就行 从零开始 微信小程序中就四种类型的文件 js ---------- JavaScrip文件 json -------- 项目配置文件,负责窗口颜色等等 wxml ------- 类似HTML文件 wxss ------- 类似CSS文件

Spring Boot干货系列:(一)优雅的入门篇

Spring Boot干货系列:(一)优雅的入门篇http://www.cnblogs.com/zheting/p/6707032.html  全篇参考:http://www.cnblogs.com/zheting/category/966890.html 前言 Spring一直是很火的一个开源框架,在过去的一段时间里,Spring Boot在社区中热度一直很高,所以决定花时间来了解和学习,为自己做技术储备.   正文 首先声明,Spring Boot不是一门新技术,所以不用紧张.从本质上来说,

DevExpress XtraReports 入门五 创建交叉表报表

原文:DevExpress XtraReports 入门五 创建交叉表报表 本文只是为了帮助初次接触或是需要DevExpress XtraReports报表的人群使用的,为了帮助更多的人不会像我这样浪费时间才写的这篇文章,高手不想的看请路过 本文内容来DevExpress XtraReports帮助文档,如看过类似的请略过. 废话少说 开始正事 一.准备数据绑定 XRPivotGrid 控件 启动 MS Visual Studio (2005.2008 或 2010),并且新建一个或者打开一个现

[JavaEE] Apache Maven 入门篇(上)

http://www.oracle.com/technetwork/cn/community/java/apache-maven-getting-started-1-406235-zhs.html 作者:George Ma 写这个 maven 的入门篇是因为之前在一个开发者会的动手实验中发现挺多人对于 maven 不是那么了解,所以就有了这个想法. 这个入门篇分上下两篇.本文着重动手,用 maven 来构建运行 hellow world 程序,体会一下不用任何 IDE ,只用 maven 是咋回

Linux及Arm-Linux程序开发笔记(零基础入门篇)

Linux及Arm-Linux程序开发笔记(零基础入门篇)  作者:一点一滴的Beer http://beer.cnblogs.com/ 本文地址:http://www.cnblogs.com/beer/archive/2011/05/05/2037449.html 目录 一.Arm-Linux程序开发平台简要介绍... 3 1.1程序开发所需系统及开发语言... 3 1.2系统平台搭建方式... 4 二.Linux开发平台搭建... 5 2.1安装虚拟工作站... 5 2.2安装Linux虚拟

DevExpress XtraReports 入门二 创建 data-aware(数据感知) 报表

原文:DevExpress XtraReports 入门二 创建 data-aware(数据感知) 报表 本文只是为了帮助初次接触或是需要DevExpress XtraReports报表的人群使用的,为了帮助更多的人不会像我这样浪费时间才写的这篇文章,高手不想的看请路过 本文内容来DevExpress XtraReports帮助文档,如看过类似的请略过. 废话少说 开始正事 一.创建应用程序并添加报表 启动 MS Visual Studio (2005.2008.或 2010). 在 Visua