[Americano] Avoir des pages jade ou ejs

Version imprimable

Voir 40 message(s) de cette discussion en une page

05/03/2015, 17h53
lostsoul

[Americano] Avoir des pages jade ou ejs

Bonjour,

Je continue à découvrir Node, et la, j'ai besoin d'apprendre Americano (dérivé d'Express). J'ai lancé la commande qui cré le skelette de départ, et j'ai un msg d'erreur que je ne comprends pas trop au lancement de l'appli :

Citation:

error - americano | Error: Most middleware (like json) is no longer bundled with Express and must be installed separately.

De plus, il n'y a pas de pages dans /client/public, et je ne sais pas trop comment faire pour créer une route avec des pages (jade ou ejs) dans ce répertoire.

Si quelqu'un peut m'éclairer svp ?

Merci d'avance,
Très cordialement,

ANDRE Ani

package.json voir les dépendances de ton projet et version

Salut je te conseille de faire une installation forcé au niveau de ton projet a ou ce trouve ton fichier package.json.

Code:

1
2
3
4
5
 
//force les dépendances 
npm install -f
//essaye aussi l'installation séparé des dépendances   connect middleware 
npm install connect //la dépendance middleware voir https://github.com/senchalabs/connect#middleware

dans ton fichier de lancement de ton appli app.js ou server.js ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
//creation des paths
var experiences = require('./routes/experiences');
var experience = require('./routes/experience');
var addexperience = require('./routes/addexperience');
var editexperience = require('./routes/editexperience');
 
var formations = require('./routes/formations');
var formation = require('./routes/formation');
var addformation = require('./routes/addformation');
var editformation = require('./routes/editformation');
 
// view engine setup
app.set('views', path.join(__dirname, '/client/public'));
app.set('view engine', 'jade');
 
app.use('/experiences', experiences);
app.use('/experience', experience);
app.use('/addexperience', addexperience);
app.use('/editexperience', editexperience);
 
app.use('/formations', formations);
app.use('/formation', formation);
app.use('/addformation', addformation);
app.use('/editformation', editformation);

06/03/2015, 08h49
lostsoul

J'ai fais l'install forcée, ainsi que celle de connect.
Mais, à quoi sert le reste svp, je ne comprends pas...
06/03/2015, 11h16
lostsoul
Dans le dossier controllers j'ai un fichier routes.js comme ceci :
Code:

1 2 3 4 5 var index = require('./index'); module.exports = { '': { get: index.index } };
Et la page index.js est dans le même dossier.

Comment modifier le fichier routes.js afin d'avoir les pages (ejs ou jade) dans le dossier /client/public ? Je ne sais pas vraiment comment faire.
D'ailleurs, comment faire pour avoir des pages ejs ou jade au lieu de index.js (outre le fait d'installer jade ou ejs).

Dans cette example j'ai mit comment je routes mes fichiers .jade sans l'extension pas besoin

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
//creation des paths
var experiences = require('./routes/experiences');
var experience = require('./routes/experience');
var addexperience = require('./routes/addexperience');
var editexperience = require('./routes/editexperience');
 
var formations = require('./routes/formations');
var formation = require('./routes/formation');
var addformation = require('./routes/addformation');
var editformation = require('./routes/editformation');
 
// view engine setup
app.set('views', path.join(__dirname, '/client/public'));
app.set('view engine', 'jade');
 
app.use('/experiences', experiences);
app.use('/experience', experience);
app.use('/addexperience', addexperience);
app.use('/editexperience', editexperience);
 
app.use('/formations', formations);
app.use('/formation', formation);
app.use('/addformation', addformation);
app.use('/editformation', editformation);

dans cette example j'accède a ses fichiers .jade
par example le fichier formation.jade qui se trouve /client/public/formation.jade

http://locahost:3000/formation

Citation:

Envoyé par lostsoul

Dans le dossier controllers j'ai un fichier routes.js comme ceci :

Code:

1
2
3
4
5
 
var index = require('./index');
module.exports = {
  '': { get: index.index }
};

Et la page index.js est dans le même dossier.

Comment modifier le fichier routes.js afin d'avoir les pages (ejs ou jade) dans le dossier /client/public ? Je ne sais pas vraiment comment faire.
D'ailleurs, comment faire pour avoir des pages ejs ou jade au lieu de index.js (outre le fait d'installer jade ou ejs).

Pour ton index il faut

app.js ou server.js ("main")

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
var routes = require('./routes/index');
var monAutrePage = require('./routes/monAutrePage'); //il s'agit d'un parametre GET mais en mode rewriting d'ou './routes/' fait office /index?monAutrePage
...
 
