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

Question

我是使用 express 的新手，因此我在制作这个网络应用程序时一头雾水。

我的路由位于 module.export 中名为 route.js 的不同文件中，我在 app.js 中管理所有这些，我希望能够提供 HTML 页面并将其保存在模块中。我已经使用 sendFile 这样做了，但它也不提供 CSS 和 JS。我该怎么做才能解决这个问题？

应用程序.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);

路由.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'));
    });
...
}

Answer 1

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

使用 .ejs 的 View 引擎:

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 中引用它们>.

最后，在您的 route ，您需要渲染模板:

res.render('timesheet')