Vue 3 and Django: A Practical Guide with Docker

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.