|
|
|
步骤 2 : 先运行，看到效果，再学习 步骤 3 : 模仿和排错 步骤 4 : 准备项目目录 步骤 5 : 准备静态文件 步骤 6 : app.js 步骤 7 : 启动 步骤 8 : 访问测试地址 步骤 9 : 访问测试地址
默认情况下， nodejs 是不提供静态文件访问的，即在工作目录下有一个 test.html，也无法直接通过如下地址直接访问
http://127.0.0.1:8088/test.html 而静态文件，比如 html css js 的访问又是 web 服务器常见的需求，所以本知识点就是讲解如何通过 express 解决这个问题。
老规矩，先下载右上角的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。
启动办法： node app.js 测试地址： http://127.0.0.1:8088/test.html 如图，可以看到一个js 的弹出框，这个是通过调用 js文件的效果。 关闭这个弹出框之后，还能看到背后的文字。
在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码，来定位问题所在。 采用这种方式，学习有效果，排错有效率，可以较为明显地提升学习速度，跨过学习路上的各个槛。 推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。 这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来 这里提供了绿色安装和使用教程：diffmerge 下载和使用教程
还是在如个目录下开始项目：
e:\project\nodejs
创建一个public 目录，然后里面放上 html, css 和 js
其中 test.html 就放在public 下 而css 和 js 分别位于 public/static/css/style.css public/static/js/how2j.js
<html>
<head>
<link rel="stylesheet" type="text/css" href="static/css/style.css" />
</head>
<body>
<div class="content">
Hello Express
</div>
</body>
<script src="static/js/how2j.js"></script>
</html>
div.content{
border:1px solid gray;
width:500px;
margin:50px auto;
color:skyblue;
padding:20px;
}
alert("hello from static/js/how2j.js");
导入 express 和 path 模块
var express = require('express') var path = require('path') 创建 express 对象 var app = express() 设置静态访问目录 app.use(express.static(path.join(__dirname, 'public'))) __dirname 就是工作目录 public 就是 public 目录。。。 path_join 相当于关联父目录和子目录 express.static 就是指定静态目录的位置 监听8088端口 app.listen(8088); var express = require('express')
var path = require('path')
var app = express()
app.use(express.static(path.join(__dirname, 'public')))
app.listen(8088);
var express = require('express')
var path = require('path')
var app = express()
app.use(express.static(path.join(__dirname, 'public')))
app.listen(8088);
使用如下命令启动：
node app.js
测试地址：
http://127.0.0.1:8088/test.html test.html 不仅包含html ，还引用了 css 和 js, 都通过 express 从 Nodejs 那里取到了。
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2019-12-09
__dirname！！！那原来是两个下划线！！！
2019-09-02
访问路径错了？
1 个答案
ALI19991103 跳转到问题位置 答案时间：2019-11-12 http://127.0.0.1:8088/test.html
不要static，static目录是放css和js的
答案
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||||
