改造app.js
- 使用html模板引擎
安装 npm install ejs
- 修改app.js文件如下
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 router = express.Router();
var app = express();
// view engine setup
//app.set('views', path.join(__dirname, 'views'));
//app.set('view engine', 'jade');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// 增加,页面文件放在这个目录下
app.use(express.static(path.join(__dirname, 'static')));
// 增加
/* GET home page. */
router.get('*', function(req, res, next) {
res.render('index');
});
app.use('/', router);
module.exports = app;
- 删除views、routes目录,用不着了,留着也不影响
- 创建目录static
- static/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="description">
<meta name="apple-touch-fullscreen" content="yes" />
<title>test</title>
</head>
<body>
<div>test</div>
</body>
</html>
- SET DEBUG=eber:* & npm start
- 浏览器访问http://localhost:3000,就是新的目录
使用bower
- 在项目根/static目录中增加文件.bowerrc(不需要文件名),文件内容:
{
"directory": "./lib"
}
- 进入static目录
- 执行bower init
- 在static中进行静态网页开发,完成后把static文件夹中的文件复制到web服务器中运行