Tech Seeker

In this article, we are going to implement a sample Vue(3.0) CRUD example, using JSON Server(Fake API). Vue(3.0): Vue(3.0) is a javascript framework for creating a single-page application. Vue application built by component. The components are the smallest unit of the application which comprises 'Script', 'Template(HTML)', and 'Style'. Eventually, multiple components together create the Vue application. Create Vue(3.0) Application: Let's create a sample Vue(3.0) application to accomplish our demo. To create a VueJS application our local machine should contain NodeJS. So go to "https://nodejs.org/en/download" and download the Node. Now run the below command to create the Vue3 application.  npm init vue@latest On running the above command we have to choose a few options before creating a vue application, in those options we can choose the default option as 'No', but for the routing option select 'Yes' like below. Now open our v

The main objectives of this article are: Create HTTP Delete Endpoint In API Project. VueJS Application To Invoke The Delete API. Create HTTP Delete Endpoint In API Project: Let's create the HTTP Delete endpoint in the API project. API_Project/Controllers/BeachController.cs: [HttpDelete] [Route("{id:int}")] public async Task<IActionResult> Delete(int id) { var beachToDelete = await _myWorldDbContext.Beach.FindAsync(id); if (beachToDelete == null) { return NotFound(); } _myWorldDbContext.Beach.Remove(beachToDelete); await _myWorldDbContext.SaveChangesAsync(); return Ok(); } (Line: 1)The 'HttpDelete' attribute allows only HTTP delete requests to consume the action method. (Line: 2) The 'Route' attribute is defined where we need to pass the integer 'id' value in the route. (Line: 5) Based on the 'id' value try to fetch the record from the database. (Line: 6-9) Checking whether records exist in the database or not. (Line: 10) U

The main objectives of this article are: Create Get By Id Endpoint In API Project. Create An Update Endpoint In The API Project. Create VueJS Component To Display Update Form. Create Get By Id Endpoint In API Project: To update any record, we first need to fetch the record by its 'id'. So let's create a get by 'id' endpoint in our API project. API_Project/Controllers/BeachController.cs: [HttpGet] [Route("{id:int}")] public async Task<IActionResult> Get(int id) { var becahById = await _myWorldDbContext.Beach.Where(_ => _.Id == id) .FirstOrDefaultAsync(); return Ok(becahById); } (Line: 1) Since it is a second HTTP Get action method, so we have to explicitly specify the route. (Line: 2) The route expression '{id:int}' represents 'id' value must be the integer value. (Line: 5) Fetching the record by 'id' from the database. Create An Update Endpoint In The API Project: Let's create the HTTP PUT action method. API_Pr

The main objectives of this article are: Create HTTP POST Endpoint In API Project. Create VueJS Component With A Form To Add New Item. Create A Post Endpoint Action Method In The API Project: Let's create an HTTP Post action method to save a new record into the database. API_Project/Controllers/BeachController.cs: [HttpPost] public async Task<IActionResult> Post(Beach newBeach) { _myWorldDbContext.Beach.Add(newBeach); await _myWorldDbContext.SaveChangesAsync(); return Ok(newBeach); } (Line: 1) The 'HttpPost' attribute invokes our action method for HTTP Post requests. (Line: 2) Here our action method should receive the item to add as payload data. (Line: 4) Our new record data instance adding to the database context. (Line: 5) The 'SaveChangesAsync()' method inserts the new record into the database. Create An 'AddBeach' Component In VueJS Application: Let's create the new vuejs component like 'AddBeach' in 'src/views/beaches

The main objectives of this article are: Create A HTTP GET API Endpoint To Fetch All Data Create Vue Component To Display All Data Create A 'Beach' Controller In The API Project: A Controller is an entity or class that contains a logical method or function that gets executed for an HTTP request from the clients. Let's create a controller 'BeachController.cs'. API_Project/Controllers/BeachController.cs: using Dot7.API.CRUD.Data; using Microsoft.AspNetCore.Mvc; namespace Dot7.API.CRUD.Controllers; [ApiController] [Route("[controller]")] public class BeachController:ControllerBase { private readonly MyWorldDbContext _myWorldDbContext; public BeachController(MyWorldDbContext myWorldDbContext) { _myWorldDbContext = myWorldDbContext; } } (Line: 6) The 'ApiController' attribute applies all API rules to the controller. (Line: 7) The 'Route("[controller]")' attribute enables the attribute routing for the contro