javascript - NodeJS 服务器在检索部分时返回 505/404 错误

Question

我正在使用 M.E.A.N 堆栈构建和应用程序。

我正在使用 Angular Ui Router 进行路由，但我似乎无法正确路由部分组件。

使用以下方法成功调用主视图的链接:

.state("framework", {
      url:"/genetic",
      templateUrl: "/partials/framework/main.html",
      css: "/stylesheets/genetic/global/main.css"
})

但是当我尝试使用相同的格式调用部分时，我遇到了 “505 内部服务器错误”。

.state(framework.buttons", {
      url:"/framework/buttons",
      templateUrl: "/partials/framework/buttons.html",
      css: "/stylesheets/framework/global/main.css"
})

我尝试设置相对于 (main.html) 的路径，但收到错误消息: “404 未找到”。

.state("framework.buttons", {
      url:"/framework/buttons",
      templateUrl: "buttons.html",
      css: "/stylesheets/framework/global/main.css"
})

应用结构:

+--public
+--routes
   +--index.js
   +--users.js
+--views
|  +--partials
|  |  +--admin
|  |  +--framework
|  |  |  +--app
|  |  |  |  +--footer.jade
|  |  |  |  +--navigation-list.jade
|  |  |  |  +--app.jade
|  |  |  +--buttons
|  |  |  |  +--default
|  |  |  |  +--disabled
|  |  |  |  +--document-overview
|  |  |  |  +--fluid
|  |  |  |  +--group-default
|  |  |  |  +--group-vertical
|  |  |  |  +--icon
|  |  |  |  +--sizing
|  |  |  |  +--buttons.jade
|  |  |  +--forms
|  |  |  +--buttons.html
|  |  |  +--main.html
|  |  +--tour
|  |  +--user
|  +--error.jade
|  +--index.jade
|  +--index.html
|  +--layout.jade
+--app.js
+--Gruntfile.js
+--package.json

应用程序.js

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 routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

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

// 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')));

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

// 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 handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

索引.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index.html', { title: 'Home' });
});

router.get('/partials/:name', function(req, server) { 
    var name = req.params.name; server.render('partials/' + name); 
});

router.get('/partials/framework/:name', function(req, server) { 
    var name = req.params.name; server.render('partials/genetic/' + name); 
});

router.get('/partials/tour/:name', function(req, server) { 
    var name = req.params.name; server.render('partials/tour/' + name); 
});

module.exports = router;

Angular 用户界面路由

var app = angular.module('app', [
  'ui.router',
  'door3.css',
  'appControllers'
]);

app.config(['$stateProvider', '$urlRouterProvider', 
  function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/framework");
  //
  // Now set up the states
  $stateProvider
    .state("framework", {
      url:"/framework",
      templateUrl: "/partials/framework/main.html",
      css: "/stylesheets/framework/global/main.css"
    })
    .state("framework.buttons", {
      url: "/buttons",
      templateUrl: "/partials/framework/buttons.html",
      css: ["stylesheets/framework/buttons/main.css", "/stylesheets/genetic/global/main.css"]
})

}]);

Jade :

include navigation-list
main
    nav.group.bar
        ul.breadcrumb.col.collapse.large-6-12
            li
                a(href="#") Getting Started
            li
                a(href="#") Buttons
    div(ui-view class="appview" id='appview')

Answer 1

根据您的应用程序结构，buttons.html 位于 buttons 文件夹中。

当前您的 templateUrl 是

templateUrl: "/partials/framework/buttons.html",

但根据你的申请结构应该是

templateUrl: "/partials/framework/buttons/buttons.html",

我想这应该可行，让我知道我还没有找到NOT加载局部 View 的任何其他原因。它不应该给出 "404 Not Found" 如果部分在框架文件夹内而不是其中的任何子文件夹。