学习node好榜样！前阵子看了php，那个模块化编译真的好棒。然而php学习起来不是一般的记不住，毕竟和js还是有不同的。于是转移到了node。看到熟悉的js脚本，心里踏实多了。

话不多讲，php我也是要驾驭的，只是要排到后面去了。今天先来个基于node的框架之express4的模板实例

官网api：http://www.expressjs.com.cn/4x/api.html

1.首先，全局安装。

npm install -g express-generator@4

2.检测安装结果

express --version

3.创建项目，这里我选择d盘node文件夹，安装框架模板。

express -e nodeDemo

4.进入项目安装依赖

cd nodeDemo && npm install

5.运行项目，如果不知道运行命令是啥，打开项目根目录下‘package.json’文件，查看scripts对象里默认第一个的属性名，这个模板里叫start。

npm start

6.运行之后，打开项目根目录下的bin文件夹里的www.js，查看这一句代码：‘var port = normalizePort(process.env.PORT || '3000');’3000就是端口号。基于node服务器本机ip原则。在浏览器输入。

localhost:3000 或者 127.0.0.1:3000

7.项目结构

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

8.app.js核心文件说明

// 加载依赖库，原来这个类库都封装在connect中，现在需地注单独加载

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 index = require('./routes/index');

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

// 创建项目实例

var app = express();

// // 定义EJS模板引擎和模板文件位置，也可以使用jade或其他模型引擎比如html

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

//如果选用html模版就把下面的注释并打开把上面这句注释即可。

/*

 app.engine('.html', ejs.__express);

 app.set('view engine', 'html');

*/

// uncomment after placing your favicon in /public// 定义icon图标

//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

// 定义日志和输出级别

app.use(logger('dev'));

// 定义数据解析器

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

// 定义cookie解析器

app.use(cookieParser());

// 定义静态文件目录

app.use(express.static(path.join(__dirname, 'public')));

// 匹配路径和路由

app.use('/', index);

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

// catch 404 and forward to error handler//404错误

app.use(function(req, res, next) {

  var err = new Error('Not Found');

  err.status = 404;

  next(err);

});

// error handler//500错误

app.use(function(err, req, res, next) {

  // set locals, only providing error in development

  res.locals.message = err.message;

  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page

  res.status(err.status || 500);

  res.render('error');

});

// 输出模型app

module.exports = app;

　　

9.查看./bin/www文件。

#!/usr/bin/env node

/**

 * 依赖加载

 */

var app = require('../app');

var debug = require('debug')('nodedemo1:server');

var http = require('http');

/**

 * 定义启动端口.

 */

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

app.set('port', port);

/**

 * 创建HTTP服务器实例

 */

var server = http.createServer(app);

/**

 * 启动网络服务监听端口

 */

server.listen(port);

server.on('error', onError);

server.on('listening', onListening);

/**

 * 端口标准化函数

 */

function normalizePort(val) {

  var port = parseInt(val, 10);

  if (isNaN(port)) {

    // named pipe

    return val;

  }

  if (port >= 0) {

    // port number

    return port;

  }

  return false;

}

/**

 * HTTP异常事件处理函数

 */

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;

  }

}

/**

 * 事件绑定函数

 */

function onListening() {

  var addr = server.address();

  var bind = typeof addr === 'string'

    ? 'pipe ' + addr

    : 'port ' + addr.port;

  debug('Listening on ' + bind);

}

　　

10.编辑views/index.ejs文件

这里就是前台展示的页面了。可以使用我们熟悉框架啊之类的。文件类型是ejs的，如果想用熟悉的html的，需要在app.js里修改一下就好，我已经在上面代码中写清楚了注释。

11.重点来了，我梦寐以求的模块化网站：把index.ejs页面切分成3个部分：header.ejs, index.ejs, footer.ejs，用于网站页面的模块化。

编辑header.ejs。注意结构！

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <title><%= title %></title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

　　

编辑footer.ejs。

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

    <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

  </body>

</html>

　　

编辑index.ejs。

<% include header.ejs %>

<div class="well jumbotron">

<h1><%= title %></h1>

<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

</div>

<% include footer.ejs %>

　　重新启动项目，刷新页面就会看到结果了。

这里需要注意，如果你的模块组件放在了其他文件夹下 那么引入的命令里是可以加路径的，如果你换成了html模板的话，记得把引入命令也修改了。比如：<% include ./psge/header.html %>

至于路由啊还有更高层次的就到官网上看api吧http://www.expressjs.com.cn/4x/api.html

入门到此结束。

<% include header.ejs %>

<div class="well jumbotron">

<h1><%= title %></h1>

<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

</div>

