ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 140
Numărul 139 Numărul 138 Numărul 137 Numărul 136 Numărul 135 Numărul 134 Numărul 133 Numărul 132 Numărul 131 Numărul 130 Numărul 129 Numărul 128 Numărul 127 Numărul 126 Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ LISTĂ EDIȚII ▼
Numărul 98
Abonament PDF

Realizarea unei aplicații online folosind Nuxt, Vuex, Node.js și MongoDB (II)

Ovidiu Mățan
Fondator @ Today Software Magazine



PROGRAMARE

Continuăm articolul publicat în numărul precedent al revistei. Dacă atunci am văzut cum se realizează o interfață web pentru un Address Book folosind Nuxt, acum vom folosi informațiile din front-end și le vom salva într-o bază de date MogoDB. Datele din store-ul Vuex vor fi transmise în format JSON la un server Node.js care le va stoca sub forma de documente.

Server side

Realizăm un proiect nou.

mkdir -p Server/{model,controller}
cd Server/
touch server.js
npm init -y

Alternativa ar fi să folosim generatorul de aplicații npx express-generator. În acest caz, vom avea însă mai multe fișiere generate care nu vor fi folosite în proiect chiar dacă folosim opțiunea --no-view. Instalăm următoarele componente:

npm install mongoose
body-parser express cors

Modelul de date

Definim modelul de date, în cazul de față model/contact.js prin schema MongoDB cu ajutorul mongoose. Manipularea obiectelor din db se va face prin metode precum find(), delete(), save()

const mongoose=require('mongoose');
const {Schema}=mongoose;

const ContactSchema=new Schema({
    firstname:String,
    lastname:String,
    email:String
});

module.exports=mongoose
  .model('Contacts',ContactSchema);

Routing

Este definit API-ul listei de contact. Fiecărei operații de manipulare a datelor îi corespunde un URL precum și un tip de request: GET, POST, DELETE. Operațiile de modificare sau ștergere a unui contact au în URL și id-ul contactului. În funcție de acțiunea identificată se va apela metoda corespunzătoare din controller.

const contactsBuilder=require(
  './controller/contactsController')

module.exports=app=> {
  app.route('/contact').post(contactsBuilder.create);
  app.route('/contact/:contactId')
   .post(contactsBuilder.update);

  app.route('/contact/:contactId')
   .delete(contactsBuilder.delete);

  app.route('/contacts')
   .get(contactsBuilder.contacts);
}

Execuția operațiilor

Controllerul model/contactsController.js realizează interacțiunea cu DB-ul pentru operațiile CRUD. Așa cum menționam anterior, interacțiunea cu baza de date este simplă, prin metodele puse la dispoziție de mongoose. Fiecare operație are ca parametri requestul și răspunsul HTTP. Datele json sunt citite prin req.body iar cu ele construim modelul ce va fi salvat în DB. De asemenea, putem citi parametrii din request prin req.params. Un amănunt util este stabilirea statusului răspunsului înainte de a se trimite răspunsul. În cazul în care dorim să răspundem cu altceva în afară de obiectul din DB o putem face prin construirea unui json, vezi operațiunea delete().

const mongoose=require('mongoose');
const Contact=mongoose.model('Contacts')

exports.create=(req,res)=>{
  const contact=new Contact(req.body);
  contact.save((err,dbContact)=>{         
    res.status(200).json(dbContact);   
  });
};

exports.delete=(req,res)=>{
  Contact
    .findById(req.params.contactId, (err,dbContact)=>{
      dbContact.delete();
      res.status(200).json({
        id:req.params.contactId,
        status:”deleted”
      })
   });
}

exports.update=(req,res)=>{
  Contact
    .findById(req.params.contactId, (err,dbContact)=>{
      const newContact=new Contact(req.body);
      dbContact.firstname=newContact.firstname;
      dbContact.lastname=newContact.lastname;
      dbContact.email=newContact.email;
      dbContact.save((err,contact)=>{
        res.status(200).json(dbContact);
      });

   })
};

