add backend api with expressjs

package.json

@@ -3,13 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "dev": "concurrently --raw \"npm:serve\" \"npm:server\"",
+    "server": "nodemon server.js",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@faker-js/faker": "^7.5.0",
+    "axios": "^1.1.2",
     "core-js": "^3.6.5",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "express-session": "^1.17.3",
     "leaflet": "^1.7.1",
+    "nodemon": "^2.0.20",
     "register-service-worker": "^1.7.1",
     "vee-validate": "^3.4.5",
     "vue": "^2.6.11",
@@ -26,6 +34,7 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
+    "concurrently": "^7.4.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",

server.js

@@ -0,0 +1,60 @@
+const express = require('express');
+const session = require('express-session');
+const cors = require('cors');
+const data = require('./src/fakeData/resturants');
+const app = express();
+const port = 8000;
+
+app.use(cors({ origin: process.env.ORIGIN || 'http://localhost:8080', credentials: true }));
+app.use(express.json());
+app.use(
+  session({
+    resave: false,
+    saveUninitialized: false,
+    secret: process.env.SESSION_SECRET || 'SESSION_SECRET',
+  })
+);
+
+const resturants = data.resturants;
+const resturantsDetail = data.resturantsDetail;
+const history = [];
+const users = [];
+
+app.get('/resturants', (req, res) => {
+  res.send(resturants);
+});
+
+app.get('/resturants/:id', (req, res) => {
+  let id = req.params.id;
+  res.send(resturantsDetail.data.find(el => el.id == id));
+});
+
+app.get('/history', (req, res) => {
+  res.send(history);
+});
+
+app.post('/order', (req, res) => {
+  const order = req.body;
+  history.push(order);
+  res.send(order);
+});
+
+app.get('/account', (req, res) => {
+  res.send(req.session.user);
+});
+
+app.post('/sign-up', (req, res) => {
+  const user = req.body;
+  req.session.user = user;
+  users.push(user);
+  res.send(user);
+});
+
+app.post('/logout', (req, res) => {
+  req.session.destroy();
+  res.send();
+});
+
+app.listen(port, () => {
+  console.log(`Starting server on port: ${port}`);
+});

src/App.vue

@@ -46,10 +46,12 @@ export default {
   },
   mounted() {
     this.getUserLocation();
+    this.getUserAccount();
   },
   methods: {
     ...mapActions([
       "getUserLocation", //also supports payload `this.nameOfAction(amount)`
+      "getUserAccount",
     ]),
   },
 };

src/api/index.js

@@ -1,67 +1,57 @@
-const resturants = require("../fakeData/resturants").default.resturants;
-const resturantsDetail = require("../fakeData/resturants").default
-	.resturantsDetail;
+import axios from 'axios';
 
-let history = [];
+const BASE_URL = 'http://localhost:8000';
 
