DEV Community

loading...
Cover image for Creating an eCommerce Frontend with Vue.js

Creating an eCommerce Frontend with Vue.js

Nil Madhab
Traveller, Adventurer, Geek, Passionate about Algorithm, founder of webtutsplus.com, Entrepreneur, and explorer, connect me https://twitter.com/Nilmadhabmondal
Updated on ・12 min read

Part 2: SignUp and SignIn for E-Commerce App
We will now create the front-end of a very important feature in every e-Commerce site — Sign In & Sign Up, using Vue.Js
Alt Text
In the previous tutorial, we added the Sign In & Sign Up API to our Spring Boot backend. Now, let’s learn how to use this API in our front-end.

Live Demo

You can see the Sign In & Sign Up API (integrated with Vue.Js) live in action at the link mentioned below. You will be able to experience this feature if you click on the buttons — Sign In OR Sign Up.
Webtutsplus E-commerce APP

Backend Tutorial

Pre-Requisites

  1. Knowledge about Vue.Js & Vue.Js CLI
  2. JavaScript
  3. Code Editor (like Microsoft Visual Code with Veture extension)
  4. A good browser (like Google Chrome)

This tutorial is part of our series — Frontend with Vue.js/Javascript. We will extend the code which we developed in the previous tutorials in this series. So, if you have any doubt regarding anything that we developed earlier, you can read about it in the corresponding tutorial in the series.


Since this tutorial is based on the work we have done so far, it is recommended to go through the following tutorials as well.

Project Structure

The product and category pages are already developed in our e-commerce frontend using Vue.Js 3 framework. Up to now, we have the following project structure and frontend design.
Alt Text

We will now describe the following directories:-

  • public — contains the main HTML file of our project
  • src/assets — stores the media files like images, logos, etc.
  • src/components — stores all the reusable components of our project. These components are not unique to some specific route.
  • src/router — contains the index.js file which keeps a record of all the routes
  • src/views — stores all the router components. These are the components that are rendered as per the current route.

Apart from this, we have some important files too

  • App.vue — it is the root component of our project
  • main.js — it is the starting point of our project. Here we import our root component App.vue, our router file index.js and createApp method. After this, we mount our root component to the DOM using the following statement:

API Design

We designed the WishList API for our backend in the previous tutorial. You can try this API using the following Swagger link.
Swagger UI
If you have not read the previous tutorial, do not worry. We will now describe this API so that you can feel comfortable when we use the API in our front-end.

Following are the API end-points to

  1. Get a list of all the users
  2. Sign In with username and password
  3. Sign Up and create a username and password

Alt Text
We will only use the Sign In and Sign Up API for our application. Now let’s discuss the body and response of the two POST requests:-

POST Sign In

Body:
Alt Text
Respose:
Alt Text

  • Note that the response returns a token. We must save this token to a gobal object because other API End-points like Wishlist API End-point might use this token to recognise the user.

POST Sign Up

Body:
Alt Text
Respose:

Alt Text

Front-End Design

Before we begin to write code, it is very important that we have a very clear picture of what we are going to do. So, let’s discuss this.

  • We are going to create separate SignUp, SignIn, and Admin pages.
  • The admin page will be restricted to the logged in users. If someone tries to access the Admin page without logging into the system, she/he will be redirected back to the Login page.
  • To easily access Admin and Login pages, we’ll put two links in the top navigation bar. Alt Text
    • Also, we’ll link the Login and Signup pages with each other by placing a link at the bottom of each page. Alt Text

Alt Text

Let’s Code

We will now begin to write code.

Let’s Create the Required Components

Even if we can create Vue.js components manually, it is easy to use a component generator. We will use the package called vue-generate-component for generating Vue.js components. Install vue-generate-component package with the following command.

npm install -g vue-generate-component

After installing vue-generate-component package, generate three components for Signup, Signin, and Admin page. We’ll use vgc command with -s flag for generating Vue Single File Components (SFC).

cd src/views
vgc -s Admin
vgc -s Signup
vgc -s Signin