<% include footer.ejs %>

nodejs之express4x的更多相关文章

  1. NodeJs之OS

    OS Node.js提供了一些基本的底层操作系统的模块OS. API var os = require('os'); console.log('[arch] 操作系统CPU架构'+os.arch()) ...

  2. NodeJs之Path

    Path模块 NodeJs提供的Path模块,使得我们可以对文件路径进行简单的操作. API var path = require('path'); var path_str = '\\Users\\ ...

  3. NodeJs之调试

    关于调试 当我们只专注于前端的时候,我们习惯性F12,这会给我们带来安全与舒心的感觉. 但是当我们使用NodeJs来开发后台的时候,我想噩梦来了. 但是也别泰国担心,NodeJs的调试是很不方便!这是 ...

  4. NodeJs在Linux下使用的各种问题

    环境:ubuntu16.04 ubuntu中安装NodeJs 通过apt-get命令安装后发现只能使用nodejs,而没有node命令 如果想避免这种情况请看下面连接的这种安装方式: 拓展见:Linu ...

  5. NodeJs之child_process

    一.child_process child_process是NodeJs的重要模块.帮助我们创建多进程任务,更好的利用了计算机的多核性能. 当然也支持线程间的通信. 二.child_process的几 ...

  6. nodejs进阶(6)—连接MySQL数据库

    1. 建库连库 连接MySQL数据库需要安装支持 npm install mysql 我们需要提前安装按mysql sever端 建一个数据库mydb1 mysql> CREATE DATABA ...

  7. 图片访问实时处理的实现(nodejs和php)

    我在访问时光网.网易云音乐等网站时,发现将它们页面中的一些图片URL修改一下就可以得到不同尺寸的图片,于是思考了其实现方案,我的思路是:URL Rewrite + 实时处理 + 缓存,对用户请求的UR ...

  8. nodejs进阶(4)—读取图片到页面

    我们先实现从指定路径读取图片然后输出到页面的功能. 先准备一张图片imgs/dog.jpg. file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'.(file. ...

  9. nodejs进阶(3)—路由处理

    1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...

随机推荐

  1. hibernate总结-持续更新

    简介 hibernate官网:Hibernate Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思 ...

  2. rang enumerate

    叨逼叨: 小知识点 rang enumerate # 1. 请输出1-10# 2.7: 立即生成所有数字# range(1,11) # 生成 1,23,,4,56.10# 3.x: 不会立即生成,只有 ...

  3. 学习java应该了解一些html超文本标记语言（前端）

    在自己学习的过程中遇到一些内容,怕忘记所以借助博客加深印象也方便查找! html超文本标记语言中,分行级元素和块级元素. 行级元素的含义:行级元素不独占一行,相邻的行级元素在一行排列:行级元素可以控制 ...

  4. Maven服务器搭建

    Nexus服务器软件安装和配置 目前比较流行的使用nexus搭建maven私有服务器,其实很简单,它就是一个web系统,从官方下载的包默认内嵌了jetty容器,所以需要提前安装好JVM,并配置好环境变 ...

  5. 51nod_1253:Kundu and Tree（组合数学）

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1253 全为红边的情况下,ans=C(n,3).假设被黑边相连 ...

  6. serv-u 多域配置

    serv-U后,默认情况下可以通过在浏览器中输入http://IP 的方式登录到serv-u ftp 服务器控制台,也就是说serv-u在80端口监听,这样,如果想配置多个域或者是想在自己电脑上安装A ...

  7. sql操作一般函数

    sql操作一般函数 函数一般语法:SELECT function(列) FROM 表 函数的基本类型是: Aggregate 合计函数:函数的操作面向一系列的值,并返回一个单一的值. Scalar 函 ...

  8. (转) Eclipse Maven 编译错误 Dynamic Web Module 3.1 requires Java 1.7 or newer 解决方案

    场景:在导入Maven项目时候遇到如下错误. 1 问题描述及解决 Eclipse Maven 开发一个 jee 项目时,编译时遇到以下错误:Description Resource Path Loca ...

  9. 数据结构基础：栈(Stack)

    什么是栈?     栈是限制插入和删除只能在同一个位置上进行的表,这个位置就是栈的顶端,对于栈的操作主要有三种形式:入栈(将元素插入到表中),出栈(将表最后的元素删除,也就是栈顶的元素),返回栈顶元素 ...

  10. 基于三台主机部署phpwind

    PHPWind(简称:PW)的使命是让网站更具价值,让更多人从网络中享受便利,以提升生活品质. phpwind是一个基于PHP和MySQL的开源社区程序,是国内最受欢迎的通用型论坛程序之一.phpwi ...