学习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. MySQL常用基本命令

    启动MySQL /etc/init.d/mysqld start 优雅的关闭数据库的方法 1:使用MySQLadmin mysqladmin -uroot -p123456 shutdown 2:使用 ...

  2. 大数据平台常见异常-zookeeper

    本文主要阐述大数据平台环境zookeeper常见异常和解决方案 1.Connection reset by peer异常 异常说明 我们现在项目有个任务OneMinuteDataSync是用spark ...

  3. Luogu T7152 细胞(递推,矩阵乘法,快速幂)

    Luogu T7152 细胞(递推,矩阵乘法,快速幂) Description 小 X 在上完生物课后对细胞的分裂产生了浓厚的兴趣.于是他决定做实验并 观察细胞分裂的规律. 他选取了一种特别的细胞,每 ...

  4. STL—内存的配置与释放

    上一篇我们介绍了STL对象的构造与析构,这篇介绍STL内存的配置与释放. STL有两级空间配置器,默认是使用第二级.第二级空间配置器会在某些情况下去调用第一级空间配置器.空间配置器都是在allocat ...

  5. Async(异步)(一)

    在谈到异步的概念时,先要了解几个概念了. 什么是进程? 当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源. 而一个进程又是由多个线程所组成的 什么是线程? 线程 ...

  6. Django学习(九)---Templates过滤器及Django shell和Admin增强

    一.Templates过滤器 过滤器属于django模板语言 修改模板中的变量,从而显示不同内容 {{ value | filter }} 举例:{{ list_nums | length}}    ...

  7. JS - 数据类型的值拷贝函数(深拷贝)

    function mottoClone (obj) { if (obj === null || typeof obj !== 'object') return obj; if (obj instanc ...

  8. 图像处理与matlab实例之图像平滑(一)

    一.何为图像噪声?噪声是妨碍人的感觉器官所接受信源信息理解的因素,是不可预测只能用概率统计方法认识的随机误差. 举个例子: 从这个图中,我们可以观察到噪声的特点:1>位置随机 2>大小不规 ...

  9. 【NOIP2016】Day1 T3 换教室(期望DP)

    题目背景 NOIP2016 提高组 Day1 T3 题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有 2n 节课程安排在 n 个时间段上. ...

  10. 手机摄像头扫描识别车牌号,移动端车牌识别sdk

    一.移动端车牌识别应用背景 (技术交流:18701686857  QQ:283870550) 随着经济水平的不断提高,汽车数量的不断激增为汽车管理带来了不小的难度.路边违章停车的现象越来越频繁.现在, ...