1.0.1 • Published 4 years ago

@sbesson/sample-vuejs v1.0.1

Weekly downloads
-
License
GPL-3.0
Repository
github
Last release
4 years ago

@sbesson/sample-vuejs

Ce projet est un exemple de développement nodejs/vuejs délivrant une api utilisé par le front.

dependances principales utilisées :

  • express
  • express-openapi-validator
  • swagger-parser
  • swagger-ui-express
  • vue
  • vue-material

Execution du projet

En développement

Il faut lancer le serveur :

npm start

Le serveur écoute sur le port 8081, si on appelle directement ce port, c'est le front qui se trouve dans /dist qui sera utilisé et donc pas le front en développement.

Il faut maintenant lancer le serveur de développement.

npm run serve

Le serveur de développement écoute sur le port 8080.

L'url du site http://localhost:8080

En production

Il faut générer le front :

npm run build

Et lancer le serveur avec une configuration de production

node . /path/config-prod.json

Documentation sur le développement

L'arborescence de 1er niveau

  • data : Contient les données de base (fichier de conf, certificat ssl de test, etc ...). n'est pas utilisé en production
  • server : contient le code source du serveur (backend)
  • src : contient le code source de l'interface utilisateur (frontend)
  • public : Pages html de vue-cli

l'index.js ne fait que lancer le serveur.

Le serveur

Les sources du serveurs se trouve donc dans le répertoire server.

L'arborescence des sources

  • ejsPages : Template ejs de page html
  • routers : Les routers express
  • services : Services générales
  • stores : Gestion des différents store de donnée.

server.js

Démarre le serveur après l'avoir initialisé.

Pour cela voici les actions qu'il effectue :

  1. Initialisation du context
    • Chargement de la configuration
    • Initialisation du logger
    • Initialisation du service ejs (pour les template des pages html)
    • Initialisation des stores
  2. Initialisation des middlewares et des routers
    • Compression des réponses
    • Validation de l'url d'appel
    • Gestion des pages publiques
    • Authentification
    • Gestion de l'API
    • Gestion des pages statiques
    • Gestion des erreurs
  3. Lancement du serveur
  4. Gestion de l'arrêt du serveur sur SIGINT

Les stores

On trouve les stores dans le répertoire /stores.

Le nom du fichier javascript doit d'être du style <name>.store.js et doit exporter une class du même nom (<name>Store) mais avec la 1ere lettre en majuscule.

Exemple, pour le store infos le fichier source est infos.store.js et export la class InfosStore.

Cette class recevra, lors de son constructeur, le context (avec la configuration, le logger et le service ejs) et devra contenir une méthode initialize() permettant d'initialiser le store.

Les stores seront instanciés automatiquement par server.js et leur méthode initialize() sera exécutée.

L'instance sera ensuite mis dans le context.

Les routers

Il y a 4 routers :

  • api : Contient les sources de l'api url /api en fonction des modules créés dans le répertoire api.
  • authentification : router express gérant l'authentification
  • public : router express gérant les pages publiques (ne réclamant pas d'authentification)
  • static : router express délivrant les pages statiques du site (il faut être authentifié pour recevoir ces pages)

l'api

l'arborescence

L'api se trouve dans le répertoire /server/routers/api

  • modules : contient le code d'un module
  • openapi : Fichier yml d'openapi globale à l'API
  • services : service général de l'API
api.js

Génère le router express de l'api.

Pour cela il met en place les routes suivantes pour le chemin /api :

  • \ : contrôle api via openapi (utilisation de express-openapi-validator, swagger-parser)
  • / : Accès à la documentation openapi (utilisation de swagger-ui-express)
  • /\ : Mise en place du router du module \ avec le control des droits admin
  • Gestion d'erreur : Mise en place des middleware d'erreur (erreur openapi et générale)
module API

Un module API correspond aux routes du chemin /api/<module>.

Les sources des modules se trouve dans le répertoire /server/routers/api/modules/<module>

On doit trouver à la racine du répertoire du module un fichier <module>.module.js

Ce dernier doit exporter deux propriétés :

  • authorizedRoutes : doit être un object contenant deux propriétés :
    • admin : array de regExp des routes accessible que par l'admin
    • all : array de regExp des routes accessible par tous les utilisateurs
  • routerFactory : function recevant le context et retournant un router express contenant les routes du module.

On doit trouver également à la racine du module un répertoire openapi qui devra contenir au moins le fichier openapi.yml qui devra contenir les tags et paths spécifique au module.

le context

Le context contient :

  • configLoader : object de type ConfigLoader (sb-configuration-loader) permettant de récupérer les options de configuration.
  • logger : logger (winston)
  • ejs : service permettant de générer des pages html via les template ejs
  • \ : Accès à l'instance des stores.

le front /src

L'arborescence des sources

  • components : module vuejs .vue
  • stores : les stores
  • eventBus.js : Bus d'événement global à toute l'application
  • main.js : Charge la configuration et monte le 1er module vuejs
  • sample-vuejs.vue : Le 1er module de l'application

Les stores

Se sont des simples object (singleton) de données récupérer via l'api rest du back. Ils sont généralement référencés dans le data d'un module vuejs, ce qui permet de mettre à jour l'affichage dès qu'une donnée change. Principe expliqué ici.