Proctor 100

SimpleAJAX page reload ke bina server se data laata hai. Aaj kal fetch() + Promises.

fetch('/api/users').then(r => r.json()).then(data => { ... })
Promise: future value (pending/fulfilled/rejected). fetch Promise return karta hai.
SPA (Vue): ek HTML, baaki routes JS se, partial update. MAD1 generally full page render (Jinja) — submit pe poora refresh.
async/await Promise ka clean syntax.

SimpleVue = UI ka smart assistant. Data badlo, screen khud update. MAD1 Jinja har click pe naya HTML.

Progressive frontend framework. Components, reactivity, directives.

MAD2 SPA: ek index.html, Vue Router pages, Flask sirf JSON.

Fayde: easy, SFC, docs. Vs React: templates HTML-like, course sikhata hai. Vs plain JS: baar-baar DOM mat chhedo.

Example

<!-- HelloWorld.vue -->
<template>
  <h1>{{ msg }}</h1>
</template>
<script>
export default { data() { return { msg: 'Hello' } } }
</script>

Project example: Navbar.vue + views (Login, Dashboard). data() / setup() reactive. fetch APIs.

Viva tipFayde: easy, SFC, reactivity. Vs React: chhota learning curve. Vs plain JS: UI state auto-update.

SimpleCode explain formula: input kya aaya → auth/validation → DB change → response/UI.

Viva tipFunction signature + 3-4 important lines + edge case.

SimpleCOUNT SUM AVG MIN MAX. Dashboard stats.

SQL aggregate functions.

Pehle 1-line definition, phir related MAD2 layer (Vue SFC / Flask route / models.py / tasks.py / Redis).

4-line formula: input kahan se aaya, auth/validation kaunsa, DB ya cache ya Celery, kya return.

Related mix mat karo — cache ≠ Celery, authentication ≠ authorization, v-if ≠ v-show, Beat ≠ Worker. Follow-up ke liye ek difference ready rakho.

Example

db.session.query(func.count(Booking.id)).scalar()

Project example: func.count(Booking.id).

SimpleFlask lightweight Python web framework — routes, request/response, templates. MAD1 ka backend yahi hai.

Example

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
    return 'Hello'

Viva tipFlask micro hai: jo chahiye (DB, login, forms) khud jodte ho.

SimpleLifecycle = component ki zindagi ke stages. API call tab jab DOM ready ho — mounted.

created: instance bani, this data, DOM nahi. mounted/onMounted: page pe aa gaya — fetch, Chart.js, setInterval.
updated: data change ke baad. unmounted: cleanup (clearInterval) warna memory leak.

Dashboards onMounted isliye: canvas/API tab valid. created mein $el nahi.

Composition: onMounted(() => {}) setup ke andar.

Example

export default {
  async mounted() {
    const r = await fetch('/api/venues')
    this.venues = await r.json()
  }
}

Project example: Venues.vue mounted fetch list. Clock component unmounted pe interval clear.

Viva tipcreated: data setup, DOM nahi. mounted/onMounted: $el mil gaya — fetch yahi. Dashboards isliye onMounted use karti hain.

Simplecreated soch, mounted dikhai de. API/chart ke liye mounted.

created: reactive data setup. mounted: DOM insert. beforeUnmount cleanup.

Lifecycle = component ki zindagi: created (instance, DOM nahi) → mounted/onMounted (DOM ready — fetch, Chart.js yahi) → updated → unmounted (clearInterval).

Dashboard API created mein isliye nahi ki $el/canvas missing ho sakta. Composition API: onMounted(() => {}) setup ke andar. Options: mounted() method. Mix mat.

Examiner 'konsa hook use kiya' — related .vue kholo, line padh ke bolo.

Project example: created mein token read localStorage. mounted mein fetch with that token.