1、在项目下新建一个public文件夹，里面有一个index.html

image.png

2、在server.js中使用app.use(express.static('静态资源目录'))来托管静态资源

//1、引入express模块
const express = require('express');
//2、创建web服务器
const app = express();

// 使用app.use托管静态资源，通过express.static('静态资源目录，一般叫public')
app.use(express.static('public'))

// 3、注册路由
app.get('/',function(req,res){
res.send([
  {user:'Lucy'}
])
});

//4、设置端口
app.listen(3000,()=>{
  console.log('App listening on port 3000!');//启动服务器后会打印这句话
})

3、保存后nodemon自动重启服务器

image.png

4、在浏览器中通过http://localhost:3000/index.html直接访问index.html页面

image.png

5、我们还可以定义指定文件夹，就代表访问public里面的静态资源必须在通过指定文件夹来访问

在server.js中的修改：app.use('指定文件夹',express.static('静态资源目录'))

//1、引入express模块
const express = require('express');
//2、创建web服务器
const app = express();

// 使用app.use托管静态资源，通过express.static('静态资源目录，一般叫public')
// 访问public里面的静态资源一定要通过/static文件夹下才能访问
app.use('/static',express.static('public'))

// 3、注册路由
app.get('/',function(req,res){
res.send([
  {user:'Lucy'}
])
});

//4、设置端口
app.listen(3000,()=>{
  console.log('App listening on port 3000!');//启动服务器后会打印这句话
})

6、在浏览器中通过http://localhost:3000/static/index.html访问到/static文件夹下的index.html

image.png