Angular/Production-texte-unique : Différence entre versions

De WikiSys
Aller à : navigation, rechercher
(middleware)
(create a GET route)
(11 révisions intermédiaires par le même utilisateur non affichées)
Ligne 119 : Ligne 119 :
  
 
  git commit -m "backend/app.js middleware backend/server.js amélioré"
 
  git commit -m "backend/app.js middleware backend/server.js amélioré"
 +
 +
== front end ==
 +
On conserve les '''part''' on ajoute '''part-two'''
 +
 +
;models/Texte.modeL.ts:
 +
export class Texte {
 +
 +
thing -> texte
 +
stuff -> texte
 +
all-stuff -> les-textes
 +
user -> participant
 +
description -> contenu
 +
title -> titre
 +
imageUrl  -> shasum
 +
price -> noteMoyenne
 +
thingForm -> textForm
 +
stuffService -> texteService
 +
 +
== create a GET route ==
 +
In your  '''app.js'''  file, replace all the middleware with the following middleware:
 +
 +
;backend/app.js:
 +
<pre>
 +
const express = require('express');
 +
const app = express();
 +
 +
app.use('/api/les-textes', (req, res, next) => {
 +
 +
  const des_textes = [
 +
    {
 +
      _id: 'oeihfzeoi',
 +
      titre: 'La première version',
 +
      content: 'Sur le plan institutionnel : introduire la possibilité d’intervention directe du peuple dans la démocratie via le Référendum d’Initiative Citoyenne (RIC) en toutes matières.',
 +
      shasum: '23fc8dcaed0ef2a758555d2117c5534e002e1f54',
 +
      noteMoyenne: 8.5,
 +
      participantId: 'qsomjhvqios',
 +
    },
 +
 +
    {
 +
      _id: 'oeihfzeomoihi',
 +
      titre: 'La deuxième version',
 +
      content: 'Changer les institutions en introduisant la possibilité d’intervention directe du peuple dans la démocratie via le Référendum d’Initiative Citoyenne (RIC) en toutes matières.',
 +
      shasum: 'e1a398ff436d13a07d267465605856096b6d8259',
 +
      noteMoyenne: 7.2,
 +
      participantId: 'rtpniiwrjpt',
 +
    },
 +
 +
  ];
 +
 +
  res.status(200).json(des_textes);
 +
});
 +
 +
</pre>
 +
 +
http://localhost:4200/part-one/les-textes
 +
 +
SellMyStuff    STUFF FOR SALE SELL A THING    BACK TO PART SELECTION
 +
 +
=== navigation ===
 +
;header/header.component.ts:
 +
SellMyStuff -> Les versions de la Charte
 +
STUFF FOR SALE -> Une version du texte
 +
SELL A THING -> Afficher une version
 +
SIGN UP -> S'enregistrer
 +
BACK TO PART SELECTION -> Retour à la sélection par parties
 +
THE ABSOLUTE BEST PLACE TO SELL YOUR STUFF  ->  Les différentes versions de la Charte

Version du 15 juillet 2019 à 16:33

initialisation

cd ~Angular
ng new production-texte-unique --style=scss --skip-tests=true
routing y
cd production-texte-unique/
mkdir backend
backend/emacs app.js
const express = require('express');

const app = express();

app.use((req, res) => {
  res.json({ message: 'Your request was successful!' }); 
});

module.exports = app;

backend/server.js
const http = require('http');
const app = require('./app');

const port = process.env.PORT || 3000;
app.set('port', port);

const server = http.createServer(app);

server.listen(process.env.PORT || 3000);
console.log('Listening on port http://localhost:' + port);

If you try and make a request to your server, you should get back a JSON object containing the message we have specified.

git commit -m "backend/server.js backend/app.js localhost:3000 JSON message"

middleware

backend/app.js
const express = require('express');
const app = express();

app.use((req, res, next) => {
    console.log('Requête reçue');
    next();
});

app.use((req, res, next) => {
  res.status(201);
  next();
});

app.use((req, res, next) => {
  res.json({ message: 'Votre requête a été envoyée avec succès!' });
  next();
});

app.use((req, res, next) => {
  console.log('La réponse a été envoyée avec succès!');
});

module.exports = app;


backend/server.js
const http = require('http');
const app = require('./app');

const normalizePort = val => {
  const port = parseInt(val, 10);

  if (isNaN(port)) {
    return val;
  }
  if (port >= 0) {
    return port;
  }
  return false;
};

const port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

const errorHandler = error => {
  if (error.syscall !== 'listen') {
    throw error;
  }
  const address = server.address();
  const bind = typeof address === 'string' ? 'pipe ' + address : 'port: ' + port;
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' exige des privilèges plus élevés.');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' est déjà utilisé.');
      process.exit(1);
      break;
    default:
      throw error;
  }
};

const server = http.createServer(app);

server.on('error', errorHandler);
server.on('listening', () => {
  const address = server.address();
  const bind = typeof address === 'string' ? 'pipe ' + address : 'port ' + port;
    console.log('Listening : address est "', address, '"');
    console.log('Listening : bind est "', bind, '"');
    console.log('Ecoute sur le port http://localhost:' + port);
});

server.listen(port);
git commit -m "backend/app.js middleware backend/server.js amélioré"

front end

On conserve les part on ajoute part-two

models/Texte.modeL.ts

export class Texte {

thing -> texte
stuff -> texte
all-stuff -> les-textes
user -> participant
description -> contenu
title -> titre
imageUrl  -> shasum
price -> noteMoyenne
thingForm -> textForm
stuffService -> texteService

create a GET route

In your app.js file, replace all the middleware with the following middleware:

backend/app.js
const express = require('express');
const app = express();

app.use('/api/les-textes', (req, res, next) => {

  const des_textes = [
    {
      _id: 'oeihfzeoi',
      titre: 'La première version',
      content: 'Sur le plan institutionnel : introduire la possibilité d’intervention directe du peuple dans la démocratie via le Référendum d’Initiative Citoyenne (RIC) en toutes matières.',
      shasum: '23fc8dcaed0ef2a758555d2117c5534e002e1f54',
      noteMoyenne: 8.5,
      participantId: 'qsomjhvqios',
    },

    {
      _id: 'oeihfzeomoihi',
      titre: 'La deuxième version',
      content: 'Changer les institutions en introduisant la possibilité d’intervention directe du peuple dans la démocratie via le Référendum d’Initiative Citoyenne (RIC) en toutes matières.',
      shasum: 'e1a398ff436d13a07d267465605856096b6d8259',
      noteMoyenne: 7.2,
      participantId: 'rtpniiwrjpt',
    },

  ];

  res.status(200).json(des_textes);
});

http://localhost:4200/part-one/les-textes 
SellMyStuff    STUFF FOR SALE SELL A THING    BACK TO PART SELECTION

navigation

header/header.component.ts
SellMyStuff -> Les versions de la Charte
STUFF FOR SALE -> Une version du texte
SELL A THING -> Afficher une version
SIGN UP -> S'enregistrer
BACK TO PART SELECTION -> Retour à la sélection par parties
THE ABSOLUTE BEST PLACE TO SELL YOUR STUFF   ->  Les différentes versions de la Charte