Article cover

08.08.2023

0

Like

70

Views

Nuxt3 ile Kendi API’ınızı Oluşturun!

Nuxt, bilindiği üzere VueJS kullanan bir JavaScript kütüphanesidir. Nuxt kullanarak SEO uyumlu websiteleri yapmanız mümkün. Bu yazımızda Nuxt’un içerisinde bulunan özellikleri kullanarak kendi API’ımızı oluşturacağız, ve bunu nasıl kullanabileceğimize bakacağız.

Öncelikle buna neden gerek duyarız bunun hakkında konuşalım. Eğer elinizde dağınık halde veriler bulunuyorsa ve bunları websitenizde göstermek istiyorsanız ama veritabanı işlemleriyle uğraşmak istemiyorsanız veya sadece deneme yapmak için bu özelliği kullanabilirsiniz.

Lafı çok uzatmadan gelelim nasıl kullanacağımıza:

Yeni bir Nuxt projesi oluşturalım ve işlemlerimize başlayalım.

npx nuxi init <klasor-adi> 

komutunu kullanarak bir Nuxt projesi oluşturabiliriz.

Proje oluştuktan sonra yarn veya npm i yazarak gerekli paketlerin kurulmasını sağlayalım ve yarn dev veya npm run dev yazarak projemizi ayağa kaldıralım.

Eğer Nuxt’un kendi özelliklerini kullanmak istiyorsak, Nuxt’un standart olarak belirlediği dosya ve klasör isimlerini kullanmalıyız. Bu yüzden projemizin bulunduğu ana dizinde server isimli bir klasör açıyoruz ve bu klasörün altında api isimli bir klasör daha açıyoruz.

server ve api isimlerini sabit olarak kullanmalıyız. Kendi kafamıza göre isim veremeyiz. Fakat api içerisine oluşturacağımız javascript veya typescript dosyasına istediğimiz ismi verebiliriz.

Örnek olarak users isimli bir typescript dosyası oluşturuyorum. Bu dosyayı oluşturduktan sonra projemizin son hali görseldeki gibi oldu:

(Burada javascript dosyası da oluşturabilirdik. Ben her türlü çalıştığını göstermek için typescript dosyası oluşturdum.)

Buradan sonrasının mantığını kafamıza oturtarak ilerleyelim.

Öncelikle biz bir API tasarlamak istiyoruz ve ana amacımız bu API’ya bir şekilde ulaşabilmek. Javascriptte bir dosyaya ulaşabilmek için export ifadesini kullanıyorduk. Bu yüzden biz de bir fonksiyon oluşturacağız ve export default diyerek bunu dışarıya açacağız. Kullanacağımız fonksiyon ismi Nuxt’un kendi fonksiyonu olan defineEventHandler olmak zorunda.

export default defineEventHandler(event => {
// buraya kodlar gelecek
})
  • Burada defineEventHandler ile bir event yakalayabiliyoruz, fakat bunu kullanmayacaksak event kısmını boş bırakabiliriz.
export default defineEventHandler(() => {
// buraya kodlar gelecek
})

Bundan sonra yapmamız gereken işlem çok basit. return diyeceğiz ve döndürmek istediğimiz verilerimizi yazacağız. Ben bir dizi döndürmek istiyorum, bu yüzden aşağıdaki gibi bir yapı kullanacağım.

export default defineEventHandler(() => {
return [
{
name: "Yunus Emre",
age: 24,
},
{
name: "Ahmet",
age: 21,
},
{
name: "Ayşe",
age: 43,
},
{
name: "Remzi",
age: 12,
},
];
});

Verilerimi oluşturdum. Şimdi tarayıcımızda bu verilere erişmeyi deneyelim. Hatırlayacağınız üzere server klasörü altında bir api klasörümüz, onun altında da users dosyamız vardı. O zaman tarayıcımızda şu adrese gitmeyi deneyelim:

<http://localhost:3000/api/users>

Screenshot 2022-11-20 at 16.14.45.png

Gördüğünüz gibi API’ımıza ulaşmaya çalıştık ve verilerimizi burada görmeyi beklerken bomboş bir ekranla karşılaştık. Böyle bir durumla karşılaşırsak projemizi durdurup yeniden başlatıyoruz.

Veee işte verilerimiz karşımızda …

Screenshot 2022-11-20 at 16.22.26.png

API’ımızı oluşturduk, fakat bunları kullanamadıktan sonra hiç bir anlamı kalmıyor. Bunları nasıl kullanabileceğimize göz atalım.

Hangi sayfamızda kullanmak istiyorsak orada işlem yapmalıyız, ben şimdilik app.vue içerisinde işlemlerimi yapacağım.

Yapacağım işlemler sırasıyla:

  • ref’i import edeceğim,
  • useFetch ile api’dan verimi çekeceğim,
  • ve son olarak çektiğim veriyi ref kullanarak değişkene atayacağım

işte bu kadar basit. Bir de kodlara bakalım neler yapmışız.

<script setup>
import { ref } from "vue";

const { data: users } = await useFetch("/api/users");
const info = ref(users);
</script>

API klasörüm içerisinde ufak bir değişiklik yapıp hepsine birer id tanımladım:

import { nanoid } from "nanoid";

export default defineEventHandler((event) => {
return [
{
name: "Yunus Emre",
age: 24,
id: nanoid(),
},
{
name: "Ahmet",
age: 21,
id: nanoid(),
},
{
name: "Ayşe",
age: 43,
id: nanoid(),
},
{
name: "Remzi",
age: 12,
id: nanoid(),
},
];
});

Ve app.vue içerisindeki template içerisinde verilerimi listeledim.

<template>
<h1>Hello World!</h1>
<ul v-for="user in info" :key="user.id">
<li>{{ user.name }} - {{ user.age }}</li>
</ul>
</template>

Ve çıktım bu şekilde oldu:

Screenshot 2022-11-20 at 16.37.08.png

Umarım faydalı bir yazı olmuştur.

Comments

You need to log in to be able to comment!

Yunus Emre Topçu

İş hayatıma başlamadan önce Patika'nın VueJs Bootcamp'ine katıldım ve frontend macerama Vue3 ile adım attım. İşe girdikten sonra PHP ile backend uygulamalara merak sardım ve iş dışında da bu alanda çalışmaya başladım. Şu anda iş yerinde PHP, Jquery ve Bootstrap4 ile web tabanlı uygulamalar geliştiriyor, özel hayatımda ise Next.js ve diğer ilgimi çeken teknolojilere odaklanarak kendimi geliştiriyorum. Popüler ve ilgimi çeken teknolojileri de öğrenerek yazılım vizyonumu genişletmeyi hedefliyorum.

Location

İstanbul, TR

Education

Yazılım Mühendisliği - Üsküdar Üniversitesi

Yönetim Bilişim Sistemleri - İstanbul Üniversitesi

Job Experience

Yazılım Mühendisi - Zeytinburnu Belediyesi

Stajyer - ABAT Bilişim Teknolojileri

© 2021 Patika Dev

facebook
twitter
instagram
youtube
linkedin

Disclaimer: The information /programs / events provided on https://patika.dev and https://risein.com are strictly for upskilling and networking purposes related to the technical infrastructure of blockchain platforms. We do not provide financial or investment advice and do not make any representations regarding the value, profitability, or future price of any blockchain or cryptocurrency. Users are encouraged to conduct their own research and consult with licensed financial professionals before engaging in any investment activities. https://patika.dev and https://risein.com disclaim any responsibility for financial decisions made by users based on information provided here.