//on configure jade sur la vue
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
 
 
//on utilise nos vues jades
app.use('/', routes);
app.use('/monAutrePage', monAutrePage );
 
 
// 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;

Donc ici tu aura comme fichier

/routes/index.js
/routes/monAutrePage.js

exemple index.js contient :

Code:

1
2
3
4
5
6
7
8
9
10
 
var express = require('express');
var router = express.Router();
 
/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Debian VPS' });
});
 
module.exports = router;

/client/public/index.jade
/client/public/monAutrePage.jade

est mon index.jade idem pour les includes ...
//extends layout est un fichier layout.jade présent dans /client/public/layout.jade contient les tags html head link script body

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
extends layout
block content
 div#top
  h1= title
  p Welcome to #{title}
  block menu
  div(id="data-ng-view", style="display:none")
    a#menuTest1(name="menuTest1", href="/users") Show Users | 
    a#menuTest2(name="menuTest2", href="/shouts") Show Shouts
   include ./header.jade
   include ./footer.jade

Voilà je pense que ça ira ;).

Gl

Oups, désolé, mais là, je suis plus perdu qu'avant en fait...

Voilà mon fichier server.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
var americano = require('americano');
var express = require('express');
 
var routes = require('./server/controllers/index');
var monAutrePage = require('./server/controllers/monAutrePage'); //il s'agit d'un parametre GET mais en mode rewriting d'ou './routes/' fait office /index?monAutrePage
 
 
//on configure jade sur la vue
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
 
 
//on utilise nos vues jades
app.use('/', routes);
app.use('/monAutrePage', monAutrePage );
 
 
// 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;
 
var port = process.env.PORT || 3000;
americano.start({name: '', port: port});

Le fichier /server/controllers/routes.js d'origine :

Code:

1
2
3
4
5
 
var index = require('./index');
module.exports = {
  '': { get: index.index }
};

Dans le même dossier, le fichier monAutrePage.js :

Code:

1
2
3
4
5
6
7
8
9
10
 
var express = require('express');
var router = express.Router();
 
/* GET home page. */
router.get('/monAutrePage', function(req, res) {
  res.render('monAutrePage', { title: 'Hello world' });
});
 
module.exports = router;

Dans le même dossier, le fichier index.js :

Code:

1
2
3
4
5
6
7
8
9
10
 
var express = require('express');
var router = express.Router();
 
/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Debian VPS' });
});
 
module.exports = router;

Le fichier /client/public/layout.jade :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
extends layout
block content
 div#top
  h1= title
  p Welcome to #{title}
  block menu
  div(id="data-ng-view", style="display:none")
    a#menuTest1(name="menuTest1", href="/users") Show Users | 
    a#menuTest2(name="menuTest2", href="/shouts") Show Shouts
   include ./header.jade
   include ./footer.jade

Et /client/public/monAutrePage.jade (index.jade est quasi pareil) :

Code:

1
2
3
4
5
6
7
8
9
 
doctype 5
html(lang="fr")
  head
    title Autre
 
  body
    h1 autre
    p autre page

Je ne comprends pas en fait le index.js et index.jade, idem pour monAutrePage.js et jade.

A quoi sert ce fichier alors /server/controllers/routes.je :

Code:

1
2
3
4
5
 
var index = require('./index');
module.exports = {
  '': { get: index.index }
};

De plus, j'ai cette erreur :

Code:

ReferenceError: app is not defined

Désolé, c'est sûrement tout bête ces questions...

07/03/2015, 08h19
John Blobsmith
Il semble que tu n'a pas déclarer la variable app dans ton fichier server.js.

En dessous de
Code:

1 2 var express = require('express');
il faut mettre:
Code:

1 2 var app = express();
07/03/2015, 08h46
John Blobsmith
Citation:

Envoyé par lostsoul

Je ne comprends pas en fait le index.js et index.jade, idem pour monAutrePage.js et jade.

index.js il dit:
Code:

1 2 3 4 module.exports.index = function (req, res, next) { res.render('index', { title: 'Debian VPS' }); };
- quand on l'appelle il va générer (render) un fichier html.
- il va utiliser la vue qui s'appelle index (client/public/index.jade)
- il envoi la variable title à la vue (title contient une chaine de caractère "Debian VPS")
Citation:
Envoyé par lostsoul

A quoi sert ce fichier alors /server/controllers/routes.js :

Code:

1 2 3 4 5 var index = require('./index'); module.exports = { '': { get: index.index } };

Désolé, c'est sûrement tout bête ces questions...
route.js c'est un fichier de routage (logique...).
Il fait le lien entre l'url de ton site et la fonctionalitée qui est derrière cette url.

