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

灰太狼 2021-09-30 14:20 556阅读 0赞

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

本文通过nodejs，实现真正像个服务器一样动态加载资源、加载动态页面（html、js）、加载静态资源（如css、jpg）。

#### 项目目录结构 ####

nayi224
    --pages
    ----startup.js
    ----Test.html
    ----test222.css
    --resources
    ----css
    ------test.css
    ------bg.jpg

出于测试方便考虑，目录结构略奇葩，别也跟着学了。

#### nodejs ####

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