ASP.NET Core 3 and Vue js 2 Project - CMS and Shopping Cart

Create an API project in Visual Studio using an ASP.NET Core Web API template, configure ASP.NET Core 3.1, expose a controller and model, and prepare Git source control for changes.

Create and organize models in the api project, including product, category, page, and order entities with id, name, price, image upload not mapped, plus a cart with items and total.

Create and configure a database for an ASP.NET Core 3 and Vue.js 2 project by setting up API context with DbSet for pages, products, categories, and orders, and applying migrations.

Seed the CMS database by creating initial pages, categories, and products with sample data, including images, and ensure the data only seeds when empty.

Learn to build RESTful API controllers in ASP.NET Core 3, configure routing, enable static files, and implement get methods to retrieve pages, products, categories, and orders as json.

Create a Vue project via Git Bash on Windows, install Axios and related packages, run npm run serve, and refine the starter component in VS Code.

Add a header component to the main menu in the view application, integrating a bootstrap navigation for home, examples, and the shopping cart.

Fetch API pages and display them in the header menu by building a Vuex store with actions and mutations, wiring axios requests to /api/pages, and rendering navigational links.

Import and register the store in the app, then configure CORS to allow localhost:1880 as origin and any method, enabling the API to communicate.

Enable routing by creating a router file, importing views, configuring history mode, and integrating it into main.js to enable in-app navigation without full page reload.

Create a Vue pages component that renders content based on the URL slug, wiring an optional slug route and mapping slugs to pages, with redirects for unmatched routes.

Create the categories component and category list to render categories from the store, expose a /categories route, and bind links to each category by name.

Create a products component for asp.net core 3 and vue js 2 project, with actions to fetch all products or by category and routes for category slugs, display product cards.

Build the products component to fetch products by category via the API, and display images with a global currency filter in a Vue.js front end.

Enhance category navigation by using a lowercase slug and an active class, update api and store index to display category slugs, and verify on refresh.

Learn to implement product pagination with page size, current page, and category filtering in a Vue frontend and ASP.NET Core API, using skip and take and a product count endpoint.

Create a Vue.js product pagination component that manages current page and page count, renders previous, next, and page links, and fetches paged products via a category-aware pagination action.

Create a cart summary component that tracks cart items and item count, computes the total price, and connects to the cart page via a router link.

Learn how to add product functionality to the cart and initialize the cart on app startup, including adding products, updating quantities, and persisting cart data with local storage.

Create a shopping cart component in a Vue.js 2 and ASP.NET Core 3 project, showing items, quantities, price, subtotal, and actions to add, subtract, or remove.

Implement and test the shopping cart component by wiring add, subtract, remove, and clear cart actions to the cart module, updating item quantities, subtotal, and total in real time.

Create a validation error component for the checkout page using Vue data, driven by a checkout prop, displaying required and email errors via a messages array and a danger class.

Develop the checkout component in a Vue project with name, email, and address fields, using a validation error component and required and email validators.

Finish the checkout component by wiring a submit order action that sends name, email, address, card, and total via form data to /api/orders, then show a thank-you page.

Create the admin area by adding an admin component and folder, wire router links to products, pages, orders, and a review route, and integrate the admin navigation into the header.

Create an admin products component that lists all products in a table with name, image, price, category, and actions, setting the current category to all.

Learn to edit and add products with a single product editor component that switches between add and edit mode, handling name, description, price, category, and image.

Shows how to load product data into the editor form in edit mode, fetch a product by id, and populate fields such as name, description, price, and category.

Implement handle product method in the product data component, manage image display and uploads with form data, and support add and edit modes for name, description, price, image, category id.

Implement create and update endpoints for products, handle optional image uploads with a default image, and manage old image deletion when updating, using form data and web host environment integration.

Test and validate the product editor in an asp.net core 3 and vue js 2 cms shopping cart, enforcing required fields including name, description, price and category, with correct paging.

Implement delete product functionality in an ASP.NET Core and Vue.js CMS, wiring a delete API call, updating store state, and managing pagination and images after removal.

Set up and manage admin pages in the cms interface using vue admin components by creating, editing, and deleting pages with names, slugs, and actions, while mapping state and actions.

Initialize and configure the page editor component to create, validate, and manage CMS pages with name, slug, content, and actions for adding and editing pages.

Implement add, edit, and delete API endpoints in the page editor’s pages controller, using post, put, and delete, with update handling and proper responses, then verify via the main menu.

Add a wysiwyg editor to the CMS page editor by installing and importing a Vue editor, wiring it into the page editor's text area, and rendering HTML content for pages.

List and manage orders in the admin area by fetching all orders, wiring Vuex actions and state, and displaying each order's name, email, address, content, and total.

Learn to implement authentication in an ASP.NET Core 3 and Vue project by building an auth controller with a login API, using hard-coded username and password and JSON responses.

Build a Vuex-driven login flow that authenticates users via a log-in endpoint, stores an authenticated state, and guards admin routes in the CMS and shopping cart project.

Discover ten-dollar course access and exclusive deals on the website for the ASP.NET Core 3 and Vue.js 2 project, CMS and shopping cart.