Question

我一直试图用我的申请来解决这个问题几个星期，但根本没有运气。我尝试了多种方法都失败了。如果您可以查看下面的代码并查看问题所在，我找不到它。

我正在使用带有Express，Handlebars和MongoDb的Node.js作为应用程序。

＆＃13;

app.js

// Bring in packages
const express = require('express');
const path = require('path');
const exphbs = require('express-handlebars');
const methodOverride = require('method-override');
const flash = require('connect-flash');
const session = require('express-session');
const bodyParser = require('body-parser');
const jquery = require('jquery');
const moment = require('moment');
const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');
const passport = require('passport');

const app = express();

// Load routes
const webapp = require('./routes/webapp');

// Passport config
require('./config/passport')(passport);

// Db config
const db = require('./config/database');

// Map global promise - get rid of warning
mongoose.Promise = global.Promise;

// Connect to Mongoose
mongoose.connect(db.mongoURI, {
    useMongoClient: true
  })
  .then(() => console.log('MongoDB Connected...'))
  .catch(err => console.log(err));

// Load user model
require('./models/Users');
const User = mongoose.model('users');

// Handlebars Middleware - https://github.com/ericf/express-handlebars
app.engine('handlebars', exphbs({
  defaultLayout: 'main'
}));
app.set('view engine', 'handlebars');

// Body Parser Middleware - https://github.com/expressjs/body-parser
app.use(bodyParser.urlencoded({
  extended: false
}));
app.use(bodyParser.json());

// Static folder middleware
app.use(express.static(path.join(__dirname, 'public')));
app.use('/modules', express.static(path.join(__dirname, 'node_modules')))

// Method override middleware - https://github.com/expressjs/method-override
app.use(methodOverride('_method'));

// Express-session middleware - https://www.npmjs.com/package/express-session
app.use(session({
  secret: 'secret',
  resave: true,
  saveUninitialized: true
}));

// Connect-flash middleware - https://github.com/jaredhanson/connect-flash
app.use(flash());

// Passport middleware - http://passportjs.org/docs
app.use(passport.initialize());
app.use(passport.session());

// Global variables
app.use((req, res, next) => {
  res.locals.success_msg = req.flash('success_msg');
  res.locals.error_msg = req.flash('error_msg');
  res.locals.error = req.flash('error');
  res.locals.user = req.user || null;
  next();
});


webapp.js

const express = require('express');
const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');
const passport = require('passport');
const jquery = require('jquery');
const moment = require('moment');
const router = express.Router();

// Load Helper
const {
  ensureAuthenticated
} = require('../helpers/auth');

// Load user model
require('../models/Users');
const User = mongoose.model('users');

//App schedules route
router.get('/schedules', ensureAuthenticated, (req, res) => {
  res.render('webapp/schedules');
});

＆＃13;

main.handlebars

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <!-- Custom styles for this template-->
  <link href="css/sb-admin.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <!-- Link and script for calendar -->
  <link rel="stylesheet" href="../modules/fullcalendar/dist/fullcalendar.css" />
  <script src="../modules/jquery/dist/jquery.min.js"></script>
  <script src="../modules/moment/min/moment.min.js"></script>
  <script src="../modules/fullcalendar/dist/fullcalendar.js"></script>

  <script>
    $(document).ready(function() {

      // page is now ready, initialize the calendar...

      $('#calendar').fullCalendar({
        // put your options and callbacks here
      })

    });
  </script>

  <title>Workmate</title>
</head>

schedules.handlebars

<div id='calendar'></div>

＆＃13;

当此代码运行时，页面显示除导航栏以外的空白，我知道它的渲染权，因为如果我插入一个头标记，它就会出现。我已经查看了Chrome上的开发人员选项并收到此错误。

jQuery.Deferred exception: $(...).fullCalendar is not a function TypeError: $(...).fullCalendar is not a function
at HTMLDocument.<anonymous> (http://localhost:5000/webapp/schedules:75:20)
at l (http://localhost:5000/modules/jquery/dist/jquery.min.js:2:29375)
at c (http://localhost:5000/modules/jquery/dist/jquery.min.js:2:29677) undefined

提前感谢您的帮助。

Fullcalendar JavaScript未在Nodejs中运行

0 个答案: