Vue.js va Go (Golang) bilan Full-Stack Web Ilova Qurish

1. Loyihaning maqsadini aniqlash

Birinchi qadam – ilovamiz qanday funksiyalarni bajarishini aniqlash. Masalan, biz kitoblar ro‘yxati ilovasini yarataylik. Bu ilovada foydalanuvchilar kitoblarni qo‘shishi, o‘qishi va tahrirlashi mumkin.

2. Muhitni sozlash

Kerakli dasturlar:

• Node.js – Vue.js uchun kerak.
• Go – backend uchun kerak.
• NPM yoki Yarn – Vue.js kutubxonalarini boshqarish uchun.
• Postman yoki Insomnia – API test qilish uchun.

3. Backendni (Go) qurish

** Go loyihasini yaratish:**

• 1.Terminalda yangi loyiha papkasini yarating:

mkdir book-api && cd book-api
go mod init book-api

• 2.HTTP serverni sozlash uchun kod yozamiz: main.go fayli:

package main

import (
    "encoding/json"
    "net/http"
)

type Book struct {
    ID     string `json:"id"`
    Title  string `json:"title"`
    Author string `json:"author"`
}

var books []Book

func getBooks(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    json.NewEncoder(w).Encode(books)
}

func main() {
    http.HandleFunc("/books", getBooks)
    http.ListenAndServe(":8080", nil)
}

• 3.Serverni ishga tushiring

go run main.go

• 4.Apini sinash uchun Postman`dan foydalaning.

4. Frontendni (Vue.js) yozamiz

Vue loyihasini yaratish:

• 1.Yangi Vue loyihasini yaratamiz:

npm init vue@latest book-app
cd book-app
npm install
npm run dev

• 2.Tailwind CSS qo'shamiz:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwind.config.js faylini sozlaymiz:

module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/main.css fayliga ushbu kodni qo'shamiz:

@tailwind base;
@tailwind components;
@tailwind utilities;

Kitoblar ro‘yxatini ko‘rsatish:

• 1.BooksView.vue komponentini yarating:

<template>
  <div>
    <h1 class="text-xl font-bold">Kitoblar Ro‘yxati</h1>
    <ul>
      <li v-for="book in books" :key="book.id" class="border p-2 mb-2">
        <strong>{{ book.title }}</strong> - {{ book.author }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"

const books = ref([])

onMounted(async () => {
  const res = await fetch("http://localhost:8080/books")
  books.value = await res.json()
})
</script>

• 2.App.vue fayliga BooksView.vue komponentini qo‘shing.