how2j.cn

下载区
文件名 文件大小
nodejs.rar 574k
使用站长秘制下载工具
步骤 1 : 静态文件访问   
步骤 2 : 先运行,看到效果,再学习   
步骤 3 : 模仿和排错   
步骤 4 : 准备项目目录   
步骤 5 : 准备静态文件   
步骤 6 : app.js   
步骤 7 : 启动   
步骤 8 : 访问测试地址   
步骤 9 : 访问测试地址   

步骤 1 :

静态文件访问

edit
默认情况下, nodejs 是不提供静态文件访问的,即在工作目录下有一个 test.html,也无法直接通过如下地址直接访问

http://127.0.0.1:8088/test.html

而静态文件,比如 html css js 的访问又是 web 服务器常见的需求,所以本知识点就是讲解如何通过 express 解决这个问题。
步骤 2 :

先运行,看到效果,再学习

edit
老规矩,先下载右上角的可运行项目,配置运行起来,确认可用之后,再学习做了哪些步骤以达到这样的效果。
启动办法:

node app.js

测试地址:

http://127.0.0.1:8088/test.html

如图,可以看到一个js 的弹出框,这个是通过调用 js文件的效果。
关闭这个弹出框之后,还能看到背后的文字。
先运行,看到效果,再学习
在确保可运行项目能够正确无误地运行之后,再严格照着教程的步骤,对代码模仿一遍。
模仿过程难免代码有出入,导致无法得到期望的运行结果,此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码,来定位问题所在。
采用这种方式,学习有效果,排错有效率,可以较为明显地提升学习速度,跨过学习路上的各个槛。

推荐使用diffmerge软件,进行文件夹比较。把你自己做的项目文件夹,和我的可运行项目文件夹进行比较。
这个软件很牛逼的,可以知道文件夹里哪两个文件不对,并且很明显地标记出来
这里提供了绿色安装和使用教程:diffmerge 下载和使用教程
步骤 4 :

准备项目目录

edit
还是在如个目录下开始项目:

e:\project\nodejs
准备项目目录
步骤 5 :

准备静态文件

edit
创建一个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
步骤 8 :

访问测试地址

edit
步骤 9 :

访问测试地址

edit
测试地址:

http://127.0.0.1:8088/test.html

test.html 不仅包含html ,还引用了 css 和 js, 都通过 express 从 Nodejs 那里取到了。
访问测试地址


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-node.js-静态文件 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 1001964108
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图