[Americano] Avoir des pages jade ou ejs

**lostsoul** · 05/03/2015, 17h53

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 :

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

**headmax** · 06/03/2015, 08h07

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

gl

**lostsoul** · 06/03/2015, 08h49

J'ai fais l'install forcée, ainsi que celle de connect.
Mais, à quoi sert le reste svp, je ne comprends pas...

**lostsoul** · 06/03/2015, 11h16

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

**headmax** · 06/03/2015, 16h58

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**headmax** · 06/03/2015, 17h08

Envoyé par lostsoul

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**lostsoul** · 07/03/2015, 05h24

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

Voilà mon fichier server.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

De plus, j'ai cette erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ReferenceError: app is not defined

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

[Americano] Avoir des pages jade ou ejs

NodeJS

Vue hybride

Discussions similaires

Partager

Partager