本文通过nodejs，实现真正像个服务器一样动态加载资源、加载动态页面（html、js）、加载静态资源（如css、jpg）。
项目目录结构
nayi224
--pages
----startup.js
----Test.html
----test222.css
--resources
----css
------test.css
------bg.jpg
nodejs
var express = require('express');
var path = require('path');//暂时没用上
var swig = require('swig');
var fs = require('fs');
var app = express();
var LOCAL_APP_URL = '/workspace/nayi224/';//项目在本地硬盘上的根目录（绝对路径）
var APP_NAME = '/nayi224';//项目名
swig.setDefaults({
cache: false
})
app.set('view cache', false);
app.set('views', '/');
app.set('view engine', 'html');
app.engine('html', swig.renderFile);//swig，生成动态文件。相当于jstl之流。
app.engine('js', swig.renderFile);
app.listen(3000, function () {
console.log(new Date().toLocaleTimeString());
console.log('app is listening at port 3000');
});
//app.use(express.static(path.join(__dirname, 'resources'))); //好像没什么用
app.get(APP_NAME + '/*', function (req, res, next) {
'use strict';
//console.log(req.originalUrl);
var temp = req.originalUrl;
temp = temp.substr(temp.indexOf(APP_NAME + "/") + APP_NAME.length);
var fileName = temp.substr(temp.lastIndexOf("/") + 1);
var fileType = fileName.indexOf(".") == "-1" ? "html" : fileName.substr(fileName.indexOf(".") + 1);
res.type(fileType);
//res.set('Content-Type', 'text/html'); //.type的备选方案。.type方法中应该已经做好了映射。
if(fileType == "html" || fileType == "js"){
res.render(LOCAL_APP_URL + temp, {
context: APP_NAME
});
}else {
fs.createReadStream(LOCAL_APP_URL + temp).pipe(res);
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="{{ context }}/resources/css/test.css" charset="utf-8">
<link rel="stylesheet" type="text/css" href="test222.css" charset="utf-8">
<script src="{{ context }}/resources/js/test.js" type="text/javascript" charset="utf-8"></script>
</head>
<body >
<div id="ddd" style="height: 50px;"></div>
aaaa
<img src="{{ context }}/resources/css/bg.jpg" alt="">
</body>
</html>
http://localhost:3000/nayi224/pages/test 即可访问到Test.html页面。
------------------------------------------------------------------------------
简单解释一下。所有路径都使用的绝对路径，动态获取的绝对路径。后台通过截取url来获取资源在硬盘上的路径。若获取的是html或者js，则使用swig来渲染，并传入一些系统参数，比如我这里传的是项目名。若请求的是其他静态资源，比如css或jpg，则用fs直接加载。注意设置返回的Content-Type，否则会有奇怪的问题。
