标签:数据 format prim roc expr module 依赖库 http row
学习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 %>
标签:数据 format prim roc expr module 依赖库 http row
原文地址:http://www.cnblogs.com/webSong/p/7425900.html