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

yxysuanfa

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

如今市面上一般须要人全栈-----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的大体结构和运作流程。下一篇讲路由。

。。





























分类：

技术点：

相关文章：

  • 2021-06-21
  • 2021-12-05
  • 2021-09-10
  • 2021-09-29
  • 2021-11-30
  • 2022-01-14
  • 2021-12-22
猜你喜欢
  • 2021-09-03
  • 2018-10-27
  • 2021-12-09
  • 2021-12-05
  • 2021-12-12
  • 2021-11-30
  • 2021-09-11
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode