Vue 3 and Django: A Practical Guide with Docker

Install the Django framework, initialize a new project, access the admin panel, and run the development server, noting migrations will be added later.

Learn to containerize a Django app with Docker and Docker Compose, pin Python 3.9, install requirements, configure a database service, map ports, and manage volumes.

Execute migrations inside the docker container using docker compose for the admin_api service, create a superuser, and access the Django admin at localhost:40000/admin.

Create a first api endpoint in django rest framework by defining hello view as a get method, wiring it to /api/hello, and testing with Postman to return a json hello.

Create a Django user model with first name, last name, and unique email, migrate the database, and expose a get endpoint to return users.

Demonstrate building a Django API with Docker, using a user serializer and register view to validate passwords and create users in a MySQL database.

Configure the user serializer to accept first name, last name, email, and write_only password, ensuring passwords are used for registration but not returned in responses, including proper many through handling.

Extend the Django user model to login with email, implement password hashing during user creation, and run migrations in a Docker environment.

Build a Django login API that validates email and password, handles user not found and incorrect password errors, and returns a success message ahead of JWT token retrieval.

Generate a jwt token by creating a payload with user id, expiry, and a secret key, encode with hs256, and set it as an http-only cookie for authentication.

Learn to fetch the authenticated user in Django REST framework by building a class-based API view with JWT authentication, cookie-based token retrieval, and serialized user response, guarded by is_authenticated.

Implement a logout function in a Django API view that deletes the JWT cookie, returns a success message, and updates URLs for testing to confirm the user is logged out.

Learn to add role and permission models in Django, link users to a role via a foreign key, and implement a many-to-many role-permission relation via a through table; run migrations.

Define a fixed set of permissions and use fixtures to create roles and users. Load the data into the database with manage.py loaddata, establishing admin, editor, and viewer roles.

Implement a permissions api view and serializer in Django, import the permission model, and expose all permissions through an authenticated endpoint, demonstrated after admin login and debugging steps.

Learn to replace function-based views with Django REST framework viewsets, mapping list, retrieve, create, update, and destroy to a single class, with authentication, permissions, and a string primary key.

Create and customize a role serializer in Django REST framework, return roles with nested permissions by using a permission serializer and many=True, ensuring permissions appear as objects in API responses.

Demonstrates creating roles with a Django serializer, validating request data, and saving instances, using a permission related field with to_representation to serialize permissions as an array.

Demonstrates implementing the five role methods by updating a role with a serializer, validating data, saving changes, and returning 202 accepted or no content during Postman testing.

Explore generic API views to manage user endpoints with retrieve, list, create, update, and destroy actions using mixins, returning standardized response data for front-end consumption.

Learn to implement a custom pagination for the user list by defining default page and page size, reading them from the request, and returning a paginated response.

Implement an update workflow for user data by wiring the role relation through a serializer, handling post requests, and applying partial updates with a default password.

Implement profile info and profile password updates in a Vue 3 and Django app with Docker, using API views, partial updates, a user serializer, and password confirmation validation.

Learn to expose authenticated user permissions by extracting role-based permissions in a lambda function, so the front end receives the permissions directly for display.

Create a Django product model with title, description, image, and price fields, run migrations, and refresh the database to add products.

Create product routes with Django rest framework by building a product serializer and a generic API view, adding authentication, and defining URLs for CRUD operations.

Upload images by configuring a media folder and URL, handling multipart requests with rest framework parsers, saving files to default storage, and returning the uploaded image URL for media routing.

Create and relate order and order item models in Django with customer details, migrate schemas, and expose a JWT-authenticated API for listing and retrieving orders.

learn to implement a serializer method field called total to calculate each order’s total by summing price times quantity of its order items, exposing the value to the frontend.

Export csv shows building a Django api view to export orders to a csv file, with text/csv content type, attachment, and headers like name, email, product title, price, and quantity.

Create a chart api view using raw sql to join orders and order items, group by date, and sum quantity times price for each day to power chart data.

Define a glossary view permissions class in Django to enforce view and edit access for authenticated users, using a base permission and a shared permission object.

Enable cross-origin requests between the front end and Django by installing and configuring the CORS headers package, adding the middleware, and enabling allow credentials for cookies.

