nodejs学习笔记 三 [Express框架 layout的使用 界面库Twitter Bootstrap ]

jimu

1.安装Express
全局模式安装 express
nmp install -g express
安装完成后使用 express -help
但是,安装成功之后居然提示express不是内部或外部命令.
发现比之前版本的express少了很多东西.

express版本更新了,但是我们不知道新版本该怎么玩了.所以我就只好先删除当前安装的express,重新安装以前的版本试试.测试ok.

    此处使用的命令有

    卸载: npm uninstall -g express

    安装指定版本: npm install -g express@3.5.0

    查看版本: express -V

    注意express -V中的V要大写,不然很多版本中会不识别

最新express4.0版本中将命令工具分家出来了(项目地址:https://github.com/expressjs/generator),所以我们还需要安装一个命令工具,命令如下:

npm install -g express-generator

Express在初始化一个项目的时候要指定模块引擎，模式支持Jade和ejs.
2.建立工程
https://github.com/nswbmw/N-blog/wiki/%E7%AC%AC1%E7%AB%A0--%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%8D%9A%E5%AE%A2
express ejs qiDiJiaoYu//后提示 进入qiDiJiaoYu目录，执行npm install命令它会自动安装依赖ejs和express,检查目录中的package.json文件内容。
cd qiDiJiaoYu  //进入项目
npm install  //加入包的依赖

加入ejs视图模板引擎支持
加入文件expand_modules/ejs/index.js
var engine = require("./expand_modules/ejs");
在app中改造引擎
app.engine('ejs', engine);
关于程序启动：
express4.x 的启动是 npm start  不是node app.js端口配置在 /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：存放可执行文件
界面设计
加入Twitter Bootstrap
下载：
https://github.com/twbs/bootstrap
http://getbootstrap.com/2.3.2/index.html
解压后将js\css和图片放入public指定的目录下，再引入jquery.js文件
参看官方用法
制作视图
view下的index.ejs等

bootstrap 研究

////////////////////////相关问题////////////////////////////无法使用layout模板解决方案

express3.x 无法使用layout模板解决方案解决方案，测试可行。

1.安装express-partials。
方法一：运行cmd用npm install express-partials
方法二：在package.json里面的dependencies添加"express-partials": "*"。然后运行cmd并切换至项目目录运行npm install获得最新版。

2.app.js里面引用express-partials。
步骤一：添加引用var partials = require('express-partials');
步骤二：在app.set('view engine', 'ejs');下面添加app.use(partials());

1. <font color="#362e2b"><font face="Arial">var express = require('express')
   
2.   , routes = require('./routes/index')
   
3.   , user = require('./routes/user')
   
4.   , http = require('http')
   
5.   , path = require('path')
   
6.   , partials = require('express-partials');//这里
   
7. var app = express();
   
8. //all environments
   
9. app.set('port', process.env.PORT || 3000);
   
10. app.set('views', __dirname + '/views');
    
11. app.set('view engine', 'ejs');
    
12. app.use(partials());//这里
    
13. </font></font>

复制代码

3.在需要引用模板的地方调用layout:'模版名称'
app.get('/路径', function (req, res) {res.render('.ejs文件的名字', {title: '定义标题',});});

按照以上方案执行后，确实可以正常引用layout模板了，在Express3.x中，新建一个layout.ejs后，通过<%-body %>来引用其它内容。

Node.js + Express 多个 Layout 文件应用

1. app.get('/', function(req, res){
   
2.   res.render('index', {
   
3.     title: 'Express'
   
4.   , layout: 'layout2'
   
5.   });
   
6. });

复制代码

jimu

问题：
express-session deprecated undefined resave option; provide resave option app.js:27:9
express-session deprecated undefined saveUninitialized option; provide saveUninitialized option app.js:27:9



解决方法：
app.use(session({
  ....
  resave:false,
  saveUninitialized:true
}));

jimu

在一个ejs文件中引入另一个ejs文件，如下
<%- partial('posts') %>

新的posts.ejs文件中为什么老显示变量未定义，
如果把posts.ejs中的内容直接复制到引用它的ejs文件中，却能正常显示？



https://cnodejs.org/topic/5374a614d6e2d161494bf110

partial 方法已经不能用了，可以用include代替，如下：

<%- partial('listitem', items) %>

需要改成：<% items.forEach(function(listitem){ %><% include listitem %><% }) %>

lkgmvz

看看吧....












兔兔电影网 www.9edy.com/tutumv.html