English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 152 lectures (14h 46m) | 5.14 GB
Learn how to work with Vue 3 and a Go back end from an award winning university professor.
Vue.js is, as they say on their website, an “approachable, performant and versatile framework for building web user interfaces.” That sentence really does not give Vue its full due. It is arguably the best solution currently available for building highly interactive, easy to maintain, and feature-rich web applications currently available. Many developers find it easier to learn than React or Angular, and once you learn the basics, it is easy to move on to building more complex applications.
Go, commonly referred to as Golang, is an easy to learn, type safe, compiled programming language that has quickly become a favourite among people writing API back ends, network software, and similar products. The ease with which Go works with JSON, for example, makes it an ideal solution to develop a back end for a Single Page Application written in something like Vue.
This course will cover all of the things you need to know to start writing feature-rich, highly interactive applications using Vue.js version 3 for the front end, and Go for the back end API.
We will cover:
- Working with Vue 3 using a CDN
- Working with Vue 3 using the vue-cli, node.js and npm
- Learn both the Options API and the Composition API for Vue 3
- How to work with props
- How to build reusable Vue components
- How to build and use a data store with Vue 3
- Creating, validating, and posting forms using fetch and JSON
- Emitting and processing events in Vue
- Conditional rendering in Vue
- Animations and transitions in Vue
- Working with the Vue Router
- Protecting routes in Vue (requiring user authentication)
- Caching components using Vue’s KeepAlive functionality
- Implementing a REST API using Go
- Routing with Go
- Connecting to a Postgresql database with Go
- Reading and writing JSON with Go
- Complete user authentication with Go using stateful tokens
- Testing our Go back end with unit and integration tests
- And much more.
Vue is one of the most popular front end JavaScript frameworks out there, and Go is quickly becoming the must-know language for developers, so learning them is definitely a benefit for any developer.
What you’ll learn
- Learn how to create interactive Web applications using Vue 3
- Learn how to create a REST backend using Go (often referred to as Golang)
- Learn how to create a secure user authentication system with Vue and Go
- Learn best practices for creating a secure, scalable web application
Table of Contents
Introduction
1 Introduction
2 About me
3 Options API vs. Composition API
4 Installing Go
5 Installing Visual Studio Code
6 Installing the Vetur VS Code extension
7 Installing make
8 How to ask for help
Getting Started with Vue
9 What we are going to cover in this section
10 Using Vue with a CDN (npm comes later)
11 The structure of a Vue app
12 Adding a simple form element and binding data
13 Adding a counter
14 Vue Components – Getting Started
15 Creating a reusable form input component
16 Trying out our TextInput component
17 The Vue lifecycle and client side validation
18 Nesting components within components
19 Adding a select form component
20 Adding a checkbox form component
21 Conditional Rendering
22 Fetching remote data
23 Using the data we fetch in our Vue application
24 Adding some interactivity to our list of books
25 Removing a book from the list
Working with Vue using Single File Components, the vue-cli and Node.js
26 Installing Node.js
27 Installing vue-cli
28 Building and running a simple Vue application with vue-cli
29 The structure of a vue-cli application
30 Getting started with our app
31 Registering header, body, and footer components
32 Adding navigation to our header component
33 Adding content to our body component
34 Adding content to our footer component
Routing with the Vue Router
35 Installing the Vue Router
36 Getting started with the Vue Router
37 Adding our routes in App.vue and main.js
38 Creating a second component and updating our navigation links
39 Adding and using our form Vue Components from the previous section
40 Creating and implementing a re-usable Form tag component
41 Improving our Login form by binding data and listening for an event
42 Improving our FormTag and simplifying client side validation
Building a Go REST back end
43 How Go works with JSON files
44 Setting up our project
45 Improving routes
46 Connecting from Vue to Go – the first try
47 Implementing CORS in our routes.go file
48 Connecting from Vue to Go – the second try
49 ReadJSON and WriteJSON helper functions
50 Simplifying our handlers to use the new helper functions
51 Adding a helper function to generate error messages
Authentication
52 Setting up a database with Docker
53 Choosing a Postgres client
54 Trying out Beekeeper and setting up a users table
55 Creating a database driver package
56 Connecting to the database using our driver package
57 Using a Makefile to simplify our lives
58 Setting up a User model
59 Setting up the tokens table
60 Setting up a Token model
61 How we will write database functions for authentication
62 Manually adding a user to the database
63 Creating a test route and handler to try things out
64 Writing methods to get a user by email or id
65 Writing methods to update and delete users
66 Writing the Insert method for the User type
67 Writing the Password reset and PasswordMatches functions for the User type
68 Getting started with methods for the Token type
69 Generating and authenticating a token
70 Inserting and deleting tokens
71 Adding a ValidToken method to the Token type
72 Trying out the database functions adding a user
73 Trying out generating a token
74 Trying out the Token type’s Insert function
75 Trying out the ValidToken function
76 Adding a unique constraint to the users table
77 Checking for database errors in errorJSON
78 Improving our jsonResponse type with an envelope
Authentication from Vue to the Go Back End
79 Updating our Login handler
80 Updating the Vue front end to connect to usersauth and get a token
81 Trying out authentication
82 Sharing data between components using a simple store
83 Improving the login process
84 Logging out
85 Deleting a user’s token on the back end on logout
86 Making the request to delete a token from the front end
87 Saving the token as a cookie
88 Finishing up the improved login process
89 An aside speeding things up when writing JSON in production
Protecting Routes and managing site content
90 Protecting routes
91 Trying out our route protection middleware
92 Setting up stub components and routes
93 Updating the Header component to link to our stub components
94 Another aside setting environment variables with a .env file
95 Extracting authentication logic and security to a separate module
96 Using our new Security JavaScript module
97 Securing routes to protected components
98 Getting a list of all users from the back end API
99 Displaying the list of all users
100 Getting started with the UserEdit Vue component
101 Completing changes on the front end to submit a user to the back end
102 Setting up the handler and route to save and update a user
103 Trying out adding a user to the system
104 Editing an existing user
105 Trying out our updated code to edit a user
106 Deleting a user
107 Listening for emitted events in order to simplify user notificiations
108 Emitting notie related events
109 Checking for ready status when fetching
110 Adding a status column to show whether a user is logged in or not
111 Updating the back end to handle logging a user out
112 Adding a handler to log the user out
113 Updating the front end to log a user out
114 Finishing up updates to the front end
115 Re-render component Updating the list of users after logging someone out
116 Checking status of token on every request
117 Trying out our ValidateToken handler and Security.checkToken() functionality
Setting up the Books Catalogue
118 Adding database tables for Books, Authors, and Genres
119 Inserting data, and reviewing the new code
120 Getting started with listing all books
121 Getting started displaying books on the front end
122 Adding genres to the books and filtering by genre
123 Improving our filter by adding a TransitionGroup
124 Displaying individual books
125 Saving the state of the Books component
126 Listing all books for adminstrators
127 Simplifying which components are cached, or kept alive
128 Adding a book – part one
129 Adding a book – part two
130 Adding a book – part 3
131 Getting the list of authors from the back end API
132 Populating the select in our BookEdit Vue component with JSON from the back end
133 Writing the EditBook handler
134 Trying out inserting a book on the front end
135 Editing a book
136 Deleting a book
Testing the Back End
137 Setting up the test environment
138 Testing Routes
139 Testing Handlers
140 Testing readJSON and writeJSON
141 Testing errorJSON
142 Improving our errorJSON test
143 Integration testing
Using the Composition API
144 What is the Composition API
145 Converting the Books component to use the Composition API
146 Converting the Book component to the Composition API
147 Converting the Login component to use the Composition API
Making the Site Live
148 Updating dependencies
149 Updating the .env
150 Running npm run build to get the production version of our project
151 Spinning up a docker image with our production build
Final thoughts and suggestions
152 Where to go from here
Resolve the captcha to access the links!