- Pour l'instant la seul url routé est '' (donc rien, localhost:3000).
- La méthode http de routage défini est get (donc une url appelé via un navigateur).
- La fonctionalité lié à cette url est index.index:
* index c'est le module inséré en haut du fichier, soit index.js.
* index.index est donc la propriété index défini dans le module index.js (soit -> module.exports.index défini dans server/controllers/index.js)

Récapitulons:
- tu tape htttp://localhost:3000 dans ton navigateur.
- Ca appelle le routeur et demande la route '' (route vide) en get
- Le routeur appelle index.index
- index.js demande un rendu de la vue index.jade et lui envoi la variable title (avec 'Debian VPS' à l'intérieur)
- index.js envoi en réponse au navigateur ('res' comme 'response') la page html généré.
07/03/2015, 09h42
John Blobsmith
Bon, j'ai regardé de près americano....

J'ai une solution plus simple pour faire des générations de pages html.

- Ré-installe un projet tout neuf.
- npm install ejs --save

- Fichier route.js
Code:

1 2 3 4 5 6 var index = require('./index'); module.exports = { '': { get: index.index }, 'test': { get: index.test } };
- Fichier controller/index.js
Code:

1 2 3 4 5 6 7 8 module.exports.index = function (req, res, next) { res.send('Hello'); }; module.exports.test = function (req, res, next) { res.render('test.ejs', {title: 'Hello lostsoul'}); };
- Fichier views/test.js (dans le dossier views et pas public... public c'est pour les fichiers statics....)
Code:

1 2 3 <h1><%= title %></h1> test test test test
Pour afficher la page tu va sur http://localhost:3000/test
Et voila... simple... non ??

Merci !
J'ai créé un dossier views car il n'y en a pas par défaut, et j'ai mis un fichier test.ejs dedans, et ça fonctionne.
Merci pour la précision pour public, je croyais que c'était les fichiers pour le client (html, css, etc...).

Par contre, j'ai voulu essayer de créer une autre page et ça ne fonctionne pas. Je m'y prends mal je suppose.
J'ai une erreur :
Code:

1 2 3 controllers/routes.js:5 'essai': { get: index.essai }
Et j'ai Cannot GET /essai sur toutes les pages...

J'ai pourtant essayé de suivre ce que tu as fais.

Le fichier /controllers/index.js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 module.exports.index = function (req, res, next) { res.send('Hello'); }; module.exports.test = function (req, res, next) { res.render('test.ejs', {title: 'Hello lostsoul'}); }; module.exports.essai = function (req, res, next) { res.render('essai.ejs', {title: 'C est moi !'}); };
Le fichier /controllers/routes.js :
Code:

1 2 3 4 5 6 7 var index = require('./index'); module.exports = { '': { get: index.index }, 'test': { get: index.test } 'essai': { get: index.essai } };

t'a oublié une virgule dans route.js

Code:

1
2
3
4
5
6
7
var index = require('./index');
module.exports = {
  '': { get: index.index },
  'test': { get: index.test },
  'essai': { get: index.essai }
};

07/03/2015, 17h51
lostsoul

Erreur bête, il manquait une virgule...

Merci pour tout ;-)
07/03/2015, 17h54
lostsoul

J'avais trouvé tout seul, sans voir ton message.
07/03/2015, 18h06
lostsoul

Petite question, si je veux ajouter ce que j'ai fais avec les flux RSS, dois-je créer un autre fichier, ou je mets le code dans server.js.
Je suppose qu'il serait mieux de créer un autre fichier, pour avoir un code plus simple, surtout si j'ajoute d'autres fonctionnalités, non ?
07/03/2015, 18h28
John Blobsmith

Le mieux serai de créer un fichier avec le code dedans et que tu inclus dans le controller.
On est donc dans une structure MVC ou le controller récupère les données du model puis les envoi a la vue.
07/03/2015, 18h33
lostsoul

Oui, c'est bien ce que je pensais. C'est l'avantage du modèle MVC, tout est plus ou moins compartimenté pour faciliter le dev, non ?
Reste à voir comment faire ça maintenant.
Google est mon ami, je vais farfouiller sur le net voir si je trouve des trucs pour m'aider. Merci ;-)

Je n'ai pas trouvé grand chose sur le net. La pluspart des exemples sont en un seul fichier.

J'ai testé un peu.

J'ai aussi modifié mon fichier server.js. Le favicon ne s'affiche pas, les erreurs 404 fonctionnent, l'utilisation d'ejs doit peut-être être mise dans le fichier config.js, à voir.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var americano = require('americano');
var favicon = require('serve-favicon');
var app = americano();
 
app.use(favicon(__dirname + '/client/public/favicon.ico'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
 
 
var port = process.env.PORT || 3000;
americano.start({name: 'MonApp', port: port}, function(err, app, server) {
 
// erreur 404  
app.use(function(request, response) {
  response.writeHead(404, { "Content-Type": "text/plain" });
  response.end("404 error ! Page non trouvee\n");
});
 
});

J'ai créé le fichier /server/controllers/flux.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
var FeedParser = require('feedparser')
var request = require('request');
 
var req = request('http://www.slate.fr/rss.xml')
var feedparser = new FeedParser();
 
var items = [];
var meta = {};
 
req.on('error', function (error) {
    // handle any request errors
});
req.on('response', function (res) {
    var stream = this;
 
    if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
 
    stream.pipe(feedparser);
});
 
 
feedparser.on('error', function(error) {
    // always handle errors
});
feedparser.on('readable', function() {
    // This is where the action is!
    var stream = this;
    meta = this.meta;
    var item = {};
 
    while (item = stream.read()) {
        items.push(item);
    }
 
});
 
exports.flux = flux.js;

Puis modifié la page /views/essai.ejs :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<h1><%= title %></h1>
<h1>Page de TEST</h1>
 
<p>Bienvenue !</p>
 
<br>
<ul>
<% for(var i=0; i<items.length; i++) {%>
   <li> <a href="<%= items[i].link %>"> <%= items[i].title %> </a> </li>
   <li><%= items[i].author %></li>
   <li><%= items[i].pubdate %></li>
   <li><%= items[i].summary %></li>
<% } %>
</ul>
 
<br>
 
META
<br>
 
<h2> <%=  meta.title %> </h2>
<h2> <%=  meta.language %> </h2>
<h2> <%=  meta.link %> </h2>
 
<ul>
    <% for(var i=0; i<items.length; i++) {%>
    <li><%= items[i].link %></li>
    <% } %>
</ul>
 
 
<ul>
    <% for(var i=0; i<items.length; i++) {%>
    <li><%= items[i].link %></li>
    <% } %>
</ul>

Mais j'ai une erreur, items is not defined.

09/03/2015, 05h42
lostsoul

Le favicon fonctionne.

Pour le items, je ne sais pas si c'est mon export qui n'est pas bon ou s'il manque quelque chose. j'ai essayé require dans mon fichier principal mais ça ne fonctionne pas non plus, même en mettant le fichier flux.js à la racine.

En fait je voyais le truc comme ca:

Le code est pas très propre mais on pourra rectifier ca plus tard...
/server/models/flux.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
var FeedParser = require('feedparser')
var request = require('request');
 
var req = request('http://www.slate.fr/rss.xml')
var feedparser = new FeedParser();
 
var items = [];
var meta = {};
 
req.on('error', function (error) {
    // handle any request errors
});
req.on('response', function (res) {
    var stream = this;
 
    if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
 
    stream.pipe(feedparser);
});
 
 
feedparser.on('error', function(error) {
    // always handle errors
});
feedparser.on('readable', function() {
    // This is where the action is!
    var stream = this;
    meta = this.meta;
    var item = {};
 
    while (item = stream.read()) {
        items.push(item);
    }
 
});
 
module.exports.items = items;
module.exports.meta = meta;

/server/controllers/index.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var flux = require('./../models/flux.js');
 
 
module.exports.index = function (req, res, next) {
  res.send('Hello');
};
 
module.exports.test = function (req, res, next) {
    res.render('test.ejs', {title: 'Hello lostsoul'});
};
 
module.exports.essai = function (req, res, next) {
    res.render('essai.ejs', {
        title: 'C est moi !',
        items: flux.items,
        meta: flux.meta
        }
    );
};

/views/essai.ejs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<h1><%= title %></h1>
    <h1>Page de TEST</h1>
 
    <p>Bienvenue !</p>
 
    <br>
        <ul>
            <% for(var i=0; i<items.length; i++) {%>
                <li> <a href="<%= items[i].link %>"> <%= items[i].title %> </a> </li>
                <li><%= items[i].author %></li>
                <li><%= items[i].pubdate %></li>
                <li><%= items[i].summary %></li>
                <% } %>
                </ul>
 
                    <br>
 
                    META
                        <br>
 
                            <h2> <%=  meta.title %> </h2>
                                <h2> <%=  meta.language %> </h2>
                                    <h2> <%=  meta.link %> </h2>
 
                                        <ul>
                                            <% for(var i=0; i<items.length; i++) {%>
                                                <li><%= items[i].link %></li>
                                                <% } %>
                                                </ul>
 
 
                                                    <ul>
                                                        <% for(var i=0; i<items.length; i++) {%>
                                                            <li><%= items[i].link %></li>
                                                            <% } %>
                                                            </ul>

Voir 40 message(s) de cette discussion en une page