08.08.2023
0
Like
70
Views
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
})
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>
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 …
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:
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:
Umarım faydalı bir yazı olmuştur.
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