Now, you will get three blank Vue component files under the views folder containing a code block similar to the following.

Make them Accessible!

Once we have created the components, you need to make them accessible by creating routes for each component. Open the src/router/index.js file and add the following routes under the routes array.


Start the development server by either executing the following command from the root of the project folder or clicking on the small run button in front of the serve command under NPM SCRIPTS.

npm run serve
Alt Text
Now you should be able to navigate to the components we have created in the previous step with the following URLs.

[http://localhost:8080/signin](http://localhost:8080/signin)
[http://localhost:8080/signup](http://localhost:8080/signup)
[http://localhost:8080/admin](http://localhost:8080/admin)

Allow Users to Self-Register with Sign-Up Form

Let’s begin with the Sign-Up form first. Now we have blank components for each page. Let’s design our sign-up page first. It will contain a form with the required fields for user signup. Modify your Signup.vue component as following code block.

Since we are using Bootstrap in our application, this will render with default bootstrap styles. The required attribute in each form element will trigger HTML5 form validations before submitting the form.

Note that we have defined our data in the component and linked each form field to the corresponding data field using the v-model directive. The v-model directive is used to create two-way data binding.

Oh wait, What is two-way data binding?

  • It means that any data changes in the view elements ( like input boxes, text areas, and checkboxes) should be immediately reflected in the underlying model ( a plain JavaScript object with data fields, you can also think of it as a variable).
  • Same is true for the other way around, i.e. Any data changes in the model are immediately propagated to the matching view(s).
  • In simple words, whenever application data changes, the UI also changes and vice-versa. Alt Text Ok, let’s get back to the tutorial. Now if we run the application and navigate to http://localhost:8080/signup, you will see a UI similar to the following. Alt Text Now that we have made the form, we need to submit its data to the server. To do that we have to call /user/signup backend API with the data filled in UI. We will call the API (i.e. submit the form) when the user clicks the “Signup” button.

After the user clicks the sign up button, it will validate the password with the confirm-password field and if the values are equal, proceed to the API call. Once you have signed up successfully, the page will be redirected to the Home page and will display a success message.

Let’s add a separate method for Calling the API. Modify the methods section under <script> tag as follows.

Note the following:-

  • We are using axios library to make the API call.
  • swal is a function similar to alert function of JavaScript.
  • The e.preventDefault()function is called to avoid the default behavior which is submitting the form and refresh the page when the user clicks on the “Submit” button.

Now we have to call this function whenever the user submits the form, either by clicking on the “Submit” button or pressing the “Enter” key. This can be done by adding v-on:submit directive to the form element as follows

You said we’ll use v-on:submit. Isn’t it?

Yes, of course. @submit is a shorthand for v-on:submit. While v- prefix provides a visual cue for Vue.js specific attributes in our templates, it can be verbose for some frequently used directives. Therefore, Vue provides special shorthands for v-on and v-bind directives since those are the most often used directives. @ for v-on and : for v-bind.

Now we can fill the form and sign-up users successfully. But as you can see [http://remotedevs.org:8080/api/](http://remotedevs.org:8080/api/) part of the URL is hardcoded in the component and possibly repeated the same in many other components as well. As a best practice, we will move this base URL to a common place, so that it’s easy to modify it, in case if the API host is changed in the future.

Since App.vue component is the base component for all other components, let’s define our base URL in that file. Add the following code block to the App.vue component if it is not already there.


Then we can bind this value to a property of <router-view> element. As we mentioned in the previous tutorials, this <router-view> element will be replaced with the relevant components according to the router definitions. Therefore, this baseURL property will be available in any components which will be replaced by the router. Note that we have used : shorthand instead of v-bind which is explained previously.

Now we can use this property in our Signup.vue component. Define the props in Signup.vue component to match with the bonded value in previous step and modify the URL to use that value.

Now our signup page is completed. Let’s design and implement the login functionality.

Allow Users to Login to the Application

Now that our sign up page is up and running, let’s begin implementing the login page for our app. The login page should contain two input fields for entering email and password. To create the HTML template, open Signin.vue component and modify it as following code block.


Now run the application and navigate to [thehttp://localhost:8080/signin.](http://localhost:8080/signin) Then you will see an UI similar to the following.
Alt Text
We have now created the form for Sign In. Now we have to call user/signIn backend API with the login data when the user clicks on the “Signin” button. Modify the method section under <script> tag as follows to add a separate method for that.

Note:-
  • If you could not understand the purpose of localStorage.setItem() , do not worry. We will explain it later in the article.

Now this sigin function should be called whenever the user submits the form. This can be done by adding v-on:submit directive to the form element as follows. Now, if you fill the form with correct login details and hit “Signin” button, you will see a success alert.


Now if you look at the signin API call response body, you will see that there is a unique token issued for an every successful login session. We have to use this token in subsequent calls to access secured API resources. That means we have to store this token somewhere in our application for later usage. So, here comes the use of local storage.

Wait, what is local storage?

There is an implementation called localStorage in JavaScript which allows web applications to save data in the web browser without any expiration time. That means even if you closed the browser, the data will not be deleted. localStorage is a map like implementation which allows saving key-value pairs.

Okay, let’s get back to the tutorial

Once we have received the token from the API, we will store it in the localStorage with localStorage.setItem() method. And then user should be redirected back to the previous router location. This can be done by replacing the signin success alert with the following code block.


Now try to sign in from the UI and check the “Application” tab of the web browser developer console. You can see our token is saved to the local storage.
Alt Text
The signin page is now almost completed. Let’s add one more element, a loading spinner! We will add a spinner icon which will be showed upon clicking on the “Signin” button and will be dismissed after receiving the signin response from backend server.

Modify the “Signin” button HTML code, signin method, mounted() function and style section as follows


The loading spinner visibility will be set to true when it starts to make the backend API call. Note that we have used the finally() block to stop the spinner and mounted() method to specify the default behavior of spinner while loading the page.

Let’s Make a Restricted Area! — The Admin Page

Now we will add an admin page and restrict it only to the logged in users. Modify your Admin.vue component with following code block to


In the mounted() function we have checked the value of token which is stored in the localStorage while signing in. Now if you try to access Admin page without signing in, you will be redirected to the signin page. The $router.push() command is used to navigate the user to the signin page instead of the $router.replace() method. This will allow the user to redirect back to the same page after logging into the system.

Add the Navigation Links

We have almost finished the signup and signin functionalities in our e-commerce app. Let’s add the navigation links to the navigation bar at the top of the screen. Open your Navbar.vue file and modify the template as shown below.


This will add the “ADMIN” and “SIGNIN” navigation links to the top navigation bar as below.
Alt Text

Let’s Add the Sign Out Feature

Okay, as you can see, one important feature is still missing from our application. There should be a way to sign out after signing in. Also, The sign out link should be appear only after signing in and the sign in link should be hidden at the same time. This can be done by checking the existence of the token while rendering the Navbar.vue component.


Note that we have defined a signout() method and bind it to the “SIGNOUT” navigation link. We are removing the token from localStorage so that user will not be signed in anymore.

Now, try to sign out and sign in again. You will notice a little bug there. The “SIGNIN” link will not be replaced by the “SIGNOUT” link as soon as you signed in to the system. You have to manually refresh the page. Let’s fix this!. Open the App.vue component and modify it as following code block.


We have added a component key to the navigation component and define a method called refreshNav() to change that key. The trick is change the component properties so that the component will be reloaded at the run time. Then use signin() method in the Signin.vue component to call this method as soon as user gets logged in as shown in the following code block.

Add links between Signup and Signin Pages

Now let’s add links to each other in Signup and Signin pages so that the users can easily navigate between these components. To do that, modify the template of each page as follows.



The above code will cause the following change in the UI.
Alt Text

Congratulations

You have now successfully added the Wishlist feature in your Vue.Js frontend. It was a really long and challenging task. Congratulations on completing the tutorial.

The complete code can be found in this GitHub repository

Discussion (0)

Forem Open with the Forem app