使用express设置静态目录，创建服务，响应get请求(二)--将自己编写的简单2048通过express实现页面展示（静态）

原创已于 2022-03-07 17:31:30 修改 · 602 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-03-07 17:19:25 首次发布

项目专栏收录该内容

6 篇文章

订阅专栏

本文档介绍了如何使用Express框架搭建一个简单的服务器来托管2048项目的静态文件。首先，将所有css、js和html文件放入public文件夹。然后通过npm初始化项目并安装Express依赖。在server.js中配置Express监听3000端口，并设置静态文件托管。当访问localhost:3000时，服务器将返回index.html。如果使用虚拟地址，需更新index.html中资源引用路径。

（1）将编写2048项目的所有的css,js和html文件都放入文件夹public中（如下图），接着同样在终端中输入npm init -y生成npm项目，输入npm install express载入express依赖。（详细可见https://blog.youkuaiyun.com/ShiningDays/article/details/123294577）
文件夹目录
在这里插入图片描述

（2）设置server.js

const express = require('express');//在node应用中载入express
const app = express();//建立一个express实例
const expressPort=3000;//指定一个端口，端口号
// 使用listen进行监听
app.listen(expressPort,() => {
   console.log("running……on" + expressPort);
   })
// 静态文件的托管--这里使用了虚拟地址，也可以不使用这个参数
app.use('/static',express.static('public'));
// 接下来告诉服务器端口在接收到get请求后返回的结果
app.get('/',(req,res,next)=>{
   // 返回index.html作为显示
   res.sendFile(__dirname +'/public/index.html')//需要绝对路径
})