From 742c428c2cb40f1bae5b91c5cad532da457d9819 Mon Sep 17 00:00:00 2001 From: jdevstatic Date: Sun, 17 Jul 2022 02:17:24 +0800 Subject: [PATCH 1/6] Update README.md --- README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/README.md b/README.md index ccfdb30..28587ad 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,22 @@ # simple-login-vue simple login vue + +this will consume the Laravel Endpoints + + + +## Running Project +You can download this as zip file, then extract. +Then open cmd and change directory to the target project + +then + +``` +npm install +``` + +then + +``` +npm run serve +``` From 7a2343545f893e65a52a5a84c7a65a02d632c6d8 Mon Sep 17 00:00:00 2001 From: jdevstatic Date: Sun, 17 Jul 2022 15:17:51 +0800 Subject: [PATCH 2/6] Update README.md --- README.md | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) diff --git a/README.md b/README.md index 28587ad..f460277 100644 --- a/README.md +++ b/README.md @@ -20,3 +20,107 @@ then ``` npm run serve ``` + +## Tutorial +### The `index.js` +The `index.js` inside router will route the pages. + +as you can see from the code below, there are paths to that + +``` + { + path: '/login', + name: 'Login', + component: function() { + return import( /* webpackChunkName: "about" */ '../views/Login.vue') + } + } +``` + +now here is the one I've made to actually +route them in different pages, for example, logging as +admin or regular user + + +``` + { + path: '/admin', + name: '200', + component: function() { + return import( /* webpackChunkName: "about" */ '../views/Admin.vue') + } +``` + +as you can see the name 200, which is the state returned from +POST response coming from the endpoint of + +`http://localhost:8000/api/authenticate` + +this is the complete code, + +``` +import Vue from 'vue' +import VueRouter from 'vue-router' +//import Home from '../views/Home.vue' +import LoginComponent from "../views/Login.vue" +import SecureComponent from "../views/User.vue" +//import 200Component from "../views/200.vue" + +Vue.use(VueRouter) + +const routes = [{ + path: '/', + redirect: { + name: "Login" + } + }, + { + path: '/about', + name: 'About', + // route level code-splitting + // this generates a separate chunk (about.[hash].js) for this route + // which is lazy-loaded when the route is visited. + //component: function () { + //return import(/* webpackChunkName: "about" */ '../views/About.vue') + //} + }, + { + path: '/user', + name: '201', + component: function() { + return import( /* webpackChunkName: "about" */ '../views/User.vue') + } + }, + { + path: '/admin', + name: '200', + component: function() { + return import( /* webpackChunkName: "about" */ '../views/Admin.vue') + } + }, + + { + path: '/error', + name: 'Error', + component: function() { + return import( /* webpackChunkName: "about" */ '../views/Error.vue') + } + }, + + { + path: '/login', + name: 'Login', + component: function() { + return import( /* webpackChunkName: "about" */ '../views/Login.vue') + } + } +] + +const router = new VueRouter({ + mode: 'history', + base: process.env.BASE_URL, + routes +}) + +export default router +``` From d695e99bbd54cb785338977773fdd7e0cdb5417b Mon Sep 17 00:00:00 2001 From: jdevstatic Date: Sun, 17 Jul 2022 15:22:43 +0800 Subject: [PATCH 3/6] Update README.md --- README.md | 133 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 133 insertions(+) diff --git a/README.md b/README.md index f460277..80b5822 100644 --- a/README.md +++ b/README.md @@ -124,3 +124,136 @@ const router = new VueRouter({ export default router ``` + +### The `views` Folder + +![image](https://user-images.githubusercontent.com/47092464/179388205-dfd8524c-7fce-40b2-af6a-e06f5b5c4c69.png) + +the views folder are what we see on the browser, to interact with +in our case here, it's the login form + +The login view is the form and it will get the `username` and `password` and will +be send as POST through `axios`, then it should receive the response, + +one of my highlight here is the response code, 200 for admin, 201 for users, and 404 +for unsuccessful attempts + +`Login.vue` + +``` + + + + + +``` From 2f9abec262eab168660cf44fc125fcd247b5154e Mon Sep 17 00:00:00 2001 From: jdevstatic Date: Sun, 17 Jul 2022 15:26:11 +0800 Subject: [PATCH 4/6] Update README.md --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 80b5822..d9dca4b 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ this will consume the Laravel Endpoints ## Running Project -You can download this as zip file, then extract. +You can download this as a zip file, then extract. Then open cmd and change directory to the target project then @@ -23,9 +23,9 @@ npm run serve ## Tutorial ### The `index.js` -The `index.js` inside router will route the pages. +The `index.js` inside the router folder will route the pages. -as you can see from the code below, there are paths to that +as you can see from the code below, there are the paths to that ``` { @@ -51,7 +51,7 @@ admin or regular user } ``` -as you can see the name 200, which is the state returned from +as you can see the name `200`, which is the state returned from POST response coming from the endpoint of `http://localhost:8000/api/authenticate` @@ -129,11 +129,11 @@ export default router ![image](https://user-images.githubusercontent.com/47092464/179388205-dfd8524c-7fce-40b2-af6a-e06f5b5c4c69.png) -the views folder are what we see on the browser, to interact with -in our case here, it's the login form +The views folder are what we see on the browser, to interact with +in our case here, it's the login form. The login view is the form and it will get the `username` and `password` and will -be send as POST through `axios`, then it should receive the response, +be sent as POST through `axios`, then it should receive the response, one of my highlight here is the response code, 200 for admin, 201 for users, and 404 for unsuccessful attempts From 05de2051c89c73311e43294d73be5a0573519c4c Mon Sep 17 00:00:00 2001 From: jdevstatic Date: Sun, 17 Jul 2022 15:27:44 +0800 Subject: [PATCH 5/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d9dca4b..4b85226 100644 --- a/README.md +++ b/README.md @@ -129,7 +129,7 @@ export default router ![image](https://user-images.githubusercontent.com/47092464/179388205-dfd8524c-7fce-40b2-af6a-e06f5b5c4c69.png) -The views folder are what we see on the browser, to interact with +The `views` folder is what we see on the browser, to interact with in our case here, it's the login form. The login view is the form and it will get the `username` and `password` and will From 6dbc964ef9b8f6eeda33e36229bae6b28f1a8687 Mon Sep 17 00:00:00 2001 From: jdevstatic Date: Sun, 17 Jul 2022 15:41:00 +0800 Subject: [PATCH 6/6] Update README.md --- README.md | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4b85226..d7ed35b 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,25 @@ # simple-login-vue -simple login vue +This is a simple Login Vue form. -this will consume the Laravel Endpoints +This will consume the Laravel Endpoints +## Setup On Windows +Download `Node.js` and select `npm`. + +Install Vue CLI too, + +``` +npm install -g @vue/cli` +``` + +and axios + +``` +npm install axios --save +``` + ## Running Project You can download this as a zip file, then extract. Then open cmd and change directory to the target project