Geçmişte tork için Angularjs ile WordPress Rest API kullanmayı tartıştım çünkü onu sevdim ve uzun zamandır kullandım. Bununla birlikte, son zamanlarda Laravel’i sık sık kullandım ve Laravel ekosistemi Vuej’leri bir ön uç çerçevesi olarak kullandı. Beni denemeye teşvik etti ve sadeliğinden etkilendim. Vuejs kullanan ilk gerçek deneyimim Caldera ön uç girişi için. Kullanıcı arayüzünü ele almanın yeni yollarını denedim ve Vuej’leri öğrenilecek ve sonuçları beğenmek için en hızlı olarak buluyorum.
Bu makalede, WordPress içeriğini REST API ile görüntülemek ve düzenlemek için size bazı Vuejs temel temelini göstereceğim. Neden Vuejs? Bu öğreticide, doğrudan güncelleme editörleri ile WordPress içeriğini görüntüleyen reaktif uygulamalar oluşturmak için 25 JavaScript satırının ve çok az sayıda yeni kavramdan daha az olacağını öğreneceksiniz. Biraz daha fazla işle, aynı kodu, arama motorları gibi web travorlarının – ve JavaScript olmayan tarayıcıların siteyi doğru kullanabilmesini sağlamak için sunucu tarafını ve tarayıcıda oluşturmasını sağlayabilirsiniz.
Bu çok havalı, değil mi? Ayrıca sizden ES6 veya karmaşık üretim araçlarını incelemenizi istemeyeceğim. Evet, bence ES6 ve araçları incelemelisiniz. Büyük ve karmaşık uygulamalar için React veya Angular 2’yi düşünebilirsiniz, ancak Vuejs bu tür uygulamalar için de uygundur. Vuejs ile başlayarak, WordPress Rest API’sinden bir yayının nasıl görüntüleneceğine dair birkaç basit örnekle başlayalım. Sonra bir editör ekleyeceğiz. Bu editör, reaktif uygulamalar oluşturmanın ne kadar kolay olduğunu ve ne anlama geldiğini gösterecektir. Alan alanına yazdığınızda, HTML öğesinin aynı modele bağlı olduğunu göreceksiniz – bu durumda yazı doğrudan güncellenecek. Daha da önemlisi, uygulamadaki model değişecek ve içeriği saklamak için API REST aracılığıyla WordPress’e geri göndermemizi sağlayacak. Örnek kodda, WordPress’e içerik almak ve göndermek için Ajax API JQuery kullanacağım. İhtiyaçlarınıza bağlı olarak herhangi bir Ajax API’sını gerçekten kullanabilirsiniz. Bunun için kullanabileceğiniz başka şeyler de var, ama bence bazı teknolojileri aynı anda öğretmek mantıklı değil, bu yüzden standartlara devam edelim. Vue’nun yapıcısı Vuejs’i başlatmak için Vue yapıcısını kullanarak yeni bir örnek oluşturduk ve hangi verilerin kullanıldığını ve HTML öğelerinin üzerinde çalıştığımız DOM’u hangi HTML öğelerinin sarıldığını bildirdik. WordPress yayınlarıyla aynı şekilde biçimlendirilmiş yapay verileri kullanan temel örneklerle başlayalım. Görmek:
Var ex1 = yeni Vue ({
EL: ‘#Posting’,
Veri: {
Postalamak: {
Başlık: {
Çeviri: ‘Merhaba Dünya!’
},
İçindekiler: {
Render: ”
WordPress’e hoş geldiniz. Bu ilk gönderiniz. Düzenle veya Sil, sonra yazmaya başlayın!
“,}
}
}
}); Yapıcıya verdiğimiz nesnenin iki dizin vardır. Birincisi, Vuejs tarafından bağlanan unsurları temsil eden “El” dir. İkincisi, “veri”, şablonu öğedeki oluşturmak için kullandığımız verilerdir. Hello World WordPress’in REST API tarafından iade edilecek formatta yayınlanmasının başlığını ve içeriğini yayınladım.
Şimdi Vuejs içeren HTML belgesinde (bu bir CDN bağlantısıdır: https://unpkg.com/ [korumalı e -posta] /dist/vue.min.js) Bu html’yi bir şablon olarak kullanılacak ekleyebilirsiniz:

{{post.title.rendered}}

{{post.conent.rendered}}

En dıştaki HTML öğesinin bir “Post” kimliğine sahip olduğunu ve bunun JavaScript’te ayarladığımız değere uygun olduğunu unutmayın – “El” için “#post”. Ayrıca, bıyık veya gidonlar veya hatta AngularJS çerçevesi gibi şablon dilinde çalıştıysanız, bu bıyık stili şablonu tanıdık görünecektir.
Bu yazıyı gösterecek. Ancak içerik göndermedeki HTML etiketlerinin oluşturulmadığını göreceksiniz. Varsayılan olarak, Vuejs HTML etiketine güvenmez, ancak güvenilir bir yangın kullanırsanız, HTML’yi bir öğeye bağlamak için V-HTML yönergesini kullanabilirsiniz. Burada HTML’miz yeniden yazılmıştır, böylece yayın içeriğindeki HTML etiketi görüntülenir:

{{post.title.rendered}}

Bunlar verileri görüntülemenin temelleridir.
Form biçimini şimdi ekleyin İçeriğimiz var, içeriği düzenlemek için bir form girişi ekleyelim. Aslında JavaScript’imizi hiçbir şekilde değiştirmemize gerek yok. Tek yapmamız gereken HTML’de giriş oluşturmak ve HTML girişini ekran için kullanılan HTML öğesiyle aynı model bölümüne bağlamak için V-model özniteliklerini kullanmaktır:

{{post.title.rendered}}

Yazı başlığı

İçerik Gönderimi

V-modeller hariç, giriş için html gerçekten standarttır. Öznitelik, bıyık olmadan şablonla aynı sözdizimini kullanır. Bunu çalıştırdığımızda, gönderileri girişte düzenleyebilir ve ekran güncellemesini gerçek zamanlı olarak görebilirsiniz. Bir kez daha, ek JavaScript gerekmez.
Vuej’leri WordPress REST API’sına bağlamak için Ajax’ı kullanarak, verilerin görüntüsünü değiştirebilecek formlarla yapay veriler gösterdik. Bu bölümde, yapay verileri gerçek sevkiyat verilerini almak için Ajax’ın WordPress Rest API’sına çağrısı ile değiştireceğiz. Bir sonraki adım, kaydet düğmesini forma eklemektir. Kaydet düğmesi, Vuejs’deki etkinlik işlenmesinin ve verileri depolamak için WordPress Restaurant API’sına nasıl geri isteğinin nasıl ekleneceğine dair pratik bir örnek verecektir. Aynı HTML’yi kullanarak, bir yayın almak için JavaScript’inizi güncelleyin ve daha sonra bir vue örneği oluşturmak için verileri kullanmak için bir jQuery başarılı bir çağrı kullanın:/** Bu verileri dinamik olarak sağlamak için wp_localale_script () kullanmalısınız*//
Var configuration = {

API: ‘https://situsanda.com/wp/v2/posts/1’,
Nonce: ‘hiroy’
};
/** Bir gönderi alın, ardından onunla bir vue örneği oluştur **/
Var ex3;
$. Get ({
URL: config.api
}). Başarı (işlev (r) {
ex3 = yeni Vue ({
EL: ‘#Posting’,
Veri: {
Gönderi: R.
}
});
}); Şimdi WordPress’ten gerçek verilerimiz var. JQuery Ajax tamamlanana kadar bekleyerek, ihtiyacımız olan veriler olmadan Vue örnekleri yapmaktan kaçınırız.
Etkinlik Vuejs ile ilgili en sevdiğim şeylerden biri etkinliğin ele alınmasıdır. Vue yapıcısı kullanmadığımız bir argüman “yöntem” olarak adlandırılır. Bu argüman, HTML’mizde veri öznitelikleri kullanılarak çağrılabilen işlev nesnesini gerçekleştirir. V-tıklama öznitelikleri, bağlantı, düğme veya tıklatılan giriş olduğunda çağrılacak olan “yöntem” i hangi işlevin tanımlandığını söylemek için kullanılabilir. Aşağıda, “kaydet ()” adını veren formda gönder düğmesine sahip güncellenmiş bir şablondur:

{{post.title.rendered}}

Şimdi Save () işlevini tanımlamamız ve verileri WordPress’e geri göndermek için kullanmamız gerekiyor:/** Bu verileri dinamik olarak sağlamak için wp_localale_script () kullanmalısınız*/
Var configuration = {
API: ‘http://forming.dev/wp/v2/posts/1’,
Nonce: ‘hiroy’
};
/** Bir gönderi alın, ardından onunla bir vue örneği oluştur **/
Var ex4;
$. Get ({
URL: Conf.api
}). Başarı (işlev (r) {
ex4 = yeni Vue ({
EL: ‘#Posting’,
Veri: {
Gönderi: R.
},
yöntem: {
Kaydet: function () {
Var self = this;
$ .Ajax ({
URL: config.api,
Yöntem: ‘Post’,
Göndermeden önce: işlev (xhr) {
xhr.setRequestHeader (‘x-wp-nonce’, config.nonce);
},
veri:{
Başlık: self.post.title.rendered,
İçerik: self.post.content.rendered
}
}). Sonra (yanıt) {
console.log (yanıt);
});
}
}
});