Skip to main content

Posts

Showing posts from January, 2023

Part-3 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example

The main objectives of this article are: .NET7 Web API Install .NET7 SDK And IDE Create A .NET7 Web API Application SQL Database ConnectionString Entity Framework Core Install Entity Framework Core NuGet Packages Entity Framework Core DatabaeContext .NET7 Web API: Web API is framework for building an HTTP service that can be accessed by any clients like browser, mobile devices, and desktop apps. In simple terminology API(Application Programming Interface) means an interface module that contains a programming function that can be requested via HTTP calls to save or fetch the data from their respective clients. Some of the key characteristics of API are: Supports HTTP verbs like 'GET', 'POST', 'PUT', 'DELETE', etc. Supports default responses like 'XML', and 'JSON'. Also can define custom responses. Supports self-hosting or individual hosting, so that all different kinds of apps can consume it. Authentication and Authorization are easy to i

Part-2 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example

The main objectives of this article are: Vue(3.0) Vue(3.0) Composition API. Vue(3.0): Vue(3.0) is a javascript framework for creating a single-page application. Vue application built by components. The components are the smallest unit of the application which comprises 'Script', 'Template'(HTML), and 'Style'. Eventually, multiple components together create the Vue application. Vue(3.0) Composition API: VueJS application can be developed with either 'Options API' or 'Composition API' or 'Both combinations'. Using composition API we can import the functions(vue functions) instead of declaring them as options The primary advantage of Composition API is that it enables clean, efficient logic reuse in the form of composable functions. Example Vue Component - Composition API Technique 1: <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ count: 0 }) function increment() {