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)
Topik panas
Java vs JavaScript: Membersihkan kekeliruan
Jun 20, 2025 am 12:27 AM
Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza, masing -masing sesuai untuk senario aplikasi yang berbeza. Java digunakan untuk pembangunan aplikasi perusahaan dan mudah alih yang besar, sementara JavaScript digunakan terutamanya untuk pembangunan laman web.
Komen JavaScript: Penjelasan ringkas
Jun 19, 2025 am 12:40 AM
JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic
Menguasai Komen JavaScript: Panduan Komprehensif
Jun 14, 2025 am 12:11 AM
Commentsarecrucialinjavascriptformaintainingclarityandfosteringcollaboration.1) theyhelpindebugging, onboarding, andunderstandingcodeevolution.2) menggunakan-linecommentsforquickexplanationsandmulti-linecommentsfordetaileddescriptions.3)
Bagaimana untuk bekerja dengan tarikh dan masa di JS?
Jul 01, 2025 am 01:27 AM
Titik berikut harus diperhatikan apabila tarikh pemprosesan dan masa di JavaScript: 1. Terdapat banyak cara untuk membuat objek tarikh. Adalah disyorkan untuk menggunakan rentetan format ISO untuk memastikan keserasian; 2. Dapatkan dan tetapkan maklumat masa boleh diperoleh dan tetapkan kaedah, dan ambil perhatian bahawa bulan bermula dari 0; 3. Tarikh pemformatan secara manual memerlukan rentetan, dan perpustakaan pihak ketiga juga boleh digunakan; 4. Adalah disyorkan untuk menggunakan perpustakaan yang menyokong zon masa, seperti Luxon. Menguasai perkara -perkara utama ini secara berkesan dapat mengelakkan kesilapan yang sama.
JavaScript vs Java: Perbandingan Komprehensif untuk Pemaju
Jun 20, 2025 am 12:21 AM
JavaScriptispreferredforwebdevelopment, whersjavaisbetterforlarge-scalebackendsystemsandandroidapps.1) javascriptexcelsinceleatinginteractiveWebexperienceswithitsdynamicnatureanddommanipulation.2) javaoffersstrongyblectionandobjection
JavaScript: Meneroka jenis data untuk pengekodan yang cekap
Jun 20, 2025 am 12:46 AM
JavascripthassevenfundamentalDatypes: nombor, rentetan, boolean, undefined, null, objek, andsymbol.1) numberuseadouble-precisionformat, bergunaforwidevaluangesbutbecautiouswithfloating-pointarithmetic.2)
Kenapa anda harus meletakkan tag di bahagian bawah ?
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
Apa perbezaan antara Java dan JavaScript?
Jun 17, 2025 am 09:17 AM
Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza. 1.Java adalah bahasa yang ditaip dan disusun secara statik, sesuai untuk aplikasi perusahaan dan sistem besar. 2. JavaScript adalah jenis dinamik dan bahasa yang ditafsirkan, terutamanya digunakan untuk interaksi web dan pembangunan front-end.
