用express搭建一个小游戏服务器环境

最新推荐文章于 2024-01-27 06:18:24 发布

红孩儿2011

最新推荐文章于 2024-01-27 06:18:24 发布

阅读量564

点赞数

CC 4.0 BY-SA版权

分类专栏： node 文章标签：前端

本文链接：https://blog.csdn.net/qq_26642611/article/details/113736416

node 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何使用Express搭建一个服务器环境来运行包含jquery的小游戏。首先通过npm安装Express和生成项目，然后配置app.js以支持html文件，并解决跨域问题。将小游戏的静态资源放入相应目录，并通过axios请求接口。最后，由于接口处理跨域，将localhost替换为特定IP和端口，重新运行服务器，成功展示游戏页面并能正常通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小游戏主题部分采用到的js库为：jquery，因为涉及到比较多的dom操作。主要做法为：html+css+js。主要文件夹为index.html和paoku，paoku文件夹里有images js css
在这里插入图片描述

涉及到请求接口，所以需要搭建一个服务器环境，详细操作文档：
一、步骤
1、npm install -g express
2、npm install -g express-generator
3、express helloworld
4、cd helloworld
5、npm install
6、npm start

然后新创建的helloworld就已经运行在3000端口上，访问http://localhost:3000/就看到熟悉的页面了

二、修改文件拓展名，详细操作文档
1、修改 app.js 文件，及修改引擎设置文件

var ejs = require('ejs');
app.engine('html',ejs.__express);
app.set('view engine', 'html');

2、设置具体的运行文件 .ejs 后缀全部更改为 .html 后缀。

三、将小游戏文件放到项目里，保持index.html与所引入的图片样式js相对目录不变
将小游戏 index.html 放到 helloworld\views 目录里
将小游戏 paoku 放到 helloworld\public 目录里

四、用axios请求接口，在query.js做一些axios配置

在这里插入图片描述

五、由于接口域名处理跨域，访问时需要将localhost改为192.168.5.112 端口改为8080
在这里插入图片描述

六、重新运行环境
http://192.168.5.112:8080/
游戏页面出来了，接口也能跑通
在这里插入图片描述