Je suis actuellement en stage où j'utilise VueJS que je découvre totalement. J'ai installé la dernière version avec la CLI et je dois avouer que je suis un peu paumé.
Je dois donc créer un calendrier à partir de date qui sont stockées dans une base de données Mongo.
J'ai donc créer un script appeler "generateCalendar" qui insère toutes les dates de l'année n+1 lorsque nous sommes en début d'année n, ainsi que le script "calendar.js" qui s'occupe de retourner toutes les dates contenue dans la BD.
Seulement voilà, je ne sais pas trop comment avoir au niveau de mon fichier .vue la variable qui contient le tableau de toutes mes dates.
En gros je voudrais récupérer le tableau de la variable "allDates" de mon fichier calendar.js (cf code ci dessous)
let mongoose = require('mongoose');
const Jour = require('../../model/Jour');
mongoose.connect('mongodb://localhost/pb_intranet', {useNewUrlParser:true}, (err)=>{
if (err) {
throw err;
}
});
let db = mongoose.connection;
db.on("error", console.error.bind(console, "Connection error"));
db.once("open", (callback)=> {
console.log("Connection succeeded");
});
let months = ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
let currentMonth = months[new Date().getMonth()];
console.log(currentMonth);
//récupération tous les jours dans la BD
let allDates = new Array();
Jour.find((err,jours)=> {
if (err) {
console.error(err);
} else {
jours.forEach(jour => {
allDates.push(jour);
});
}
console.log(allDates);
});
Pour ensuite l'intégrer dans mon component et faire une boucle du genre "allDates.foreach(ma_nouvelleVariable)"
Je précise également que j'utilise le package node "Mongoose" pour toutes les interactions avec la BD.
J'espère avoir été suffisamment clair si il y a des pros VueJS dans le coin je suis preneur! ;)
Bah justement, je sais pas trop où l'executer et comment récupérer les variables dedans
En gros, si on se base sur le modèle MVC (Model Vue Controller), mon modèle c'est ma base Mongo, la Vue c'est VueJS et mon Controller Node.
Ce que je veux faire c'est récupérer les variables de mon Controller et les afficher dans ma Vue! (c'est sûrement tout con, mais comme je l'ai dit, le JS et moi pour le moment c'est pas ça)
PS : Pour le moment il est exécuté dans le serveur
client
|
|-tous les dossiers VueCLI
model
|
|- mes schémas Mongoose
server
|
|- mes scripts qui insère et récupère données dans DB
Une fois que tu auras fait ça, tu fais un call vers le chemin que tu auras créé dans express, qui iras exécuter ton code pour aller chercher les données dans ta db.
La première raison qui me viens en tête (et c'est pour ça que je t'avais demandé si le code était dans le client) c'est pour ne pas donner les id de connexion de ta db. A moins que tu veuille créer une immense faille de sécurité dans ton client ?
Vuejs permet de gérer le front seulement. Express js permet de gérer le back. Il peut y avoir des urls différentes avec par exemple :
Pour Vuejs :
/ qui affiche la page d'accueil
/blog qui affiche les 10 derniers billets de blog
/blog/{id} qui affiche le détails d'un billet
Et côté Express (ou n'importe quel techno backend) tu ferais une API qui aurait les routes :
GET /posts qui permet d'avoir les billets d'un blog
GET /posts/{id} qui permet d'avoir le détails d'un billet
POST /posts qui permet d'ajouter un billet
PATCH /posts/{id} qui permet de modifier un billet
DELETE /posts/{id} qui permet de supprimer un billet
Quand on fait une SPA, on réalise souvent une API qui permet de discuter avec le Backend car le Frontend n'a aucun accès (et heureusement d'ailleurs) bdd par exemple.
Au final il faut bien comprendre la différence entre le front et le back (le client et le serveur)
Le routing front et le routing back (pour des API en général ici) sont deux choses différentes. Vue ne gère que le routing front ici. Vue ne peut pas recevoir magiquement les données, il va falloir probablement qu'il les demande de lui-même au serveur...via une url qui est gérée par le routeur coté serveur.
Faire une appli web avec Vue, ça revient grosso modo à écrire deux applis différentes. Le client, qui est dans le navigateur, et qui requête un serveur, écrit indépendamment et qui expose une API. Le communication entre les deux n'est pas automatique. Si Vue est utilisé pour faire tout le front (et pas juste dans un bout de page), il n'y a plus aucune communication avec le serveur une fois qu'il a livré l'appli. Donc à moins d'un appel avec une API comme Fetch, ben les données, elles n'arriveront jamais coté client.
/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\
const express = require('express');
const router = express.Router();
const Jour = require('../../model/Jour');
router.get('/', async (req,res)=>{
const allDates = await loadJoursCollection();
res.send(allDates);//pourquoi await ? tu ne peux pas passer une promise en paramètre de send
});
function loadJoursCollection() {//c'est mieux de le faire dans ton model
return Jour.find({}).sort({"date":1});
}
module.exports = router;
actuellement, tu peux call le serveur AVANT d'avoir la connexion à mongodb. C'est pas bon du tout.
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
//les constantes au début c'est mieux
const port = process.env.PORT || 5000;
const app = express();
const astreinte = require('./routes/astreinte');
// Middleware
app.use(bodyParser.json());
app.use(cors());
app.use('/astreinte', astreinte);
mongoose.connect('mongodb://localhost/pb_intranet', {useNewUrlParser:true}, (err)=>{
if (err) {
throw err;//ça peux faire péter ton api !
}
});
let db = mongoose.connection;
db.on("error", console.error.bind(console, "Connection error"));
db.once("open", (callback)=> {
console.log("Connection succeeded");
app.listen(port, ()=> console.log('Server started on port ' + port));
});
class AstreinteService {
// Get all Dates
static async getAllDates() {//async équivaut à retourner une promise, évite d'utiliser les deux
try {
const res = await axios.get(url);
return res.data.map(day => {
date: new Date(day.date);
})
} catch (err) {
throw(err);
}
}
}
Merci ! Effectivement il faut que je prenne plus de recul sur mon code parce que il y a de sacrés problèmes là (pour les await, async et Promise c'est pas encore tout à fait clair dans ma tête c'est pour ça qu'il y en a un peu dans tous les sens ! )
Entre temps j'ai réussis à afficher les dates de ma BD ! C'est niquel, merci de votre aide! c'est sympas de savoir qu'il y a une communauté qui aide ceux qui ont un peu plus de mal au début !
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
My website : Mon serveur discord, Se demerder tout seul, Faille XSS et SQL