Create the Vue 3 project named view admin with manually selected features like TypeScript and version three, then install energy and viewshed light and run npm run server.

Learn to refactor a Vue 3 project by removing unused views and assets, set up routing with a reusable menu component, and apply Bootstrap templates to create a clean dashboard.

Structure authentication by creating public and secure folders for login and register pages, then route the register component and apply styling for a polished user interface.

Create a form in Vue 3 using ref variables in setup, bind inputs with v-model, prevent default submit, and prepare data for sending to the Django server.

Learn to register a user by sending data to a localhost api register endpoint with axios, using direct actions or an async function, and redirect to login on success.

Improve the login form by removing visuals, bind email and password with v-model, and submit via axios to the login endpoint to obtain a token and cookies.

Implement a secure component with child routes in Vue 3, rendering a dashboard as a child and checking user authentication on mounted by calling the backend before displaying content.

Build a logout flow by wiring a click listener to the sign-out button, posting logout via Axios, and redirecting to login with router, with error handling.

Learn to display the user's name in the navigation by fetching user from the response and passing it as a prop, then render first and last name with optional chaining.

Display a user list in a secure folder by building Vue 3 component in a Django Docker setup, fetch users on mount, loop them, and show name, email, and actions.

Apply an active class to router links and adjust paths so dashboard and users highlight correctly. Redirect the main path to the dashboard to land users there by default.

Implement next and previous pagination controls in a Vue 3 and Django app, using a load function with a page parameter TypeScript, and prevent navigating past first or last pages.

Learn to delete a user with Vue 3 and Django, using a delete function, confirm prompt, and endpoint users/{id}, then filter the frontend list to remove the deleted user.

Create a user class, a permission class, and a role class, initialize defaults, export them, and use an entity interface to enforce a consistent id.

Create a Vue 3 users create component that provides a form with first name, last name, email, and role, posts the new user, and returns to the users table.

Prefill the edit form by retrieving the user id from the url and fetching the current user data. Then submit the updates with a put request to update the user.

Learn to build a Vue 3 role management view that fetches roles via axios, displays a roles table with name and actions, and enables delete with confirmation.

Create roles in a Vue 3 and Django app by building a name and permissions form, loading permissions, managing selections, and submitting to create the role.

Update roles in a Vue 3 and Django app by prefill role data, renaming role to rules added, managing permissions with checkboxes, and submitting the updated role to the server.

Build a Vue 3 product component in a Django app, fetch and render products with image, title, description, and price, add action buttons, and migrate to TypeScript.

Initialize a reusable paginator component in Vue to handle pagination state, receive last page via props, emit page-changed events, and centralize load logic to avoid code duplication.

Create a product form in a vue 3 and django app, using axios to post title, description, image, and price, then navigate to the products page.

Upload images by selecting a file input, create form data, send to the server, and set the returned image URL to the input for quick previews.

Create a reusable image upload component in Vue 3 with TypeScript, wiring a template and function to handle file input and upload, then verify in the browser.

Update and manage products in the app by creating a product class with id, title, description, image, and price, fetching existing product data, and updating fields and the submit flow.

Create an orders list in Vue 3 and Django with Docker, fetch orders, render a table with id, name, email, and total, and implement pagination and an export option.

Build a Vue 3 view component to display order items in a table, fetch orders and items via an API, and model order and order item entities.

Implement a click-driven export that calls the server, handles a blob response as a csv file, creates a download URL, and programmatically clicks a link to save orders.csv.

Install and configure a bar chart in a Vue 3 dashboard using c3, fetch daily sales data from the backend, and render a time-series x-axis with formatted dates.

Build a profile page with a profile component and router route, featuring two forms to update first name, last name, and email, and to update the password using axios.

Configure a Vuex store for user management in a Vue 3 app, using actions and mutations to set and retrieve the user, and guard rendering until the user data loads.

Learn how to dispatch events with Vuex by updating the user via a computed store reference, retrieving the user from view X, and syncing changes back to the store.

Create and organize Vuex modules as user models to group actions, mutations, and state for scalable apps, using namespace, TypeScript typing, and commits to keep the store manageable.

Create a TypeScript getter to return the full name from first and last names for use in navigation, and build a user object from response data.

Implement a can view function to check page permissions, apply it to the menu and edit controls, create a test role, and verify access by logging in as a user.