二、改造express项目为html

改造app.js

  1. 使用html模板引擎

安装 npm install ejs

  1. 修改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;
  1. 删除views、routes目录,用不着了,留着也不影响
  2. 创建目录static
  3. 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>
  1. SET DEBUG=eber:* & npm start
  2. 浏览器访问http://localhost:3000,就是新的目录

使用bower

  1. 在项目根/static目录中增加文件.bowerrc(不需要文件名),文件内容:
{
    "directory": "./lib"
}
  1. 进入static目录
  2. 执行bower init
  3. 在static中进行静态网页开发,完成后把static文件夹中的文件复制到web服务器中运行
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容