俗话说好记性不如烂笔头,在看了两天文档后,在这里准备把自己学到的东西写成文章记录下来。
安装全局模块
npm install -g express express-generator suptervisor
// express-generator Express 应用生成器
// suptervisor 监视你对代码的改动,并自动重启 Node.js ,必须全局安装
快速生成项目
express -e blog // -e 使用ejs 模板引擎生成项目
手动创建项目
1.安装依赖
npm init
npm install express ejs --save
// 项目结构
blog
├─app.js // 入口文件
├─package.json // 项目依赖配置
├─node_modules // 存放项目的依赖库
├─public // 静态文件资源目录
│ ├─images
│ ├─js
│ └─styles
└─views // 视图文件(ejs模板 或jade 模板)
2.编写入口文件
// 引用模块
var express = require('express');
var path = require('path');
var ejs = require('ejs');
var app = express();
app.set('views', path.join(__dirname,'views')); // 设置视图文件目录
app.set('view engine' , 'ejs'); //设置模板引擎为ejs
app.use( express.static(path.join(__dirname, 'public')) ); // 配置静态资源目录
// 路由规则
app.get('/', function(request, response){
response.send('Hello Node.js')
});
app.listen(3000); // 监听 3000 端口
console.log('server started at port 3000');
3.修改模板后缀
默认ejs模板只支持渲染以ejs为扩展名的文件,可能在使用的时候会觉得它的代码书写方式很不爽还是想用html的形式去书写。
在这里可以使用engine 注册模板引擎的函数,让他处理指定后缀名的文件
/*
* 将上面的 app.set('view engine' , 'ejs')
* 修改成
* */
app.set('view engine' , 'html'); //修改模板文件的后缀名为html
app.engine('.html' , ejs.__express); //"__express",ejs模块的一个公共属性,表示要渲染的文件扩展名。
接下来在控制台跑起来看看
浏览器访问 http://localhost:3000 成功输出
到这里项目就已经初步搭建起来了。
4.路由模块化
在根目录新建routes 文件夹
// routes/index.js
var express = require('express');
var router = express.Router(); //使用 express.Router 类创建模块化、可挂载的路由句柄
// 访问根路由 渲染 index 模板
router.get('/', function (req, res) {
res.render('index');
});
module.exports = router;
添加模板, 在views文件夹下新建 index.html 模板 (就一普通html文件)
修改入口文件app.js
// 引入 路由模块
var router = require('./routes/index');
app.use('/', router);
将写在app.js 中的路由删掉。
到这里整个项目已经搭建起来了,大功告成。
//app.js
// 引用模块
var express = require('express');
var path = require('path');
var ejs = require('ejs');
var app = express();
var port = process.env.PORT || 3000;
// 引入 路由模块
var router = require('./routes/index');
app.use('/', router);
// 设置视图文件目录
app.set('views', path.join(__dirname,'views'));
// app.set('view engine' , 'ejs'); //设置模板引擎为ejs
app.set('view engine' , 'html'); //设置模板引擎为html
app.engine('.html' , ejs.__express);
app.use( express.static(path.join(__dirname, 'public')) ); // 配置静态资源目录
app.listen(port);
console.log('server started at port ' + port);
ps: 第一次写文章,请多加指教。