İçindekiler:
- 1. Adım: Uygulama Yapısı
- Adım 2: Şablonunuzu Düzenleyin
- {{Başlık}}
- 3. Adım: İletişim Formu
- 4. Adım: Giriş Sayfası
- Adım 5: Trafik Sayacı
- 6. Adım: Blog
- 7. Adım: Tamamlandı
Video: Node.js Web Sayfası Bölüm 2: 7 Adım
2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:19
BÖLÜM 2'ye hoş geldiniz!!
Bu, Node.js web sitesi uygulama eğitimimin 2. bölümüdür. Bu öğreticiyi, yalnızca kısa bir girişe ihtiyaç duyanları ve bir web sayfasında tam bir eğitim isteyenleri ayırdığı için iki bölüme ayırdım.
Site oluşturma işlemime geçeceğim. Sizinki farklı olabilir, bu yüzden benimkini takip edin ve kullanılan teknikleri öğrenin. Farklı bir HTML şablonu seçtiğinizde, akış biraz farklı olacaktır. Bunu aklında tut.
1. Adım: Uygulama Yapısı
Bu yüzden sitem ekspres oluşturucuyu takip ediyor, ancak yeşim yerine gidon kullandım. Yeşim seviyorsanız, bunun için gidin! Jade, tüm parantezler ve div'ler olmadan kısa el HTML'dir. Eğer anlamıyorsanız, youtube'u ziyaret etmek ve bazı HTML eğitimlerini izlemek isteyebilirsiniz.
HTML ve gidonları tercih ediyorum ve daha rahatım, bu yüzden kullandım. Gidonlu bir ekspres proje oluşturmak için express komutunu çalıştırın.
express --hbs uygulamamın adı
Ardından, tüm ara donanımları kurmak için Bölüm 1'deki adımı izlemeye devam edin.
Express çok özel bir uygulama yapısı oluşturur ve çoğu node.js uygulaması bu formu bazı değişikliklerle takip eder.
Ekteki fotoğrafta farklı klasörler ve dosyalar görebilirsiniz, aşağıda hepsini açıklamaya çalışıyorum.
çöp Kutusu
Bu, node.js sunucunuzu başlattığında ilk çalıştırılan klasördür. www dosyasına bakar ve yürütme için bu dosyayı takip eder. www dosyası, node.js'ye 3000 numaralı bağlantı noktasında bir sunucu başlatmasını (bu hemen hemen her şeyle değişebilir) ve olay dinleyicisi ve benzeri gibi başka şeyler yapmasını söyler. Ana önemli şey, uygulamanızın kurulduğu bağlantı noktasıdır.
node_modules
Bu klasörde orta eşya denir. Middle-ware, işleri sizin için kodlamayı kolaylaştırmak için ekstra yazılım olarak açıklamayı seviyorum. Temel olarak, kullanmanız için önceden hazırlanmış işlevlere sahip diğer kütüphanelerdir. Bu proje için kullandığım bazı ek ara yazılımlar Nodemailer, Passport, Nodemon, bycrypt ve diğerleriydi.
halka açık
Web siteniz için tüm resimlerinizin, CSS'nizin ve javascript'inizin gideceği yer burasıdır. Bunlar doğrudan web sayfaları tarafından kullanılır.
rotalar
Bunlar siteniz için tanımlanmış rotalardır. Ana sayfa, giriş sayfası ve diğerleri gibi.
Görüntüleme
Gördüğünüz gibi, görünümler.hbs dosyaları veya.handlebar'lardır, her ikisi de işe yarar, sadece app.js dosyasının biraz değiştirilmesini gerektirir. Bunlar, tarayıcıda görüntülenecek gidon html sayfalarınızdır. Düzen, ana düzen dosyanızdır ve bazen kendi düzen alt klasöründe bulunur. Ana düzen dosyası, diğer gidon dosyalarınızı çağırır ve görüntüler, bu, koda daldığımızda daha anlamlı olacaktır.
app.js
Bu, ana uygulama dosyanızdır, bazen buna sunucu denir, sadece kuruluma bağlıdır. Bu dosya, sunucu için tüm yapılandırmaya ve hatta bazı özel işlevlere sahiptir. Aynı zamanda bir hata işleyici olacaktır.
paket.json
Bu dosya express tarafından oluşturulur ve npm'ye projenizde kullanmak istediğiniz tüm ara katman yazılımlarını söyler. npm kurulumunu çalıştırdığınızda, bu dosyada adı geçen tüm ara yazılımlar node_modules klasörüne kurulacaktır.
Adım 2: Şablonunuzu Düzenleyin
Tüm HTML'nizi sıfırdan oluşturabilir veya bir şablon kullanabilirsiniz. Bu site için bir şablon kullandım. Geliştirilmesine yardımcı olduğum diğer siteleri sıfırdan kodladım. Seçim sizin, bu adım şablon düzenini açıklıyor.
Web uygulamam, harika CSS oluşturmada harika olan bir önyükleme şablonu kullanıyor. Şablonları bulmak için bu siteyi ziyaret edin. Önceki adımda belirtildiği gibi, gerekli tüm css, js ve img dosyaları ortak klasör altındadır. Bu dosyalar sitenin düz metinden daha iyi görünmesini ve sitede resimlerin nasıl kullanıldığını gösterir.
Gidon şablon stilinin bir şablonla çalışmasını sağlamak için Sayfalar iki parçaya bölünmüştür. Birincisi, "düzen" olarak adlandırılan şeydir. Düzen, sitenizdeki her web sayfasında görüntülenmesini istediğiniz özelliklerdir. Benim durumumda bu, gezinme çubuğuna sahip üstbilgi ve ekstra gezinme ve görüntüleme parçalarını tutan altbilgidir.
Düzen dosyası ve diğer gidon dosyaları görünümler klasöründedir. Konseptin nasıl çalıştığını göstermek için daha önce kullandığınız ekspres oluşturucudan daha basit bir düzen üzerinden gideceğim, sonra kodumu görebilir ve karşılaştırabilirsiniz.
Ekspres oluşturulan layout.handlebars dosyası
{{title}} {{{body}}}
Gerçek gidon büyüsü {{title}} ve {{{body}}} gidonlarındadır. Dolayısıyla bu ikisi farklı davranır {{title}}, rotalarda index.js dosyasından geçirilen bir değişkendir, şablona iletildiğinde görüntülenir. {{{body}}} etiketi, route js dosyanızdaki render işlevinde ne denirse onu alır. Bizim durumumuzda index.js şu satıra sahiptir:
res.render('index', { başlık: 'Ekspres', sayım: userCount});
Bu, kullandığınız motorun, yeşim taşı, gidon vb.'nin 'indeks' dosyasını çağırır, bu nedenle bizim durumumuzda index.handlebars.
Ekspres oluşturulan index.handlebars
{{Başlık}}
{{title}} sayfasına hoş geldiniz
index.handlebars dosyası, bir değişken gibi {{{body}}} etiketine iletilir ve web sayfanızda görüntülenir.
Bu, web sitenizin statik bir bölümüne ve değişken bir bölümüne sahip olmanızı sağlar. Bu, üstbilgileri ve altbilgileri güzel hale getirir, çünkü tüm sayfayı yeniden oluşturmanız gerekmez, yeni bir sayfa yüklerken yalnızca bazı bilgiler değiştirilir.
3. Adım: İletişim Formu
Web sayfama bir iletişim formu ekledim, böylece herkes soru veya yorumlarıyla site e-postamı e-postayla gönderebilir.
Bu iletişim formu, Node Mailer adlı bir npm ara yazılımı kullandı.
Düğüm Posta Göndericisini Ayarlama
Node-mailer'ı yüklemek için aşağıdaki kodu en üst düzey dosyanızda çalıştırmanız yeterlidir, bizim durumumuzda myapp.
sudo npm nodemailer'ı kurun
Kurulduktan sonra app.js dosyanızda birkaç şey ayarlamanız gerekecek.
İlki sadece bağımlılıktır, bu düğüme bu ara yazılımı kullanmayı planladığımızı söyler.
var nodemailer = require('nodemailer');
İkincisi, taşıyıcımızdır, taşıyıcı posta sunucunuza bağlanmak için kullanılır, benim durumumda gmail.
//Gmail hesabını almak için kullanılan taşıyıcı
var transporter = nodemailer.createTransport({ service: 'gmail', auth: { type: 'OAuth2', user: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.googleusercontent.com', clientusercontent.com: 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-mk-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7}})
nodemailer'ı farklı bir posta sunucusuyla kullanıyorsanız, lütfen belgeler ve yardım için buraya bakın.
Birkaç şey kişiden kişiye değişecektir: user, clientId, clientSecret. refreshToken ve accessToken.
Kullanıcı kimliğiniz, kullanmak istediğiniz e-postadır, sitemle aynı adlı yeni bir tane yaptım.
clientId, clientSecret, refreshToken ve accessToken'ın google hesabınız aracılığıyla bulunması gerekir.
Daha fazla yardıma ihtiyacınız varsa bu videoyu buradan takip edebilirsiniz.
Tüm bu alanlar doldurulduktan sonra mesaj detaylarımızı ekleyeceğiz.
Ardından, formumuzdaki tüm alanların girildiğini ve geçerli yanıtlar olduğunu doğrulamamız gerekiyor.
// Express Validatorapp.use(expressValidator({ errorFormatter: function(param, msg, value) { var namespace = param.split('.'), root = namespace.shift(), formParam = root; while(namespace.length)) { formParam += '[' + namespace.shift() + ']'; } return { param: formParam, mesaj: mesaj, değer: değer }; } }));
Artık web sayfamızdaki iletişim formumuzdan bilgi alıp mesaj göndermemiz gerekiyor.
//İletişim gönder düğmesinden gönder düğmesi, gönderilen formlar için başarı mesajı içeren bir ana sayfa oluşturmanız gerekirapp.post('/contact_Form', function(req, res){ //İletişim formundan anasayfadan bilgi alın.hbs var name = req.body.name; var email = req.body.email; var phone = req.body.phone; var mesaj = req.body.message; var mailOptions = { //bir mesaj gönderirken kullanılan bilgileri oluşturur: ' Otomatik E-posta', şu adrese: '[email protected]', konu: 'Web Sitesi İletişim Formu:' + ad, metin: 'Web sitenizin iletişim formundan yeni bir mesaj aldınız.\n\n' + 'Buradan ayrıntılar:\n\nAd: ' + ad + '\n\nE-posta: ' + e-posta + '\n\nTelefon: ' + telefon + '\n\nMesaj:\n' + mesaj } transporter.sendMail(mailOptions, function (err, res) { if(err){ console.log('Hata'); }else { console.log('E-posta Gönderildi'); } }) res.render('index'); //render yeni ana sayfa, çıkış sayfası gibi başarı mesajıyla bunun nasıl yapılacağına bakın })
flaş
Flash, eylemler yapıldıktan sonra mesajları göstermek için kullanılır. Bunu bir form gönderdiğinizde veya bir alanı doğru girmediğinizde görebilirsiniz.
Flash'ı diğer npm ara katman yazılımları gibi yükleyin.
sudo npm bağlantı flaşını kurun
var flash = require('connect-flash'); //ekran mesajlarında gösterilecek flash işlevi vardı
// Flashapp.use(flash());
Web sayfasındaki mesajları iten ve güncelleyen flaşı etkinleştirin. Başarı veya yanlış bilgi girildiğini söyleyen mesajlardır.
// Global Değişkenler
app.use(function (req, res, next) { res.locals.success_msg = req.flash('success_msg'); res.locals.error_msg = req.flash('error_msg'); res.locals.error = istek.flash('hata'); res.locals.user = req.user || null; sonraki(); });
Bazıları flaşla ilişkili değişkenlere ihtiyaç duyar.
İşte size yapılmış bir iletişim formu.
4. Adım: Giriş Sayfası
Bu sadece yapıp yapamayacağımı görmek istediğim bir şeydi ve belki gelecekte kullanırım. Ben sadece kodu git depomda olduğu gibi açıklamak istedim.
Yani bu kısım birkaç tane daha npm orta eşya kullanır. Aşağıdaki komutları kullanarak aşağıdakileri yükleyin.
npm pasaport yükleme && npm pasaport yükleme-yerel && npm bcryptjs yükleme
&&, bir satırda birden çok komut çalıştırmanıza izin verir.
Giriş ve Kullanıcılar
Route klasörünüzün altında bir login.js ve user.js dosyası oluşturmanız gerekecek. Bu, veritabanımızda saklanacak bir kullanıcının oluşturulmasına izin vermek ve kullanıcının veritabanını kontrol ederek oturum açmasına izin vermek için kullanılacaktır.
kullanıcı.js
var express = require('express');var router = express. Router(); var pasaport = require('pasaport'); var LocalStrategy = require('pasaport-yerel'). Strategy; var Kullanıcı = require('../models/user'); // Register router.get('/register', function(req, res){ res.render('register'); }); //Register User router.post('/register', function(req, res){ var name = req.body.name; var email = req.body.email; var username = req.body.username; var password = req.body.password; var password2 = req.body.password2; // Doğrulama req.checkBody('ad', 'Ad gereklidir').notEmpty(); req.checkBody('email', 'E-posta gerekli'.notEmpty(); req.checkBody('email', 'E-posta geçerli değil').isEmail(); req.checkBody('kullanıcı adı', 'Kullanıcı adı gereklidir').notEmpty(); req.checkBody(' parola', 'Parola gerekli').notEmpty(); req.checkBody('parola2', 'Parolalar eşleşmiyor').equals(req.body.password); var error = req.validationErrors(); if(error){ res.render('register', { error:errors }); } else { var newUser = new User({ name: name, email:email, username: username, password: password }); User.createUser(newUser, function(err, user){ if(err) throw err; console.log(user); }); req.flash('success_msg', 'Kayıt oldunuz ve şimdi giriş yapabilirsiniz'); res.redirect(' /giriş yapmak'); } });
Bunu parça parça yıkmak
Önce gerekli olan tüm orta donanımları ekliyoruz, ardından aşağıda açıklanan model dosyamızı ekliyoruz. Kayıt etiketinden yönlendiririz ve kayıt gidon metnimizi görüntüleriz. Sonra önemli işlev gelir. Bunlar, veritabanımıza yeni bir kullanıcı kaydetmemizi sağlar. İşlev, tüm alanların geçerli olduğundan ve forma dahil edildiğinden emin olmak için kontrol eder, değilse bunları isteyecektir. Daha sonra hataları kontrol eder ve herhangi bir hata yoksa verilen bilgilerle yeni bir kullanıcı oluşturur. Daha sonra, oturum açmanıza izin vererek oturum açma sayfasına yeniden yönlendirilir.
login.js
var express = require('express');
var router = express. Router();var pasaport = require('pasaport'); var LocalStrategy = require('pasaport-yerel'). Strategy; var Kullanıcı = require('../models/user'); /* kullanıcı listesini GET. */ //Ana sayfa router.get('/', function(req, res){ res.render('login'); }); pasaport.use(new LocalStrategy(işlev(kullanıcı adı, parola, bitti) { User.getUserByUsername(kullanıcı adı, işlev(err, kullanıcı){ if(err) atma hatası; if(!user){ dönüş yapıldı(boş, yanlış, { mesaj: 'Bilinmeyen Kullanıcı'}); } User.comparePassword(password, user.password, function(err, isMatch){ if(err) throw err; if(isMatch){ return done(null, user); } else { dön dön(boş, yanlış, {mesaj: 'Geçersiz parola'}); } }); }); })); pasaport.serializeUser(işlev(kullanıcı, bitti) { bitti(boş, kullanıcı.id); }); pasaport.deserializeUser(function(id, done) { User.getUserById(id, function(err, user) { done(err, user); }); }); router.post('/login', pasaport.authenticate('local', {successRedirect:'/', FailureRedirect:'/login', FailureFlash: true}), function(req, res) { res.redirect('/ Gösterge Paneli'); }); router.get('/logout', function(req, res){ req.logout(); req.flash('success_msg', 'Çıkış yaptınız'); res.redirect('/homepage'); });
modül.exports = yönlendirici;
Önce gerekli olan tüm orta donanımları ekliyoruz, ardından aşağıda açıklanan model dosyamızı ekliyoruz. Giriş etiketinden yönlendiririz ve giriş gidon metnimizi görüntüleriz. Daha sonra girilen kullanıcı adını ve şifreyi almak ve bunları veritabanımızda kontrol etmek için bazı pasaport işlevlerini kullanırız. Ahududu pi'de oturum açmayı biraz yavaşlatabilecek şifreli bir şifre kullanacağız. Bunu daha sonra açıklarım. Kullanıcı adını ve şifreyi doğruladıktan sonra, bunu indeks dosyamızda ayarlarken gösterge tablosunu gösterecek olan ana sayfaya yönlendirilirsiniz. Ayrıca buraya çıkış yapma özelliğini de ekliyoruz.
Daha önce de belirttiğim gibi, veritabanını kontrol etmek için bir model oluşturmamız gerekecek.
Bu, ana uygulama klasörünüzün altında modeller adlı bir klasör oluşturarak yapılır. Bu klasörde bir user.js dosyası da gereklidir.
model/kullanıcı.js
var mongoose = require('mongoose');
var bcrypt = require('bcryptjs'); // Kullanıcı Şeması var UserSchema = mongoose. Schema({ kullanıcı adı: { tür: Dize, dizin: doğru }, parola: { tür: Dize }, e-posta: { tür: Dize }, ad: { tür: Dize } }); var Kullanıcı = module.exports = mongoose.model('Kullanıcı', UserSchema);
module.exports.createUser = function(newUser, callback){
bcrypt.genSalt(10, function(err, salt) { bcrypt.hash(newUser.password, salt, function(err, hash) { newUser.password = hash; yeniUser.save(geri arama); }); }); } module.exports.getUserByUsername = function(kullanıcı adı, geri arama){ var sorgu = {kullanıcı adı: kullanıcı adı}; User.findOne(sorgu, geri arama); } module.exports.getUserById = function(id, geri arama){ User.findById(id, geri arama); } module.exports.comparePassword = function(candidatePassword, hash, callback){ bcrypt.compare(candidatePassword, hash, function(err, isMatch) { if(err) err atmak; geri çağırma(null, isMatch); }); }
Bu model, kullanıcı parametrelerimizin nasıl görüneceğini ve bunlara nasıl erişeceğimizi özetlemektedir. Daha önce şifrelerimizi şifreleyeceğimizden bahsetmiştim. bu, ihlal durumunda hiç kimsenin şifresinin veritabanında saklanmaması içindir. Parolalar, orta yazılım bcrypt kullanılarak hash edilir.
Adım 5: Trafik Sayacı
Web sayfamı kaç benzersiz kullanıcının ziyaret ettiğini görmek ve "isabet" sayısını saymak istedim. Bunu yapmanın birçok yolu var, nasıl yaptığımı açıklayacağım.
Bu, sayfamı kaç kullanıcının ziyaret ettiğini ve her bir benzersiz ziyaretçinin kaç kez ziyaret ettiğini izlemek için bir mongodb koleksiyonu kullanır.
Zaten bir mongoDB kurmaktan bahsettiğimiz için tekrar üzerinden geçmeyeceğim.
Derlemek için veritabanınıza iki koleksiyon eklemeniz gerekebilir. Bunu yapmak için bir UI kullanıyorsanız RoboMongo'yu kurabilirsiniz, ancak benim gibi başsız bir ahududu pi kullanıyorsanız aşağıdaki komutları eğlendireceksiniz.
Moğol kabuğu
Bir db'yi düzenlemek, bilgi almak veya bir koleksiyon oluşturmak için başsız bir ünitede mongo kabuğuna ihtiyacınız olacak.
Çalıştırmak
mongo
Bu, kabuğu açacaktır.
Koleksiyon ekle
Benim durumumda, veritabanına loginapp denir, onu istediğiniz gibi adlandırabilirsiniz.
adını kullan
Sitemizi ziyaret eden kullanıcıların tüm ip adreslerimizi tutacak bir koleksiyona ihtiyacımız var.
db.creatCollection("ip")
Ardından, sitemize gelen benzersiz isabetleri saymak için bir koleksiyon oluşturuyoruz. Bu, bir kimlikle başlatılır ve 0'dan başlayarak sayılır.
db.createCollection("sayım", {id: "isabet sayacı", sayım:0})
IP Adreslerini İzle
Bunu yapmak için, ana sayfamızı ziyaret ettiklerinde kullanıcıların Ip'sini çekeceğiz, sayımızı artıracağız ve daha sonra karşılaştırmak için saklayacağız.
Mongoose şemalarımızı saklamak için bazı modeller oluşturmamız ve homepage.js dosyamıza bazı kodlar eklememiz gerekiyor.
count.js ve ip.js oluşturup bunları modeller klasörümüzde saklıyoruz.
ip.js dosyası sadece ip adresimiz için bir şemadır.
var mongoose = require('mongoose'); // mongo için paket işleyici
//Count Schema var IpSchema = mongoose. Schema({ ip: { type: String, }, count: { type: Number, } }); var Ip = module.exports = mongoose.model('Ip', IpSchema);
count.js, isabet takibini başlatmak için ana sayfamız tarafından aranacaktır. Bu aşağıdaki gibi yapılır.
//Homepagerouter.get('/', function(req, res){ publicIp.v4().then(ip => { Public_ip = ip; console.log("ipv4: "+ Public_ip); //=> ' 46.5.21.123' }); publicIp.v6().then(ip => { console.log("ipv6" + ip); Public_ip=ip; //=> 'fe80::200:f8ff:fe21:67cf' });
Count.getCount(toplama, ipc, Public_ip, function(sayım){
}); sayım = db.collection('count').findOne({id: "isabet sayacı"}, function(err, sayım){ userCount = count.count; res.render('homepage', {count: userCount}); }); });
Bu, birisi ana sayfamıza her gittiğinde olur, bu durumda theinternet.onthewifi.com/homepage.
Kullanıcının IP'sini, ip4 veya ip6'yı kontrol eder ve ardından bu değeri, count.js dosyamızda saklanan bir fonksiyon olan count.get.collection'a gönderdiği yerde saklar.
Kullanıcının benzersizliğini kontrol ettikten sonra, sayım değerini bir gidon değişkeni olarak ana sayfaya döndürür ve gönderir.
count.js dosyası aşağıdaki gibidir.
//count.jsvar mongo = gerekli('mongodb'); //veritabanını destekler var mongoose = require('mongoose'); //mongo mongoose.connect için paket işleyici('mongodb://localhost/loginapp'); var db = mongoose.connection; var Ip = require('../models/ip'); //Count Schema var CountSchema = mongoose. Schema({ id: { type: String, }, count: { type: Number, } }); var Count = module.exports = mongoose.model('Count', CountSchema); module.exports.getCount = function(count, ipc, Public_ip, callback){ //count testtir, callback isfunction ipc.findOne({ip: Public_ip}, function(err, iptest){ if(!iptest)//add veritabanında yoksa yeni bir ip ve güncelleme sayacı { var new_ip = new Ip({ ip: Public_ip, count: 1 }); db.collection('ip').save(new_ip);//yeni ip ekle database count.update(//update hit counter { id: "hit counter"}, { $inc: {count: 1} }) } else//en çok kimin ziyaret ettiğini görmek için belirli ip sayacını güncelleyin { ipc.update({ ip: Public_ip }, { $inc: {count: 1} }) } }); }
Bu, sayım şemasını ve.getCount işlevimizi oluşturur..getCount işlevi, bir kullanıcı ipi için DB'yi kontrol eder ve onu bulursa, işlev, isabet sayacını değil, o kullanıcının sayısını artırır. Ancak, kullanıcılar ip bulunamazsa, ip kullanıcıları ile yeni bir koleksiyon nesnesi oluşturacak ve isabet sayacını 1 artıracaktır.
Bu daha sonra döndürülür ve web sayfasına görüntülenir.
Orada bir ip izleme isabet sayacı var.
6. Adım: Blog
Şu anda yazılım, akıllı evler ve Polaroidler ile ilgili ilgi alanlarıma odaklanan bir blog geliştirmeye çalışıyorum. Bu yüzden bir blog bölümü oluşturdum. Blog, statik html sayfaları ve gidon çerçevesini kullanır. Blog yazmayı kolaylaştırmak için daha iyi teknolojileri araştırdıktan sonra web sitemi hugo kullanarak yeniden tasarladım. Hugo, statik bir html üreticisidir. Aşağıda belirtilen eğitimde bunun hakkında daha fazla konuşuyorum.
7. Adım: Tamamlandı
Ahududu pi'mde yerel olarak barındırılan node.js web sitemde ayrıntılı bir eğitime gidiyorsunuz. Sorularınız veya yorumlarınız varsa lütfen aşağıda bırakın.
Umarım bu diğerlerine yardımcı olur.
Bu siteye hugo, statik bir web sayfası oluşturucu kullanarak farklı bir yaklaşım için diğer öğreticime bakın (yakında).
Önerilen:
Raspberry Pi ve Özel Web Sayfası ile Led'in Parlaklığını Kontrol Etme: 5 Adım
Led'in Parlaklığını Raspberry Pi ve Özel Web Sayfası ile Kontrol Etme: Pi'mde php ile bir apache sunucusu kullanarak, pi'nizle aynı ağa bağlı herhangi bir cihazdan erişilebilen özelleştirilmiş bir web sayfasına sahip bir kaydırıcı kullanarak bir led'in parlaklığını kontrol etmenin bir yolunu buldum .Bunun uygulanabileceği birçok yol var
ESP8266 POV Fanı Saatli ve Web Sayfası Metin Güncellemesi: 8 Adım (Resimli)
ESP8266 Saatli POV Fanı ve Web Sayfası Metin Güncellemesi: Bu değişken bir hız, POV (Görüş Kalıcılığı), zamanı aralıklı olarak gösteren Fan ve "anında" güncellenebilen iki metin mesajıdır. aynı zamanda iki metni değiştirmenize izin veren tek sayfalık bir web sunucusudur
Yeni Başlayanlar İçin Parantez Kullanarak Basit Bir Web Sayfası Nasıl Oluşturulur: 14 Adım
Yeni Başlayanlar İçin Köşeli Ayraçlar Kullanarak Basit Bir Web Sayfası Nasıl Oluşturulur: Giriş Aşağıdaki yönergeler, Köşeli Ayraçları kullanarak bir web sayfası oluşturmak için adım adım rehberlik sağlar. Brackets, birincil olarak web geliştirmeye odaklanan bir kaynak kod düzenleyicisidir. Adobe Systems tarafından oluşturulmuş, ücretsiz ve açık kaynaklı bir yazılımdır, lisanslıdır
ESP8266-01 Web Sayfası: 6 Adım
ESP8266-01 Web Sayfası: Herkese merhaba. Bugün bu yazımızda ESP8266-01 için web sayfası yapmayı öğreneceğiz. Bu projeyi yapmak çok basit ve sadece birkaç dakikanızı alıyor. Devre de basittir ve kodun anlaşılması kolaydır. Arduino IDE'yi sizin için kullanacağız
Bare Bones Web Sayfası: 10 Adım
Bare Bones Web Sayfası: Bugün sıfırdan çok basit, çıplak bir web sayfası oluşturacağız. HTML öğelerinden, web sayfanızın stilinden (renkler, yazı tipleri, hizalama vb.) ve son olarak web sayfanıza nasıl resim ekleyeceğinizden bahsedeceğiz! Bu talimatın sonunda