-const getResturants = () => {
-	return new Promise((resolve) => {
-		setTimeout(function() {
-			resolve(resturants);
-		}, 1000);
-	});
+const getResturants = async () => {
+  return (await axios.get(`${BASE_URL}/resturants`)).data;
 };
 
-const getResturantsDetail = (id) => {
-	return new Promise((resolve) => {
-		setTimeout(function() {
-			resolve({
-				data: resturantsDetail.data.find((el) => el.id == id),
-			});
-		}, 1000);
-	});
+const getResturantsDetail = async id => {
+  return (await axios.get(`${BASE_URL}/resturants/${id}`)).data;
 };
 
-const getHistory = () => {
-	return new Promise((resolve) => {
-		setTimeout(() => {
-			resolve(history);
-		}, 1000);
-	});
+const getHistory = async () => {
+  return (await axios.get(`${BASE_URL}/history`)).data;
 };
 
-const postOrder = (order) => {
-	console.log("OrderPosted");
-	console.log(order);
-	history.push(order);
-	console.log(history);
+const postOrder = async order => {
+  console.log(order);
+  return (await axios.post(`${BASE_URL}/order`, order)).data;
 };
 
-const bookTable = (details) => {
-	console.log("TableBooked");
-	console.log(details);
+const bookTable = details => {
+  console.log('TableBooked');
+  console.log(details);
 };
 
-const cancelTable = (details) => {
-	console.log("TableCanceled");
-	console.log(details);
+const cancelTable = details => {
+  console.log('TableCanceled');
+  console.log(details);
 };
 
-const signUpUser = user => {
-	console.log("User Signed Up")
-	console.log(user)
-}
+const userAccount = async () => {
+  return (await axios.get(`${BASE_URL}/account`, { withCredentials: true })).data;
+};
+
+const signUpUser = async user => {
+  user = (await axios.post(`${BASE_URL}/sign-up`, user, { withCredentials: true })).data;
+  console.log(user);
+  console.log('User Signed Up');
+  return user;
+};
 
-const logout = () => {
-	console.log("Loged Out")
-}
+const logout = async () => {
+  await axios.post(`${BASE_URL}/logout`);
+  console.log('Loged Out');
+};
 export default {
-	getResturantsDetail,
-	getResturants,
-	getHistory,
-	postOrder,
-	bookTable,
-	cancelTable,
-	signUpUser,
-	logout
+  getResturantsDetail,
+  getResturants,
+  getHistory,
+  postOrder,
+  bookTable,
+  cancelTable,
+  userAccount,
+  signUpUser,
+  logout,
 };

src/components/SignUp.vue

@@ -2,76 +2,33 @@
   <validation-observer ref="observer" v-slot="{ invalid }">
     <form @submit.prevent="submit">
       <validation-provider v-slot="{ errors }" name="Name" rules="required">
-        <v-text-field
-          v-model="name"
-          :error-messages="errors"
-          label="Name"
-          required
-        ></v-text-field>
+        <v-text-field v-model="name" :error-messages="errors" label="Name" required></v-text-field>
       </validation-provider>
 
-      <validation-provider
-        v-slot="{ errors }"
-        name="email"
-        rules="required|email"
-      >
-        <v-text-field
-          v-model="email"
-          :error-messages="errors"
-          label="E-mail"
-          required
-        ></v-text-field>
+      <validation-provider v-slot="{ errors }" name="email" rules="required|email">
+        <v-text-field v-model="email" :error-messages="errors" label="E-mail" required></v-text-field>
       </validation-provider>
 
-      <validation-provider
-        v-slot="{ errors }"
-        name="password"
-        rules="required|verify_password"
-      >
-        <v-text-field
-          v-model="password"
-          :error-messages="errors"
-          label="Password"
-          :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
-          :type="show1 ? 'text' : 'password'"
-          @click:append="show1 = !show1"
-          required
-        ></v-text-field>
+      <validation-provider v-slot="{ errors }" name="password" rules="required|verify_password">
+        <v-text-field v-model="password" :error-messages="errors" label="Password"
+          :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'" :type="show1 ? 'text' : 'password'"
+          @click:append="show1 = !show1" required></v-text-field>
       </validation-provider>
 
-      <validation-provider
-        v-slot="{ errors }"
-        name="phoneNumber"
-        :rules="{
-          required: true,
-          digits: 10,
-        }"
-      >
-        <v-text-field
-          v-model="phoneNumber"
-          :counter="10"
-          :error-messages="errors"
-          label="Phone Number"
-          required
-        ></v-text-field>
+      <validation-provider v-slot="{ errors }" name="phoneNumber" :rules="{
+        required: true,
+        digits: 10,
+      }">
+        <v-text-field v-model="phoneNumber" :counter="10" :error-messages="errors" label="Phone Number" required>
+        </v-text-field>
       </validation-provider>
 
       <validation-provider v-slot="{ errors }" name="address" rules="required">
-        <v-text-field
-          v-model="address"
-          :error-messages="errors"
-          label="Address"
-          required
-        ></v-text-field>
+        <v-text-field v-model="address" :error-messages="errors" label="Address" required></v-text-field>
       </validation-provider>
 
       <validation-provider v-slot="{ errors }" name="city" rules="required">
-        <v-text-field
-          v-model="city"
-          :error-messages="errors"
-          label="City"
-          required
-        ></v-text-field>
+        <v-text-field v-model="city" :error-messages="errors" label="City" required></v-text-field>
       </validation-provider>
 
       <v-btn color="success" class="mr-4 mt-3" type="submit" :disabled="invalid" block elevation="3"> Sign Up </v-btn>
@@ -137,20 +94,20 @@ export default {
   }),
 
   methods: {
-      ...mapActions([
-            'updateUserData', //also supports payload `this.nameOfAction(amount)` 
-        ]),
-    submit() {
+    ...mapActions([
+      'updateUserData', //also supports payload `this.nameOfAction(amount)` 
+    ]),
+    async submit() {
       this.$refs.observer.validate();
-      this.updateUserData({
-          name: this.name,
-          phoneNumber: this.phoneNumber,
-          email: this.email,
-          address: this.address,
-          city: this.city,
-          password: this.password,
+      await this.updateUserData({
+        name: this.name,
+        phoneNumber: this.phoneNumber,
+        email: this.email,
+        address: this.address,
+        city: this.city,
+        password: this.password,
       })
-    router.push({ name: "Order"});
+      router.push({ name: "Order" });
     },
   },
 };