码迷,mamicode.com
首页 > Web开发 > 详细

使用node.js进行web开发

时间:2015-02-12 15:41:08      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:

1.安装express

 npm install -g express-generator

4.0+版本中将命令工具分出来了,所以可以不安装express,但必须要安装express-generator

 

2.新建工程

初始化一个 express 项目并安装所需模块,模板引擎默认格式是jade

express   文件夹名

要建ejs格式,需要加上-e

cd 文件夹名 && npm install

 

新建服务器

node bin/www 或 supervisor bin/www

技术分享

 

 

技术分享

app.js:启动文件,或者说入口文件
package.json:存储着工程的信息及模块依赖,当在 dependencies 中添加依赖的模块时,运行 npm install,npm 会检查当前目录下的 package.json,并自动安装所有指定的模块
node_modules:存放 package.json 中安装的模块,当你在 package.json 添加依赖的模块并安装后,存放在这个文件夹下
public:存放 image、css、js 等文件
routes:存放路由文件
views:存放视图文件或者模版文件
bin:存放可执行文件

 

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;

当访问主页时,调用jade模板引擎,来渲染 index.jade 模版文件(即将 title 变量全部替换为字符串 Express),生成静态页面并显示在浏览器中。

 

index.ejs  模板文件,routes/index.js调用的模板。功能是显示引用的变量,即res.render函数第二个参数传入的对象的属性。

<!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>

 

layout.ejs

默认情况下所有的模板都继承自layout.jade,即block content是独特的内容,其余部分共有,可以看作是页面框架、

 

3.路由控制

 

创建路由规则

在Index.js后添加

router.get(‘/‘, function(req, res, next) {
  res.render(‘index‘, { title: ‘Express‘ });
});

 

路径匹配

router.get(‘/user/:username‘,function(req,res) {
    res.send(‘user:‘ + req.params.username);
})

技术分享

 

路径规则/user/:username会被自动编译成正则表达式,类似于 \ /user\ /( [^\ /]+)\ /?的形式。路径参数可以在相应函数通过req.params的属性访问。

 

REST风格的路由规则

REST:表征状态转移,是一种基于HTTP协议的网络应用的接口风格,充分利用HTTP的方法实现统一风格接口的服务。

GET:请求获取指定资源

POST:向指定资源提交数据

PUT:请求服务器存储一个资源

DELETE:请求服务器删除指定资源

 

这4种方法通常实现的功能

GET:获取

POST:新增

PUT:更新

DELETE:删除

 

express支持同一路径绑定多个路由相应函数。但请求总是被前一条路由规则捕获,但后面的规则会被忽略。

app.all(‘/user/:username‘, function(req, res) {
   res.send(‘all method captured‘);
});

app.all(‘/user/:username‘, function(req, res) {
   res.send(‘user: ‘ + req.params.username);
});

 

路由控制权转移的方法, 即回调函数的第三个参数next,通过调用next(),会将路由控制权转移给后面的规则。

router.all(‘/user/:username‘, function (req, res, next) {
   console.log(‘all method captured‘);
   next();
});

router.all(‘/user/:username‘, function (req, res) {
   res.send(‘user: ‘ + req.params.username);
});

访问http://localhost:3000/user/sura时,终端打印了‘all method captured,而且浏览器中显示了user: sura。这说明请求先被一个条路由规则捕获,完成console.log使用next()转移控制权,又被第二条规则捕获,向浏览器返回信息。

 

可以实现中间件,而且能提高代码的复用程度。

 

模板引擎

是一个页面模板根据一定的规则生成HTML的工具。模板引擎的功能是将页模板和要显示的数据结合的HTML页面,它既可以运行在客户端又可以运行在服务器端,大多数时候它都在服务器端直接被解析为HTML,解析完成后再传输给客户端。

在MVC架构中,模板引擎包含在服务器端,控制权得到用户请求后,从模型获取数据,调用模板引擎。模板引擎以数据和页面为输入,生成HTML页面,然后返回给控制器,由控制器返回给客户端。

技术分享

 

app.js设置模板引擎和页面模板的位置

app.set(‘views‘, path.join(__dirname, ‘views‘));
app.set(‘view engine‘, ‘ejs‘);

 

routes/index.js的exports.index函数调用模板引擎

res.render(‘index‘, { title: ‘Express‘ });

res.render的功能是调用模板引擎,并将 其产生的页面直接返回给客户端。它接收两个参数,第一个是模板的名称,即views目录下的目标文件名,不包含扩展名;第二个参数是传递给模板的数据。

 

index.ejs

    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>

 

<% code %>:javascript代码

<%= code %>:显示替换过HTML特殊字符的内容

<%- code %>:显示原始HTML内容

 

页面布局

layout.ejs是一个页面布局模板,它描述了整个页面的框架结构,默认情况下每个独立的页面都继承自这个框架,替换掉<%- body %>部分。因为一般为了保持整个网站的一致风格,HTML页面的<head>部分以及页眉页脚中的大量内容是重复的。

3.X版本后不支持layout

 

方法1:include

把index.html页面切分成3个部分:header.html, index.html, footer.html

header.html, 为html页面的头部区域

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%=: title %></title>
<!-- Bootstrap -->
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> -->
</head>
<body screen_capture_injected="true">

 

index.html, 为内容显示区域

<% include header.html %>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<% include footer.html %>

 

footer.html,为页面底部区域

<script src="/javascripts/jquery-1.9.1.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
</body>
</html>

 

 

方法2:自行添加layout

在package.json里面的dependencies添加"express-partials": “*”

   "dependencies": {
       "express": "3.1.0",
       "ejs": "*",
       "express-partials": "*"
     }

 

运行cmd并切换至项目目录运行npm install获得最新版

在app.js引用express-partials

var partials = require(‘express-partials‘);

在app.set(‘view engine’, ‘ejs’);下面添加app.use(partials());

 

使用node.js进行web开发

标签:

原文地址:http://www.cnblogs.com/surahe/p/4284932.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!