Working with Vue 3 and Go (Golang)

An overview of what we will be covering in this course.

Just a bit of information about me and my background.

With the introduction of Vue.js version 3, we now have to application programming interfaces (APIs): the Options API, and the Composition API. We'll be covering both in this course.

Naturally, we'll need Go installed.

If you don't have an IDE already, VS Code will do the job. Install it if you need to.

We won't be using make for awhile, but it's incredibly useful, so let's install it now.

When you need to ask for help, make it easy for me to give that help to you. Here's how.

Let's build the standard "Hello, world!" application. It's tradition, after all.

Let's have a quick look at how Vue works on a web page.

With vue, it's easy to bind a form element to another part of the web page. Let's give that a try.

Let's add some additional interactivity to our application by listening for click events on a couple of buttons, and doing something when they are clicked.

Components are one of the most valuable and powerful parts of Vue. Let's get started with components.

Let's create a re-usable Vue component that can be used to create any type of text input for an HTML form.

Let's try out our Vue component by building a simple user registration form.

Vue applications have a certain lifecycle. It's important to know about it, and how to use it. Let's take advantage of Vue's lifecycle hooks and add some client-side JavaScript validation to our form.

Having a single component is fine, but it's incredibly useful to nest one or more Vue components within another Vue component. Let's try that by creating a (ficticious) user registration form.

Let's build a select component, and add it to our registration form.

Let's add one more component - a checkbox.

It's common to change what is displayed on a given web page depending on some condition. Vue makes it easy to do that with conditional rendering. Let's try it out.

One of the things we do a lot in web applications is to fetch data from a remote service. Let's get started doing that in our Vue application.

Now that we've pulled down some JSON from a remote source, let's work with it and display a list of books in our Vue application.

Let's get started adding some interactivity to our list of books.

Let's add an event listener to our list of books which allows us to remove a book from the list when the trash icon is clicked.

In order to work with Vue 3 in this section of the course, we need Node and npm installed. Let's take care of that now.

We also need vue-cli installed, so let's take care of that.

Let's remove most of the things that were auto-generated in our Vue app when we ran vue create vue-app, and get started from scratch.

Let's set up three simple Vue components for our application, register them, and add them to the main Vue component.

Let's add some more useful code to our header component.

Let's add some basic content to our Body Vue component.

Let's add some content and styling to our Footer component.

In order to make navigation actually work in our application, it is necessary to use some sort of router. Let's use the official Vue Router, which works really well.

Let's set up some simple routes.

Let's update main.js to tell our application that we are using a router, and then update App.vue to display the appropriate component.

Let's add a dummy Login Vue component, and update our Header component to use the router-link tag from the Vue Router.

Let's use the form Vue components we built in an earlier section and put together a Login component with the appropriate form.

Let's make creating a <form> tag simpler by creating a new Vue component.

Let's improve our login form by binding the form fields to the data associated with our component.

Let's update our FormTag and Login Vue components, and get them to the point where are ready to call the back end REST api. We won't be able to make that call until we actually write the api, but we'll get started on that in the next section.

Let's have a quick look at the way Go works with JSON files.

Let's get started writing the Go code for our REST api.

Let's simplify things by installing a third part routing package, and moving our handlers into their own file, with one function per handler.

Let's try connecting our front end Vue application to our back end API server.

Let's modify our routes.go file in the Go back end API to take care of CORS restrictions.

Let's try connecting from our Vue front end to our Go back end API one more time, just to make sure CORS is set up properly in our routes file.

Let's write two helper functions that make it easier to read & write JSON in our back end API.

Let's update our Login handler to use our helper functions for reading and writing JSON.

Let's write one more helper function that makes writing error responses back to the end user as JSON a simple one liner.

If you don't already have a Postgres client, Beekeeper Studio will do the trick.

Let's connect to our database with a Postgres client, and set up a simple users table.

Let's create a driver package that we'll use to connect our back end API to a Postgres database.

Let's clean up our driver package a bit, and then try connecting our API to the Postgres database.

Let's get our hard coded database connection information out of our source code, and move them into an environment variable. We'll do this using a Makefile, which makes our lives much easier.

We need some means of representing what is stored in the users table in Postgres in Go; let's set up a model to take care of that.

Let's go back to Beekeeper Studio and set up a tokens table in our Postgresql database.

Let's set up a Token model in our data package, which will map what is in Postgres with our Go code.

Let's simplify the way that we share database information to the various parts of our application, and set up a single function that connects to the database and gets a slice of all users stored in the users table.

Let's add one row to the users table in the Postgres database so that we can try out our GetAll() function.

Let's make sure everything works by creating a test route that calls the GetAll function on our User type, and write some JSON to the browser window.

We'll need a few methods on the User type to get users, so let's write a couple: one to get a user by ID, and another to get a user by email address.

Let's write the methods necessary to update a user, and to delete an existing user.

We're going to need to be able to insert users into the database, so let's write the Go code to insert a user into the Postgres database.

We are also going to need to be able to reset user passwords, and to validate a user supplied password to make sure it matches the hash that we have in the database. Let's take care of that.

Let's get started writing the necessary functions for the Token type.

Let's write two functions on the Token type: one to generate a token, and another to authenticate a token and make sure that it's valid.

We're going to have to be able to insert and delete tokens, so let's take care of that.

One useful function we can attach to the Token type is a means of ensuring that a given token is valid. In order to be considered valid, a token must exist, must be associated with a user that exists in the database, and it must not have expired. Let's create that function now.

Let's get started trying out the functions that interact with Postgres.

Let's try out our GenerateToken function and make sure it works.

Let's see if we got the function that inserts a token into the database right.

Let's make sure that the ValidToken function works as expected by creating a test route and handler.

Let's add a constraint to the users table which will only allow unique email addresses.

Let's make the JSON that we send back a bit more readable by implementing and using an envelope type.

In order to connect from our Vue front end to our Go back end and actually authenticate a user, we need to finish up our Login handler. Let's do that now.

We already call the back end from our Vue application, but now we need to make some changes to our front end so that we actually pass the necessary data. Let's get started.

Let's try authenticating and see if we get an error when we should, and that we get a token when we authenticate successfully.

Right now, our login process is not very intuitive, since we don't give any kind of feedback to the user when they log in. Let's improve that.

Let's get started making the logout process functional.

In order to log a user out completely, we need to delete the token saved in the database. Let's take care of that.

Let's finish up the logout process by updating our Vue Header component to make a fetch request to the back end API in order to delete the user's token from the database.

It's useful to save information  like our token in a secure cookie so that users don't have to log in every time they visit the site. Let's take care of that now.

Let's make some final changes to both the front and back end in order to compete our improved login process.

While we're in development, it's useful to have nicely formatted JSON, but in production, that's a waste of resources. Let's make things more efficient by updating our Makefile to set an environment variable, and then use that in the API back end.