exports.contacts=(req,res)=>{
    console.log(„sending all contacts”)
    Contact.find().exec((err,contacts)=>{
        res.status(200).json(contacts);
    });
};

Serverul web

Fișierul server.js reprezintă punctul central al aplicației de unde se lansăm serverul web. Inițializăm componentele folosite și realizăm referințele necesare. A se observa realizarea conexiunii la MongoDB, inițializarea routelor și folosirea body-parser-ului.

const express=require('express');
const mongoose=require('mongoose');
const bodyParser=require('body-parser');
const cors=require('cors');

global.Contacts=require('./model/contact');
const routes=require('./routes');

mongoose.Promise=global.Promise;
mongoose.set('useFindAndModify',false);
mongoose.set('useUnifiedTopology',true);
mongoose.connect(
    'mongodb://localhost:27017/AddressBook',
    {useNewUrlParser:true}
)

const port=3333;//process.env.PORT;
const app=express();
app.use(cors());

app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json({extended: true}))

routes(app);
app.listen(port);
app.use((req,res)=>{});

console.log('Server running on port '+port);

Acestea au fost toate informațiile legate de serverul de AddressBook. Vă recomand să descărcați să codul sursă:

git clone 
  https://github.com/ovidiumatan/addrbk-server.git

cd addrbk-server
npm start

Integrăm în continuare serverul nostru cu aplicația Adress Book realizată în articolul precedent. Deoarece am folosit un store pentru logica de folosire a contactelor din lista noastră toate modificările vor fi în store/contacts.js. Vom modifica operațiile de create/update/init iar idurile generate ale contactelor vor fi înlocuite cu cele din baza de date. Deoarece în răspunsul primit de la server idurile sunt definite un numele _id va trebui să le transformăm în id.

async init({commit}) {
  console.log(„getting serverside contacts”);
  const {data} = await axios
    .get(process.env.apiServer+”/contacts”);

  data.map(contact => {
    console.log(contact);
    contact.id=contact._id;
    commit(„add”,contact);
  });

},
async update({commit}, contact) {
  commit(„update”, contact);
  let resp = await axios.post(
    process.env.apiServer
    +”/contact/”+contact.id, contact);

  if (resp.status === 200) {
    console.log(„record updated successfully”);
  }
},

async delete({commit}, contact) {
  commit(„delete”, contact);
  let resp = await axios.delete(
    process.env.apiServer+”/contact/”+contact.id, 
    contact);

  if (resp.status === 200) {
    console.log(„record deleted successfully”);
  }
},

async add({commit}, contact) {
  let resp = await axios.post(
    process.env.apiServer+”/contact”, contact);

  if (resp.status === 200) {
    console.log(„record added successfully”);
    resp.data.id=resp.data._id;
    commit(„add”, resp.data);
  }
}

Callurile sunt realizate folosind Nuxt iar adresa serverului process.env.apiServer a fost definită în nuxt.config.js astfel:

env:{  
  apiServer:'http://localhost:3333'  
},

Pentru a nu bloca aplicația din cauza comunicării cu serverul, toate metodele au fost făcute asincrone.

Codul aplicației client poate fi rulat de pe git în felul următor:

git clone https://github.com/ovidiumatan/addrbk.git
npm install
npm run dev

Concluzie

Realizarea unei aplicații web moderne se poate realiza ușor folosind Nuxt, Vuetify, Vuex, MongoDB și Node.js. Separarea nivelelor de procesare atât pe aplicația web dar și pe server ne dă avantajul unei flexibilități în adăugarea de noi module și funcționalități.

NUMĂRUL 138 - Maps & AI

Sponsori

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • Connatix
  • BoatyardX
  • .msg systems
  • Yardi
  • Colors in projects

INTERVIURI VIDEO