Estoy trabajando en la aplicación NodeJs.

Creé la ruta para la página de administración y también hice un diseño para ella.

app.js

app.engine('.hbs', expressHsb({defaultLayout: 'default', extname: '.hbs'}));
app.set('view engine', '.hbs');

/* configure express */
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(express.static(path.join(__dirname, '/public')));

/* routes */
const adminRoutes = require('./routes/adminRoutes');

app.use('/admin', adminRoutes);
app.use('/posts', adminRoutes);

La estructura de la carpeta de mi aplicación se ve así:

enter image description here

Además, la página de administración tiene una parte para crear publicaciones que está en la ruta admin/posts/create.

adminControllers.js

module.exports = {
    index: (req, res) => {
        res.render('admin/index');
    },

    createPosts: (req, res) => {
        res.render('admin/posts/create');
    }
};

adminRoutes.js

router.route('/')
    .get(adminController.index);

router.route('/posts')
    .get(adminController.getPosts)
    .post(adminController.submitPosts);

    router.route('/posts/create')
    .get(adminController.createPosts);

Cuando inicio mi aplicación y voy a la página de administración, todo funciona bien, pero cuando entro en crear parte de publicación que tiene forma de mis hojas de estilo y archivos js no se puede acceder.

En la página hay una estructura html pero no hay funcionalidades ni estilo y cuando veo el código fuente en el navegador y, por ejemplo, hago clic en un enlace como

 <link href="css/sb-admin-2.min.css" rel="stylesheet">

Recibo el siguiente error:

Cannot GET /admin/posts/css/sb-admin-2.min.css

Como si estuviera buscando la carpeta css en la carpeta de publicaciones y no en público.

El diseño del administrador se ve así:

{{> admin/admin-header }}

<body id="page-top">
  <!-- Page Wrapper -->
  <div id="wrapper">

    <!-- Sidebar -->
    {{> admin/admin-sidebar}}
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

      <!-- Main Content -->
      <div id="content">

        <!-- Topbar -->
        {{> admin/admin-topNav }}
        <!-- End of Topbar -->

        <!-- Begin Page Content -->
        <div class="container-fluid">
          {{{body}}}
        </div>
        <!-- /.container-fluid -->

      </div>
      <!-- End of Main Content -->

      <!-- Footer -->
      {{> admin/admin-footer}}
      <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

  </div>
  <!-- End of Page Wrapper -->

Todo funciona bien para la página de administración, pero si voy al enlace en la página de administración

<a class="collapse-item" href="/admin/posts/create">Create new Post</a>

Simplemente no se carga como las hojas de estilo o los archivos js ya mencionados, como si esa parte del código no perteneciera como body al diseño de administrador.

No estoy seguro de por qué sucede esto. Cualquier consejo muy apreciado.

2
user9347049 22 sep. 2019 a las 15:22

1 respuesta

La mejor respuesta

css/sb-admin-2.min.css es un enlace relativo. Cámbielo a /css/sb-admin-2.min.css.

Técnicamente sigue siendo un enlace relativo, ya que no incluye protocolo ni host, pero lo importante en este caso es que la ruta es absoluta

2
some 22 sep. 2019 a las 12:30