Mô tả

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.


Bạn sẽ học được gì

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

Yêu cầu

  • Some experience with HTML, Javascript, and Go

Nội dung khoá học

13 sections

Introduction

8 lectures
Introduction
06:00
About me
01:01
Options API vs. Composition API
01:52
Installing Go
01:39
Installing Visual Studio Code
01:17
Installing the Vetur VS Code extension
00:39
Installing make
01:27
How to ask for help
01:14

Getting Started with Vue

17 lectures
What we'll cover in this section
01:03
Using Vue with a CDN ( we'll use npm later)
08:06
The structure of a Vue app
04:02
Adding a simple form element and binding data
03:54
Adding a counter
04:42
Vue Components - Getting Started
04:33
Creating a reusable form input component
05:18
Trying out our TextInput component
03:07
The Vue lifecycle and client side validation
07:13
Nesting components within components
13:15
Adding a select form component
07:10
Adding a checkbox form component
03:19
Conditional Rendering
10:50
Fetching remote data
07:06
Using the data we fetch in our Vue application
07:14
Adding some interactivity to our list of books
02:50
Removing a book from the list
04:30

Working with Vue using Single File Components, the vue-cli and Node.js

9 lectures
Installing Node.js
01:34
Installing vue-cli
01:02
Building and running a simple Vue application with vue-cli
03:42
The structure of a vue-cli application
07:54
Getting started with our app
03:07
Registering header, body, and footer components
07:27
Adding navigation to our header component
01:43
Adding content to our body component
02:32
Adding content to our footer component
02:58

Routing with the Vue Router

8 lectures
Installing the Vue Router
01:56
Getting started with the Vue Router
03:12
Adding our routes in App.vue and main.js
03:12
Creating a second component and updating our navigation links
03:16
Adding and using our form Vue Components from the previous section
09:02
Creating and implementing a re-usable Form tag component
04:31
Improving our Login form by binding data and listening for an event
04:54
Improving our FormTag and simplifying client side validation
09:52

Building a Go REST back end

9 lectures
How Go works with JSON files
08:26
Setting up our project
12:17
Improving routes
13:43
Connecting from Vue to Go - the first try
06:02
Implementing CORS in our routes.go file
04:20
Connecting from Vue to Go - the second try
01:46
ReadJSON and WriteJSON helper functions
08:23
Simplifying our handlers to use the new helper functions
03:43
Adding a helper function to generate error messages
02:15

Authentication

27 lectures
Setting up a database with Docker
04:38
Choosing a Postgres client
00:53
Trying out Beekeeper and setting up a users table
04:23
Creating a database driver package
09:07
Connecting to the database using our driver package
05:28
Using a Makefile to simplify our lives
05:08
Setting up a User model
05:34
Setting up the tokens table
02:46
Setting up a Token model
04:12
How we will write database functions for authentication
09:09
Manually adding a user to the database
02:39
Creating a test route and handler to try things out
02:32
Writing methods to get a user by email or id
03:54
Writing methods to update and delete users
03:49
Writing the Insert method for the User type
05:05
Writing the Password reset and PasswordMatches functions for the User type
05:15
Getting started with methods for the Token type
05:43
Generating and authenticating a token
12:59
Inserting and deleting tokens
06:08
Adding a ValidToken method to the Token type
03:40
Trying out the database functions: adding a user
05:47
Trying out generating a token
04:16
Trying out the Token type's Insert function
03:11
Trying out the ValidToken function
06:06
Adding a unique constraint to the users table
01:45
Checking for database errors in errorJSON
06:13
Improving our jsonResponse type with an envelope
03:49

Authentication from Vue to the Go Back End

11 lectures
Updating our Login handler
05:46
Updating the Vue front end to connect to /users/auth and get a token
05:48
Trying out authentication
02:18
Sharing data between components using a simple store
07:08
Improving the login process
07:38
Logging out
03:20
Deleting a user's token on the back end on logout
03:36
Making the request to delete a token from the front end
04:09
Saving the token as a cookie
11:01
Finishing up the improved login process
05:52
An aside: speeding things up when writing JSON in production
04:18

Protecting Routes and managing site content

28 lectures
Protecting routes
05:07
Trying out our route protection middleware
05:37
Setting up stub components and routes
08:06
Updating the Header component to link to our stub components
09:00
Another aside: setting environment variables with a .env file
04:26
Extracting authentication logic and security to a separate module
04:54
Using our new Security JavaScript module
03:28
Securing routes to protected components
04:31
Getting a list of all users from the back end API
07:19
Displaying the list of all users
04:31
Getting started with the UserEdit Vue component
11:02
Completing changes on the front end to submit a user to the back end
10:32
Setting up the handler and route to save and update a user
06:38
Trying out adding a user to the system
01:28
Editing an existing user
05:54
Trying out our updated code to edit a user
03:18
Deleting a user
11:46
Listening for emitted events in order to simplify user notificiations
03:02
Emitting notie related events
05:09
Checking for ready status when fetching
04:37
Adding a "status" column to show whether a user is logged in or not
06:31
Updating the back end to handle logging a user out
09:12
Adding a handler to log the user out
06:24
Updating the front end to log a user out
06:40
Finishing up updates to the front end
05:44
Re-render component: Updating the list of users after logging someone out
06:16
Checking status of token on every request
11:42
Trying out our ValidateToken handler and Security.checkToken() functionality.
02:33

Setting up the Books Catalogue

19 lectures
Adding database tables for Books, Authors, and Genres
02:33
Inserting data, and reviewing the new code
06:27
Getting started with listing all books
09:21
Getting started displaying books on the front end
12:10
Adding genres to the books and filtering by genre
11:50
Improving our filter by adding a TransitionGroup
07:31
Displaying individual books
13:17
Saving the state of the Books component
08:00
Listing all books for adminstrators
08:10
Simplifying which components are cached, or kept alive
04:10
Adding a book - part one
17:30
Adding a book - part two
08:42
Adding a book - part 3
12:51
Getting the list of authors from the back end API
04:24
Populating the select in our BookEdit Vue component with JSON from the back end
06:18
Writing the EditBook handler
11:37
Trying out inserting a book on the front end
06:45
Editing a book
11:22
Deleting a book
05:13

Testing the Back End

7 lectures
Setting up the test environment
05:39
Testing Routes
07:28
Testing Handlers
09:56
Testing readJSON and writeJSON
08:28
Testing errorJSON
04:43
Improving our errorJSON test
05:40
Integration testing
12:02

Using the Composition API

4 lectures
What is the Composition API
01:59
Converting the Books component to use the Composition API
12:27
Converting the Book component to the Composition API
08:03
Converting the Login component to use the Composition API
08:01

Making the Site Live

4 lectures
Updating dependencies
03:57
Updating the .env
03:15
Running npm run build to get the production version of our project
01:58
Spinning up a docker image with our production build
05:07

Final thoughts and suggestions

1 lectures
Where to go from here
03:00

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.