如何在将 module.export 中的路由保留在不同文件中的同时提供 html、css 和 js？现在只提供 html

Posted 2023-03-07

【中文标题】如何在将 module.export 中的路由保留在不同文件中的同时提供 html、css 和 js？现在只提供 html

【英文标题】：How can I serve the html, css, and js all while keeping the routes inside a module.export in a different file? Right now only html is served

【发布时间】：2018-04-26 20:01:45

【问题描述】：

我是一个使用 express 的新手，因此我在制作这个网络应用程序时遇到了麻烦。

我的路由在 module.export 中的另一个名为 route.js 的文件中，我在 app.js 中管理所有这些，我希望能够提供 html 页面并将其保存在模块中。我已经使用 sendFile 完成了，但它也不服务 CSS 和 JS。我能做些什么来解决这个问题？

app.js

//setup
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();
var port = process.env.PORT || 3000;
var mongoose = require('mongoose');
var flash    = require('connect-flash');
var passport = require('passport');
var session = require('express-session');
var path = require('path');

//db
var configDB = require('./config/database.js');
mongoose.connect(configDB.url);
require('./config/passport')(passport);

// view engine setup
//app.set('views', path.join(__dirname, 'views'));
//app.set('view engine', 'jade');
app.set('view engine', 'ejs');



//routes
//app.use('/', index);
//app.use('/users', users);


// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: false ));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));



//passport
app.use(session(secret: 'secret'));
app.use(passport.initialize());
app.use(passport.session());
app.use(flash());

//routes
require('./app/routes.js')(app, passport);


// catch 404 and forward to error handler
/*app.use(function(req, res, next) 
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
);*/

// error handler
/*app.use(function(err, req, res, next) 
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : ;

  // render the error page
  res.status(err.status || 500);
  res.render('error');
);*/

module.exports = app;

//launch
app.listen(port);
console.log('Website starting on port ' + port);

routes.js

module.exports = function(app,passport) 
...
    //--timesheet section---
    app.get('/timesheet', function(req, res) 
        var path = require('path');
        res.sendFile(path.resolve('public/timesheet.html'));
    );
...

【问题讨论】：

为什么不简单地使用 express.static 来提供这些文件？

【参考方案1】：

您想使用view engine 和static 目录。你已经有了一些代码。

你的视图引擎使用.ejs:

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

你可以定义你的静态并指定一个路径前缀：

app.use('/assets', express.static(path.join(__dirname, 'public')));

在您的views 目录中，将您的html 以.ejs 扩展名，例如timesheet.ejs。然后，您可以为您的 css/js/image 文件创建一个 assets 目录，并使用 /assets/style.css 在您的 timesheet.ejs 中引用它们。

最后，在您的路线中，您需要渲染模板：

res.render('timesheet')