This project is a Vue.js-based Product Management System designed to showcase CRUD operations with a .NET backend, featuring functionalities like product listing, creation, editing, and deletion. It includes pagination and sorting capabilities for efficient data handling and display.
- CRUD Operations: Create, Read, Update, and Delete products.
- Pagination: Navigate through products in paginated format.
- Sorting: Sort products based on price.
- Responsive Design: Compatible with various screen sizes.
- Image Upload: Supports image upload for products.
The backend for this project is built using .NET. It provides RESTful APIs that the Vue.js frontend consumes. Here's how to set it up:
- .NET SDK (version specified in your project)
- SQL Server (if your project uses SQL Server)
-
Navigate to the .NET project directory:
cd path/to/your/netproject
-
Restore dependencies:
dotnet restore
-
Apply migrations (if your project uses Entity Framework):
dotnet ef database update
-
Run the application:
dotnet run
This will start the .NET server, typically on https://localhost:7294.
Make sure that the Vue.js application is set up to connect to the .NET backend by configuring the API endpoint URLs. You might need to adjust the Vue.js environment variables or API service configuration to point to the .NET backend server's address.
Before you begin, ensure you have Node.js and Vue CLI installed on your system.
To get the project up and running on your local machine, follow these steps:
-
Clone the repository:
git clone https://github.com/LucasVanni/CRUD-VUE-DOTNET.git cd CRUD-VUE-DOTNET
-
Install dependencies:
yarn
-
Serve the application:
yarn dev
The application will be available at http://localhost:5173/
The application allows you to:
View Products: Navigate through the list of products.
- Create New Product: Add a new product by providing the required information.
- Edit Product: Update product details.
- Delete Product: Remove a product from the list.
- Sort Products: Click on the 'Price' to sort products by their price.
- Paginate Products: Use the pagination controls to navigate between pages.
Contributions are welcome! Please feel free to submit a Pull Request or create an issue for any changes or additions.
This project is licensed under the MIT License - see the LICENSE.md file for details.
- Vue.js Team for the amazing frontend framework.
- The .NET community for backend support.