Express框架搭建本地服务器首页轮播图无法正常显示问题求助

你当前的核心错误是混淆了服务端代码和客户端代码的运行环境：轮播控制逻辑属于前端浏览器执行的代码，你现在把它放在Express服务端的路由模块里运行，服务端不存在document等浏览器DOM对象，自然不可能生效。

具体错误点 #

• slide.js的逻辑本身是前端DOM操作逻辑，不能作为Express路由中间件使用，且代码中调用的showSlides函数未定义，递归调用逻辑不成立
• index.js中多余引入了slide.js作为路由，也不需要将轮播相关变量传递给模板渲染
• 缺失静态资源托管配置，前端无法正确加载JS和图片资源
• 缺失轮播必要的基础CSS样式，动画和显隐逻辑无法正常呈现
• 原始index.js中未引入bodyParser就直接调用，未配置handlebars模板引擎规则

修改方案 #

步骤1：调整项目结构与服务端配置 #

1. 在项目根目录新建public文件夹，下方分别新建js、img子文件夹，将所有轮播图片移入public/img目录
2. 修正index.js代码，补全缺失配置，删除错误的slide相关逻辑：

var express = require('express');
var handlebars = require('express-handlebars').create({ defaultLayout: 'main' });
var dotenv = require('dotenv');
var bodyParser = require('body-parser');
var app = express();

// 托管public目录下的静态资源，前端可直接访问
app.use(express.static('public'));
// 表单解析配置
app.use(bodyParser.urlencoded({ extended: false }));

// 服务端口配置
app.set('port', process.env.PORT || 3000);
// 配置handlebars模板引擎
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');

// 首页路由
app.get('/', (req, res) => {
    res.render('home');
});

// 启动服务
app.listen(app.get('port'), () => {
    console.log('服务运行在 http://localhost:' + app.get('port'));
})

步骤2：修正轮播JS为前端版本 #

在public/js目录下新建slide.js，内容如下：

let slideIndex = 0;
// 封装轮播逻辑
function showSlides() {
    let i;
    const slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) { 
        slideIndex = 1 
    }
    slides[slideIndex - 1].style.display = "block";
    setTimeout(showSlides, 2000); 
}
// DOM加载完成后启动轮播
document.addEventListener('DOMContentLoaded', showSlides);

步骤3：修改HTML模板 #

在HTML的<head>标签内添加轮播基础样式：

<style>
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.mySlides {
  display: none;
}
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
</style>

在HTML的</body>闭合标签前引入前端轮播JS：

<script src="/js/slide.js"></script>

修改完成后重启服务即可正常显示轮播效果。

内容的提问来源于stack exchange，提问作者Bobby