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é.
3 Réponses :
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.
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.
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')));
vous devrez peut-être joindre des chemins. Affichez la carte de l'arborescence de vos projets. ex:
app.use ('/ assets', path.join (__ dirname, '/../public'));