1
votes

les fichiers statiques ne se chargent pas dans mon projet

J'ai du mal à résoudre le problème que les fichiers statiques ne se chargent pas dans mon petit projet d'application.

app.use ('/ assets', express.static ('public')); j'imagine. cette expression ne fonctionne pas.

Fichier app.js .

<html>
<head>
    <title>Todo List</title>
    <link rel="stylesheet" href="/assets/styles.css">
    <script
          src="https://code.jquery.com/jquery-1.12.4.min.js"
          integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
          crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/assets/styles.css" type="text/css" />      
</head>
<body>
    <h1>My todo list</h1>
    <div id="todo-table">
        <form>
            <input type="text" name="item" placeholder="Add new item..." required />
            <button type ="submit">Add item</button>    
        </form>
        <ul>
            <% for(var i=0;i<todos.length;i++){ %>
                <li><%= todos[i].item %></li>
            <% } %>
        </ul>
    </div>
     <script src="..public/assets/todo-list.js"></script>    
   </body>
  </html>

todo.ejs file

var express = require('express');
var todoController = require('./controllers/todoControllers');
var app = express();

//set up template engine
app.set('view engine','ejs');

// static files
app.use('/assets', express.static('public'));

//fire to controllers

todoController(app);

//listen to port
app.listen(3000); 
console.log('you are listening to port: 3000');

quand je vais sur localhost: 3000 et inspecte la page, il y a une erreur selon laquelle aucun fichier css n'est chargé et aucun fichier js n'est chargé.


1 commentaires

vous devrez peut-être joindre des chemins. Affichez la carte de l'arborescence de vos projets. ex: app.use ('/ assets', path.join (__ dirname, '/../public'));


3 Réponses :


0
votes

Vous transmettez la route / assets à votre middleware statique et la redirigez vers le répertoire public. Mais dans votre HTML, vous essayez d'accéder directement à l'URL / public / assets . Ne fais pas ça; pointez simplement votre HREF vers /assets/styles.css et le middleware statique l'acheminera correctement vers le répertoire public pour vous.


0 commentaires

1
votes

Vous devez rejoindre le chemin,

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

Pour plus d'informations, veuillez consulter: https://expressjs.com/en/starter/static-files.html Vérifiez également si vous essayez de créer un chemin virtuel.


0 commentaires

0
votes

First require path var path = require ('path');

Deuxièmement, si assets est le dossier dans lequel vous souhaitez diffuser son contenu et qu'il se trouve également avec le fichier app.js dans le même dossier, alors

app.use (express.static (path.resolve (__ dirname, 'assets')));


0 commentaires