nodejs动态加载动态html、js并且加载静态资源

最新推荐文章于 2024-04-08 08:45:03 发布

nayi_224

最新推荐文章于 2024-04-08 08:45:03 发布

阅读量8.8k

点赞数 1

分类专栏： nodejs 文章标签： nodejs

本文链接：https://blog.csdn.net/nayi_224/article/details/98480814

版权

nodejs 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

网上可以很轻松的找到动态加载资源、或者加载动态页面、或者加载静态资源的文章，但是找了好久都没找到将这几个功能整合起来的文章。于是决定自己写一个。

本文通过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);
    }
});

html

<!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，否则会有奇怪的问题。

nayi_224

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
nodejs动态加载动态html、js并且加载静态资源

网上可以很轻松的找到动态加载资源、或者加载动态页面、或者加载静态资源的文章，但是找了好久都没找到将这几个功能整合起来的文章。于是决定自己写一个。本文通过nodejs，实现真正像个服务器一样动态加载资源、加载动态页面（html、js）、加载静态资源（如css、jpg）。项目目录结构nayi224--pages----startup.js----Test.html----test222....
复制链接

扫一扫