Takeaways Key
Tetapi sementara kesederhanaan ini mudah, bergantung pada antara muka boilerplate ini tidak betul -betul membenarkan banyak fleksibiliti. Jadi bagaimana jika kita mahu membuat antara muka tersuai untuk pengguna kami mendaftar dan log masuk ke laman web kami?
Nasib baik, ia tidak terlalu sukar sama sekali. Dalam artikel ini saya akan menunjukkan kepada anda bagaimana untuk membuat log masuk dan borang pendaftaran tersuai dengan Meteor. Walau bagaimanapun, artikel ini mengandaikan bahawa anda tahu bagaimana untuk menubuhkan projek menggunakan rangka kerja ini sendiri.
Untuk bermain dengan kod yang dibangunkan dalam artikel ini, lihatlah repositori GitHub yang saya buat.
Persediaan Asas
Di dalam projek meteor baru, tambahkan pakej kata laluan akaun dengan melaksanakan arahan:
Dengan menambahkan pakej ini kepada projek koleksi meteor.users akan dibuat untuk menyimpan data pengguna kami dan kami tidak perlu menulis logik tersuai untuk fungsi yang berkaitan dengan pengguna.
Oleh itu, walaupun mewujudkan antara muka tersuai bermakna kita akan kehilangan kemudahan pakej akaun-UI, itu tidak bermakna kita harus kehilangan kemudahan "sihir" back-end yang dapat disediakan oleh Meteor.
meteor <span>add accounts-password</span>
Membangunkan antara muka
Untuk sistem log masuk dan pendaftaran yang lengkap, terdapat banyak ciri yang perlu kita buat antara muka, termasuk:
Pendaftaran
Tetapi buat masa ini, kami akan bercakap mengenai dua mata pertama yang disenaraikan (pendaftaran dan log masuk). Sebabnya ialah tidak sukar bagi anda untuk mengetahui cara membuat antara muka yang lain sebaik sahaja anda mendapat pegangan pada asas -asas.
Coretan berikut menunjukkan kod borang pendaftaran:
meteor <span>add accounts-password</span>
Coretan seterusnya menunjukkan kod borang log masuk sebaliknya:
<span><span><span><template</span> name<span>="register"</span>></span>
</span> <span><span><span><form</span>></span>
</span> <span><span><span><input</span> type<span>="email"</span> name<span>="registerEmail"</span>></span>
</span> <span><span><span><input</span> type<span>="password"</span> name<span>="registerPassword"</span>></span>
</span> <span><span><span><input</span> type<span>="submit"</span> value<span>="Register"</span>></span>
</span> <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>
Seperti yang anda lihat, templat sangat serupa. Mereka mengandungi borang, medan untuk e -mel dan kata laluan, dan butang Hantar. Satu -satunya perbezaan ialah nilai atribut nama untuk medan input dan templat. (Kami akan merujuk nilai -nilai tersebut tidak lama lagi, jadi pastikan mereka unik.)
Kami hanya mahu templat ini ditunjukkan untuk pengguna yang belum diketahui. Oleh itu kita boleh merujuk kepada objek semasa yang di antara badan pembukaan dan penutupan
Tag:
<span><span><span><template</span> name<span>="login"</span>></span>
</span> <span><span><span><form</span>></span>
</span> <span><span><span><input</span> type<span>="email"</span> name<span>="loginEmail"</span>></span>
</span> <span><span><span><input</span> type<span>="password"</span> name<span>="loginPassword"</span>></span>
</span> <span><span><span><input</span> type<span>="submit"</span> value<span>="Login"</span>></span>
</span> <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>
Kod ini menunjukkan mesej "anda log masuk" jika pengguna semasa log masuk, dan templat "daftar" dan "log masuk" sebaliknya.
Membuat peristiwa
Pada masa ini, borang kami adalah statik. Untuk membuat mereka melakukan sesuatu, kami memerlukan mereka untuk bertindak balas terhadap acara penyerahan. Mari kita tunjukkan ini dengan memberi tumpuan kepada templat "daftar".
Di dalam fail JavaScript projek, tulis yang berikut:
<span><span><span><head</span>></span>
</span> <span><span><span><title</span>></span>Custom Registration Tutorial<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span> {{#if currentUser}}
<span><span><span><p</span>></span>You're logged in.<span><span></p</span>></span>
</span> {{else}}
{{> register}}
{{> login}}
{{/if}}
<span><span><span></body</span>></span></span>
Di sini, kami telah menulis kod supaya borang di dalam templat "daftar":
Kami juga meletakkan kod ini di dalam Isclient Conditional kerana kami tidak mahu kod ini berjalan pada pelayan (kerana ia hanya dimaksudkan untuk antara muka).
Di dalam acara ini, kami ingin merebut nilai medan e -mel dan kata laluan, dan menyimpannya dalam sepasang pembolehubah. Oleh itu mari kita ubah kod sebelumnya:
<span>if (Meteor.isClient) {
</span> <span>Template.register.events({
</span> <span>'submit form': function(event) {
</span> event<span>.preventDefault();
</span> <span>console.log("Form submitted.");
</span> <span>}
</span> <span>});
</span><span>}</span>
Untuk templat "log masuk", kod tersebut hampir sama:
<span>Template.register.events({
</span> <span>'submit form': function(event){
</span> event<span>.preventDefault();
</span> <span>var emailVar = event.target.registerEmail.value;
</span> <span>var passwordVar = event.target.registerPassword.value;
</span> <span>console.log("Form submitted.");
</span> <span>}
</span><span>});</span>
Hooking Things Together
Selepas menambah pakej kata laluan akaun ke projek, beberapa kaedah menjadi tersedia kepada kami:
Kami akan memberi tumpuan kepada kaedah CreateUser tetapi, berdasarkan nama kaedah, tidak sukar untuk mengetahui tujuan yang lain.
Di bahagian bawah acara hantar untuk templat "daftar", tulis:
meteor <span>add accounts-password</span>
Ini adalah kod yang boleh kita gunakan untuk membuat pengguna baru dan, secara lalai, ia memerlukan dua pilihan: e -mel dan kata laluan.
Untuk melewati mereka, tulis:
<span><span><span><template</span> name<span>="register"</span>></span>
</span> <span><span><span><form</span>></span>
</span> <span><span><span><input</span> type<span>="email"</span> name<span>="registerEmail"</span>></span>
</span> <span><span><span><input</span> type<span>="password"</span> name<span>="registerPassword"</span>></span>
</span> <span><span><span><input</span> type<span>="submit"</span> value<span>="Register"</span>></span>
</span> <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>
Kod akhir untuk acara itu harus menyerupai:
<span><span><span><template</span> name<span>="login"</span>></span>
</span> <span><span><span><form</span>></span>
</span> <span><span><span><input</span> type<span>="email"</span> name<span>="loginEmail"</span>></span>
</span> <span><span><span><input</span> type<span>="password"</span> name<span>="loginPassword"</span>></span>
</span> <span><span><span><input</span> type<span>="submit"</span> value<span>="Login"</span>></span>
</span> <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>
Dengan menggunakan kod ini dan bukannya sisipan generik
Fungsi Kami mempunyai kelebihan bahawa kata laluan disulitkan secara automatik. Selain itu, pengguna dilog masuk selepas mendaftar dan kami tidak perlu menulis banyak kod.
Terdapat juga kaedah LoginWithPassword () yang boleh kita gunakan dalam acara "Login":
<span><span><span><head</span>></span>
</span> <span><span><span><title</span>></span>Custom Registration Tutorial<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span> {{#if currentUser}}
<span><span><span><p</span>></span>You're logged in.<span><span></p</span>></span>
</span> {{else}}
{{> register}}
{{> login}}
{{/if}}
<span><span><span></body</span>></span></span>
Ia juga menerima nilai e -mel dan kata laluan:
<span>if (Meteor.isClient) {
</span> <span>Template.register.events({
</span> <span>'submit form': function(event) {
</span> event<span>.preventDefault();
</span> <span>console.log("Form submitted.");
</span> <span>}
</span> <span>});
</span><span>}</span>
Dan dalam konteks, inilah yang kelihatan seperti kod:
<span>Template.register.events({
</span> <span>'submit form': function(event){
</span> event<span>.preventDefault();
</span> <span>var emailVar = event.target.registerEmail.value;
</span> <span>var passwordVar = event.target.registerPassword.value;
</span> <span>console.log("Form submitted.");
</span> <span>}
</span><span>});</span>
Logging Out
Pengguna kini boleh mendaftar dan log masuk tetapi, untuk membolehkan mereka keluar, mari kita buat pertama kali membuat template "pemuka" baru yang akan ditunjukkan ketika log masuk:
<span>Template.login.events({
</span> <span>'submit form': function(event) {
</span> event<span>.preventDefault();
</span> <span>var emailVar = event.target.loginEmail.value;
</span> <span>var passwordVar = event.target.loginPassword.value;
</span> <span>console.log("Form submitted.");
</span> <span>}
</span><span>});</span>
Kemudian masukkan kod berikut dalam pernyataan IF yang kami tulis sebelum ini dalam artikel ini:
<span>Accounts.createUser({
</span> <span>// options go here
</span><span>});</span>
Sekarang kita boleh membuat acara yang dilampirkan pada pautan "Logout" dalam templat "Dashboard":
<span>Accounts.createUser({
</span> <span>email: emailVar,
</span> <span>password: passwordVar
</span><span>});</span>
Untuk melaksanakan proses pembalakan, kita hanya perlu menggunakan kaedah logout seperti itu:
<span>Template.register.events({
</span> <span>'submit form': function(event) {
</span> event<span>.preventDefault();
</span> <span>var emailVar = event.target.registerEmail.value;
</span> <span>var passwordVar = event.target.registerPassword.value;
</span> <span>Accounts.createUser({
</span> <span>email: emailVar,
</span> <span>password: passwordVar
</span> <span>});
</span> <span>}
</span><span>});</span>
Mendaftarkan, log masuk, dan pembalakan kini harus berfungsi seperti yang diharapkan.
KESIMPULAN
Dayakan pengesahan e -mel pengguna baru.
Soalan Lazim (Soalan Lazim) Mengenai Membuat Borang Login/Pendaftaran Custom Dengan Meteor
Bagaimana saya boleh menambah medan tambahan ke borang pendaftaran dalam meteor?
Menambah medan tambahan ke borang pendaftaran di Meteor agak mudah. Anda boleh melanjutkan profil pengguna dengan menambahkan lebih banyak medan dalam Kaedah Akaun.CreateUser. Contohnya, jika anda ingin menambah medan untuk nama penuh pengguna, anda boleh melakukannya seperti ini:
accounts.createuser ({
nama pengguna: 'testuser',
kata laluan: 'kata laluan ',
profil: {
}
});
Dalam contoh ini, 'FullName' adalah medan tambahan yang ditambahkan ke profil pengguna. Anda boleh mengakses medan ini kemudian menggunakan meteor.user (). Profile.fullname.
Bagaimana saya boleh menyesuaikan penampilan borang log masuk/pendaftaran dalam meteor? cara terbina dalam untuk menyesuaikan penampilan borang log masuk/pendaftaran. Walau bagaimanapun, anda boleh menggunakan CSS untuk gaya bentuk mengikut keperluan anda. Anda boleh menetapkan kelas ke elemen bentuk dan kemudian gunakan kelas ini dalam fail CSS anda untuk memohon gaya. Sebagai alternatif, anda boleh menggunakan perpustakaan UI seperti bootstrap atau bahan-UI untuk gaya borang anda.
Bagaimana saya boleh melaksanakan pengesahan e-mel dalam meteor? Anda boleh menggunakan Kaedah Accounts.SendVerificationEmail untuk menghantar e -mel pengesahan kepada pengguna. Kaedah ini mengambil ID pengguna sebagai parameter dan menghantar e -mel dengan pautan pengguna boleh mengklik untuk mengesahkan alamat e -mel mereka. Anda boleh menghubungi kaedah ini selepas membuat pengguna baru seperti ini:
accounts.createuser ({ e -mel: 'test@example.com',
kata laluan: 'kata laluan' }, fungsi (err, userId) {
if (err) {
} else {
Accounts.sendVerificationEmail (userId);
}); Anda boleh memberikan fungsi panggil balik yang akan dipanggil dengan objek ralat jika ralat berlaku. Objek ralat ini mengandungi maklumat mengenai apa yang berlaku. Anda boleh menggunakan maklumat ini untuk memaparkan mesej ralat yang sesuai kepada pengguna. Berikut adalah contoh:
accounts.CreateUser ({
username: 'testuser',
kata laluan: 'kata laluan'
}, fungsi (err) {
console.log ('Ralat semasa pendaftaran:', err); Meteor menyediakan sokongan terbina dalam untuk fungsi semula kata laluan. Anda boleh menggunakan akaun.forgotPassword dan akaun. Kaedah Akauns.ForgotPassword menghantar e -mel kepada pengguna dengan pautan yang mereka boleh klik untuk menetapkan semula kata laluan mereka. Kaedah Akauns.ResetPassword digunakan untuk mengubah kata laluan pengguna. Ia mengambil token dari pautan semula dan kata laluan baru sebagai parameter.
bagaimana saya boleh menyekat akses ke laluan tertentu berdasarkan pengesahan pengguna di meteor? pada pengesahan pengguna. Anda boleh menyemak sama ada pengguna log masuk menggunakan meteor.userid () atau meteor.user () dan kemudian mengalihkannya ke halaman log masuk jika mereka tidak. ? Anda boleh menambah medan tambahan ke dokumen ini semasa membuat pengguna baru dengan akaun. Kawalan dalam meteor?
Meteor tidak menyediakan sokongan terbina dalam untuk kawalan akses berasaskan peranan, tetapi anda boleh menggunakan pakej seperti Alanning: peranan untuk menambah fungsi ini ke aplikasi anda. Pakej ini membolehkan anda memberikan peranan kepada pengguna dan kemudian periksa peranan ini apabila memutuskan sama ada pengguna dibenarkan melakukan tindakan tertentu. boleh log keluar pengguna dalam meteor menggunakan kaedah meteor.logout. Kaedah ini log pengguna semasa pada klien dan membatalkan token login pada pelayan. Ia juga mengambil fungsi panggil balik yang akan dipanggil tanpa hujah apabila proses logout selesai.
Atas ialah kandungan terperinci Membuat borang log masuk dan pendaftaran tersuai dengan meteor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Bagaimana membuat permintaan HTTP di node.js?
Jul 13, 2025 am 02:18 AM
Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah
Jenis Data JavaScript: Rujukan primitif vs
Jul 13, 2025 am 02:43 AM
Jenis data JavaScript dibahagikan kepada jenis primitif dan jenis rujukan. Jenis primitif termasuk rentetan, nombor, boolean, null, undefined, dan simbol. Nilai -nilai tidak berubah dan salinan disalin apabila memberikan nilai, jadi mereka tidak mempengaruhi satu sama lain; Jenis rujukan seperti objek, tatasusunan dan fungsi menyimpan alamat memori, dan pembolehubah menunjuk objek yang sama akan mempengaruhi satu sama lain. Typeof dan Instanceof boleh digunakan untuk menentukan jenis, tetapi memberi perhatian kepada isu -isu sejarah TypeOfNull. Memahami kedua -dua jenis perbezaan ini dapat membantu menulis kod yang lebih stabil dan boleh dipercayai.
React vs angular vs vue: Rangka kerja JS mana yang terbaik?
Jul 05, 2025 am 02:24 AM
Rangka kerja JavaScript mana yang terbaik? Jawapannya ialah memilih yang paling sesuai mengikut keperluan anda. 1. REACT adalah fleksibel dan bebas, sesuai untuk projek sederhana dan besar yang memerlukan penyesuaian tinggi dan keupayaan seni bina pasukan; 2. Angular menyediakan penyelesaian lengkap, sesuai untuk aplikasi peringkat perusahaan dan penyelenggaraan jangka panjang; 3. Vue mudah digunakan, sesuai untuk projek kecil dan sederhana atau perkembangan pesat. Di samping itu, sama ada terdapat timbunan teknologi sedia ada, saiz pasukan, kitaran hayat projek dan sama ada SSR diperlukan juga faktor penting dalam memilih rangka kerja. Singkatnya, tidak ada kerangka terbaik, pilihan terbaik adalah yang sesuai dengan keperluan anda.
Objek Masa JavaScript, seseorang membina eactexe, laman web lebih cepat di Google Chrome, dll.
Jul 08, 2025 pm 02:27 PM
Helo, pemaju JavaScript! Selamat datang ke berita JavaScript minggu ini! Minggu ini kami akan memberi tumpuan kepada: Pertikaian tanda dagangan Oracle dengan Deno, objek masa JavaScript baru disokong oleh pelayar, kemas kini Google Chrome, dan beberapa alat pemaju yang kuat. Mari mulakan! Pertikaian tanda dagangan Oracle dengan percubaan Deno Oracle untuk mendaftarkan tanda dagangan "JavaScript" telah menyebabkan kontroversi. Ryan Dahl, pencipta Node.js dan Deno, telah memfailkan petisyen untuk membatalkan tanda dagangan, dan dia percaya bahawa JavaScript adalah standard terbuka dan tidak boleh digunakan oleh Oracle
Mengendalikan Janji: Chaining, Pengendalian Kesalahan, dan Janji Gabungan di JavaScript
Jul 08, 2025 am 02:40 AM
Janji adalah mekanisme teras untuk mengendalikan operasi tak segerak dalam JavaScript. Memahami panggilan rantaian, pengendalian ralat dan gabungan adalah kunci untuk menguasai aplikasi mereka. 1. Panggilan rantai mengembalikan janji baru melalui .then () untuk merealisasikan persamaan proses tak segerak. Setiap .then () menerima hasil sebelumnya dan boleh mengembalikan nilai atau janji; 2. Pengendalian ralat harus menggunakan .catch () untuk menangkap pengecualian untuk mengelakkan kegagalan senyap, dan boleh mengembalikan nilai lalai dalam tangkapan untuk meneruskan proses; 3. Gabungan seperti janji.all () (berjaya hanya berjaya selepas semua kejayaan), janji.race () (penyempurnaan pertama dikembalikan) dan janji.allsettled () (menunggu semua penyelesaian)
Apakah API cache dan bagaimana ia digunakan dengan pekerja perkhidmatan?
Jul 08, 2025 am 02:43 AM
CACHEAPI adalah alat yang disediakan oleh penyemak imbas kepada permintaan rangkaian cache, yang sering digunakan bersempena dengan ServiceWorker untuk meningkatkan prestasi laman web dan pengalaman luar talian. 1. Ia membolehkan pemaju menyimpan sumber secara manual seperti skrip, helaian gaya, gambar, dan lain -lain; 2. Ia boleh memadankan tindak balas cache mengikut permintaan; 3. Ia menyokong memotong cache tertentu atau membersihkan seluruh cache; 4. Ia boleh melaksanakan keutamaan cache atau strategi keutamaan rangkaian melalui perkhidmatan pekerja yang mendengar acara mengambil; 5. Ia sering digunakan untuk sokongan luar talian, mempercepat kelajuan akses berulang, sumber utama dan kandungan kemas kini latar belakang; 6. Apabila menggunakannya, anda perlu memberi perhatian kepada kawalan versi cache, sekatan penyimpanan dan perbezaan dari mekanisme caching HTTP.
Memanfaatkan array.prototype Kaedah untuk manipulasi data dalam javascript
Jul 06, 2025 am 02:36 AM
Kaedah terbina dalam JavaScript seperti .map (), .filter () dan .reduce () dapat memudahkan pemprosesan data; 1) .map () digunakan untuk menukar elemen satu hingga satu untuk menghasilkan tatasusunan baru; 2) .filter () digunakan untuk menapis elemen mengikut keadaan; 3) .reduce () digunakan untuk mengagregatkan data sebagai nilai tunggal; Penyalahgunaan harus dielakkan apabila digunakan, mengakibatkan kesan sampingan atau masalah prestasi.
JS Roundup: menyelam jauh ke dalam gelung acara JavaScript
Jul 08, 2025 am 02:24 AM
Gelung acara JavaScript menguruskan operasi tak segerak dengan menyelaraskan susunan panggilan, webapis, dan barisan tugas. 1. Stack panggilan melaksanakan kod segerak, dan ketika menghadapi tugas -tugas yang tidak segerak, ia diserahkan kepada Webapi untuk diproses; 2. Selepas Webapi melengkapkan tugas di latar belakang, ia meletakkan panggil balik ke dalam barisan yang sama (tugas makro atau tugas mikro); 3. Loop acara memeriksa sama ada timbunan panggilan kosong. Jika ia kosong, panggilan balik diambil dari barisan dan ditolak ke dalam tumpukan panggilan untuk pelaksanaan; 4. Tugas -tugas mikro (seperti janji. 5. Memahami gelung acara membantu mengelakkan menyekat benang utama dan mengoptimumkan pesanan pelaksanaan kod.
