Comment créer un générateur de personnages de RPG Full Stack avec MongoDB, Express, Vue et Node (la pile MEVN)

Article original : How to Build a Full Stack RPG Character Generator with MongoDB, Express, Vue, and Node (the MEVN Stack)

Par M. S. Farzan

Je suis un développeur de jeux de table et j'aime créer des applications qui peuvent offrir des services liés aux jeux. Dans cet article, nous allons passer en revue les étapes pour créer un générateur de personnages de jeu de rôle en utilisant MongoDB, Express, Vue, et Node (également connu sous le nom de pile "MEVN").

Prérequis : ce tutoriel suppose que vous avez Node/NPM et MongoDB installés et configurés, avec un éditeur de code et un CLI (ou IDE) prêt à l'emploi.

Si vous préférez suivre un tutoriel visuel, vous pouvez consulter la vidéo compagnon de cet article ci-dessous :

Je devrais également mentionner que ce tutoriel n'aurait pas été possible sans l'article de Bennett Dungan sur la création d'une API REST, le tutoriel d'Aneeta Sharma sur les applications web MEVN full stack, et l'article de Matt Maribojoc sur le même sujet.

J'ai utilisé chacun de ces articles en plus de la documentation officielle (pour Vue, Express, et bien plus encore) pour apprendre à créer mes propres applications MEVN (vous pouvez en savoir plus sur mon parcours avec les API web ici).

Vous pouvez accéder à l'ensemble du dépôt pour ce tutoriel sur GitHub.

Le Front End

Notre application va nous permettre de créer de nouveaux personnages de jeu de rôle et de les visualiser ensemble, avec la pile suivante :

• Client Vue
• Serveur Node/Express
• Base de données MongoDB

Le client Vue effectuera des requêtes HTTP vers le serveur Node/Express (ou "API"), qui communiquera à son tour avec notre base de données MongoDB pour envoyer les données vers le haut de la pile.

Nous allons commencer par ouvrir une ligne de commande, créer un nouveau répertoire pour notre projet et naviguer dans ce répertoire :

mkdir mevn-character-generator
cd mevn-character-generator

Nous allons ensuite installer le Vue CLI globalement pour nous aider à échafauder une application de base :

npm install -g @vue/cli

Ensuite, nous allons utiliser le Vue CLI pour créer une nouvelle application appelée "Client" dans notre répertoire mevn-character-generator :

vue create client

Vous pouvez simplement appuyer sur "entrée" à l'invite pour continuer.

Nous pouvons exécuter notre application en naviguant d'abord dans le dossier /client :

cd client
npm run serve

Lorsque le script a terminé son exécution, nous pouvons maintenant ouvrir une page de navigateur et naviguer vers l'URL indiquée par notre terminal (généralement http://localhost:8080 ou 8081). Nous devrions voir quelque chose comme ceci :

Super ! Le Vue CLI a échafaudé une application de base pour nous et la rend directement dans le navigateur. Il rechargera également la page automatiquement en cas de modifications de fichiers et affichera des erreurs si quelque chose dans le code semble incorrect.

Ouvrons le répertoire du projet dans notre éditeur de code pour examiner la structure des fichiers, qui devrait ressembler à ceci :

Si vous êtes OCD comme moi, vous pouvez supprimer le fichier "favicon.ico" et le dossier "/assets" car nous n'en aurons pas besoin pour ce projet.

En plongeant dans /src/main.js, nous voyons :

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Ce fichier est le point d'entrée principal pour notre client. Il indique au navigateur de monter notre fichier App.vue sur la div avec l'id "#app" dans /public/index.html.

Regardons /src/App.vue (j'ai omis une partie du code pour plus de lisibilité) :

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
...
}
</style>

App.vue est un composant Vue typique, avec des balises ,