Bermula dengan Ember dan Ember CLI

mata teras

Ember CLI adalah alat baris perintah yang dibina untuk Ember, yang menggabungkan pelbagai fungsi seperti penjana, pemampat, pengkompil preprocessor CSS, penambahbaikan automatik dan pemuat modul ES6. Ia boleh digunakan sebagai alternatif kepada alat seperti Grunt dan Gulp untuk menubuhkan projek Ember baru.
Ember mengikuti konsep bahawa konvensyen lebih baik daripada konfigurasi, yang bermaksud ia mempunyai banyak tetapan lalai yang memudahkan proses pembangunan. Unsur-unsur utama termasuk penghalaan, pengawal, templat, komponen, dan data Ember.
Tutorial ini menyediakan panduan langkah demi langkah mengenai cara membina aplikasi pengurus hubungan mudah menggunakan Ember CLI. Ia merangkumi keupayaan membuat projek Ember baru, menetapkan data tetap, menghasilkan model pengguna dan penghalaan, mewujudkan templat pengguna, dan menambah paparan dan penyuntingan maklumat pengguna.
Ember adalah rangka kerja JavaScript yang kuat untuk membina aplikasi web yang besar. Dengan Ember CLI, ia menyediakan persekitaran pembangunan piawai yang menjadikannya lebih mudah untuk menguruskan kebergantungan, mengautomasikan tugas, dan melaksanakan amalan terbaik.

Ember telah mengalami banyak perubahan selama bertahun -tahun. Perubahan terbesar ialah pengenalan Ember CLI, alat baris arahan yang dibina untuk Ember. Ia menggabungkan pelbagai fungsi seperti penjana, pemampat, compiler preprocessor CSS, penambahbaikan automatik dan loader modul ES6. Alat baris arahan ini akan membantu anda mengurangkan masa yang anda habiskan untuk menyediakan alat seperti Grunt dan Gulp. Ia boleh dikatakan alternatif yang baik untuk alat ini untuk mana -mana projek Ember baru. Dalam artikel ini, anda akan belajar bagaimana untuk membina aplikasi pengurus hubungan mudah menggunakan Ember CLI. Tutorial ini sedikit berbeza daripada artikel lain tentang Ember yang saya hantar di SitePoint kerana mereka tidak datang dengan Ember CLI. Walau bagaimanapun, kebanyakan konsep ini masih berlaku, jadi saya cadangkan anda menyemaknya dan terus belajar. Kod lengkap untuk artikel ini boleh didapati di GitHub.

Cara memasang Ember Cli

Untuk memasang Ember CLI, anda perlu memasang beberapa kebergantungan terlebih dahulu. Yang pertama ialah Node.js. Anda memerlukan sekurang -kurangnya versi 0.12.x. Seterusnya, anda perlu memasang Bower, yang boleh dilakukan dengan menjalankan perintah berikut:

<code class="language-bash">npm install -g bower</code>

Kemudian, untuk memasang Ember CLI, jalankan arahan berikut:

<code class="language-bash">npm install -g ember-cli</code>

bagaimana untuk membuat projek Ember baru

Sebelum memulakan operasi yang indah, anda perlu membuka terminal dan melaksanakan arahan berikut untuk membuat folder projek baru yang dipanggil ContactManager:

<code class="language-bash">ember new contactmanager</code>

Langkah kedua, pergi ke direktori dan pasang semua kebergantungan npm dan bower menggunakan arahan berikut:

<code class="language-bash">cd contactmanager
npm install
bower install</code>

Pada masa ini, mulakan pelayan Ember terbina dalam dengan melaksanakan perintah berikut:

<code class="language-bash">ember serve</code>

Anda kini boleh mengakses aplikasi baru anda di URL Localhost: 4200. Ini adalah port lalai untuk aplikasi Ember yang berjalan pada komputer tempatan, tetapi anda boleh mengubahnya seperti yang anda suka. Jika anda mengikuti semua langkah yang diarahkan, anda kini harus melihat tajuk dalam penyemak imbas anda yang mengatakan "Selamat Datang ke Ember".

Konvensyen dan Struktur Ember

Sebelum kita menyelam ke dalam permohonan, mari kita semak beberapa konvensyen Ember.

Router dan Router

Routing adalah titik masuk untuk aplikasi Ember. Definisi penghala digunakan dalam fail app/router.js. Mereka membolehkan anda mengakses bahagian yang berlainan aplikasi. Sebagai contoh, jika anda memutuskan bahawa anda perlu menguruskan pengguna dalam aplikasi anda, anda mesti menentukan laluan pengguna. Anda boleh melakukan ini menggunakan sintaks berikut:

<code class="language-bash">npm install -g bower</code>

ini akan mewujudkan URL berikut untuk kami:

• /pengguna/
• /pengguna/indeks/
• /pengguna/loading/

oleh konvensyen, apabila anda menentukan laluan, Ember mengharapkan untuk mencari jenis persatuan lain, seperti laluan, pengawal, dan templat. Kita boleh membuat keputusan untuk mencipta jenis ini secara eksplisit, atau membenarkan Ember mencipta mereka untuk kita. Dalam banyak aplikasi, anda kemungkinan besar perlu membuatnya sendiri, tetapi terpulang kepada anda. Ingat, adalah penting untuk membezakan antara router dan laluan. Struktur URL yang kami buat di atas dilakukan menggunakan penghala. Ini hanya menunjukkan niat yang kita mahu menggunakan URL ini dalam aplikasi. Kami belum membuat laluan sebenar, tetapi hanya URL untuk laluan tersebut. Untuk membuat laluan, kami perlu mengikuti proses ini dalam folder Laluan. Jika anda keliru, jangan risau, kerana saya akan melihat topik ini lebih mendalam kemudian dalam artikel ini.

pengawal

Controller adalah jenis yang digunakan untuk menyimpan Negeri Lihat, yang terletak di folder App/Controllers. Mereka bekerja bersempena dengan penghalaan. Dalam kes ini, URL di atas sepadan dengan /pengguna /dan memerlukan pengawal yang dinamakan /pengguna /. Juga di sini, kita bebas memilih sama ada untuk menentukannya sendiri. Pengawal juga mentakrifkan pengendali acara untuk melihat operasi (seperti klik, hovers, dan lain -lain).

template

Templat adalah bahagian perwakilan Ember. Anda menulisnya dalam bahasa templat yang dipanggil hendal, yang dikumpulkan kepada HTML tulen. Templat ini terletak di folder App/Templates.

Komponen

Komponen adalah blok fungsi serba lengkap yang kecil. Anda boleh memikirkannya sebagai gabungan perwakilan dan ciri -ciri, mereka boleh diguna semula dan mudah dijaga.

Ember-Data

Ini adalah perpustakaan yang dikendalikan oleh pasukan Ember Core yang melengkapkan Core Ember dan bertindak sebagai ORM front-end untuk menguruskan model data. Terdapat alternatif lain yang saya tidak gunakan sebelum ini dan keluar dari skop artikel ini, kerana kami akan menggunakan Ember-Data.

App

Aplikasi Pengurusan Kenalan yang akan kami bina akan termasuk senarai pengguna dan maklumat hubungan mereka yang tersedia. Aplikasi ini akan membolehkan kami membuat, mengedit, memadam dan melihat pengguna. Untuk membuat permohonan kami ringkas dan jelas, kami akan menggunakan penyesuai tetap yang datang dengan Ember CLI. Ini bertindak sebagai backend, kecuali data tidak berterusan apabila halaman disegarkan. Pertama, jika anda belum menciptanya, gunakan Ember New ContactManager untuk membuat projek Ember baru.

Menjana model pengguna

pindah ke folder projek dan menghasilkan model pengguna menggunakan arahan berikut:

<code class="language-bash">npm install -g ember-cli</code>

ini akan membuat fail bernama user.js dalam aplikasi/model, dengan kandungan berikut:

<code class="language-bash">npm install -g bower</code>

Buat perubahan yang diperlukan supaya pernyataan eksport kelihatan seperti ini:

<code class="language-bash">npm install -g ember-cli</code>

Ini mentakrifkan sifat -sifat model pengguna kami akan ada.

Menjana laluan pengguna

Sekarang, tambahkan baris berikut ke fail router.js anda untuk memberi kami beberapa URL yang tersedia:

<code class="language-bash">ember new contactmanager</code>

Kami mempunyai tiga URL baru. Satu adalah untuk menyenaraikan pengguna, yang lain adalah untuk melihat pengguna individu, dan yang terakhir adalah untuk mengedit maklumat pengguna. Seterusnya, mari buat laluan pengguna menggunakan arahan berikut:

<code class="language-bash">cd contactmanager
npm install
bower install</code>

Laluan ini akan digunakan untuk mengambil senarai pengguna kami. Tukar kandungannya menggunakan coretan kod berikut:

<code class="language-bash">ember serve</code>

Tetapkan data tetap dan menjana templat pengguna

Pada ketika ini, mari tambahkan beberapa data sementara ke aplikasi kami. Untuk melakukan ini, jalankan arahan berikut:

<code class="language-javascript">Router.map(function() {
  this.resource('users', function() {});
});</code>

Ini akan menghasilkan fail yang dinamakan Application.js dalam apl/ penyesuai/ folder. Secara lalai, Ember menggunakan RestAdapter untuk menanyakan model. Penyesuai ini menganggap bahawa anda mempunyai sistem backend yang menyediakan data JSON ke aplikasi Ember Client anda. Oleh kerana kita tidak mempunyai backend, dalam kes ini kita mahu menggunakan data tetap. Oleh itu, kami akan mengemas kini kod penyesuai seperti berikut:

<code class="language-bash">ember generate model user</code>

dan tambahkan yang berikut kepada model pengguna anda untuk membuat beberapa lekapan.

<code class="language-javascript">import DS from 'ember-data';

export default DS.Model.extend({
});</code>

Jika anda menavigasi ke url localhost: 4200/pengguna, anda hanya akan melihat mesej ucapan lama, dan bukan pengguna yang disematkan data yang kami tambah. Untuk melihat data pengguna, kita perlu membuat templat untuk pengguna menggunakan arahan berikut:

<code class="language-javascript">export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  addressLine: DS.attr(),
  postCode: DS.attr(),
  country: DS.attr()
});</code>

Ini mewujudkan fail yang dinamakan users.hbs dalam aplikasi/ templat/ folder. Buka fail ini dan kemas kini kandungannya seperti berikut:

<code class="language-javascript">Router.map(function() {
  this.resource('users', function() {
    this.route('show',{path: '/:user_id'});
    this.route('edit',{path: '/:user_id/edit'});
  });
});</code>

Anda kini harus melihat senarai pengguna, masing -masing dengan teks edit di sebelahnya. Kerana kita hanya mempunyai satu pengguna dalam data tetap, kita hanya akan melihat satu pengguna. Anda boleh menambah lebih banyak objek pengguna ke perlawanan pengguna seperti yang diperlukan. Hanya pastikan setiap objek mempunyai ID yang unik.

Tunjukkan pengguna individu

Sekarang bahawa kami telah menyenaraikan pengguna kami, mari kita lihat bagaimana untuk memaparkan maklumat penuh pengguna. Pertama. Tukar kod dalam template pengguna dengan melampirkan teks "edit" di sebelah setiap nama pengguna dengan pautan. Kemudian, tukar "edit" ke:

<code class="language-bash">ember generate route users</code>

Seterusnya, mari menghasilkan pengawal pengguna menggunakan arahan berikut:

<code class="language-javascript">import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return this.store.find('user');
  }
});</code>

di dalam (pengawal pengguna), tukar kandungan kepada yang berikut:

<code class="language-bash">ember generate adapter application</code>

Selepas selesai, gunakan arahan berikut untuk menghasilkan templat untuk mengedit pengguna:

<code class="language-javascript">import DS from 'ember-data';

export default DS.FixtureAdapter.extend({
});</code>

Pada masa ini, templat yang dibuat (app/templat/pengguna/show.hbs) kosong. Buka dan tambahkan kod berikut:

<code class="language-javascript">User.reopenClass({
   FIXTURES: [{
      id: 1,
      firstName: 'James',
      lastName: 'Rice',
      addressLine: '66 Belvue Road',
      postCode: 'M235PS',
      country: 'United Kingdom'
   }]
});</code>

Lakukan ini dan anda harus dapat melihat maklumat penuh untuk setiap pengguna yang anda klik.

edit pengguna tunggal

Jika anda ingin mengedit pengguna tunggal, anda perlu mengikuti beberapa langkah mudah. Pertama, pautan ke pengguna mengedit laluan dengan melampirkan teks "edit" di sebelah setiap nama pengguna dengan pautan. Kemudian, tukar "edit" ke:

<code class="language-bash">npm install -g bower</code>

Seterusnya, mari menghasilkan pengawal pengguna menggunakan arahan berikut:

<code class="language-bash">npm install -g ember-cli</code>

di dalam (pengawal pengguna), tukar kandungan kepada yang berikut:

<code class="language-bash">ember new contactmanager</code>

Selepas selesai, gunakan arahan berikut untuk menghasilkan templat untuk mengedit pengguna:

<code class="language-bash">cd contactmanager
npm install
bower install</code>

dalam aplikasi template baru/templat/pengguna/edit, tampal kod berikut:

<code class="language-bash">ember serve</code>

Kod ini memanggil fungsi SaveUser () pada pengawal kami apabila menyerahkan borang. Fungsi ini melewati pengguna yang diedit dan menyimpan maklumat yang diubah suai. Dengan perubahan ini, anda boleh mengedit butiran pengguna apabila anda mengklik pada pautan edit untuk pengguna. Apabila anda mengklik butang Simpan, anda boleh menyimpannya, selepas itu anda akan diarahkan kembali ke senarai pengguna. Long Live! Kami kini mempunyai pengurus senarai kenalan mudah. Anda boleh mengubahnya menjadi aplikasi penuh dengan menyambungkannya ke backend sebenar untuk meneruskan data apabila halaman menyegarkan. Saya juga menggalakkan anda untuk menambah fungsi memadam ke aplikasi supaya anda boleh memadam pengguna yang tidak diingini pada bila -bila masa.

Kesimpulan

Ember https://www.php.cn/link/0e0f9e664029e8912996d65c1cf09761 adalah rangka kerja untuk membina aplikasi web yang besar. Ia mempunyai idea bahawa konvensyen lebih baik daripada konfigurasi, yang bermaksud ia berdasarkan beberapa keputusan biasa dan mempunyai banyak kegagalan (konvensyen), yang menjadikan proses pembangunan anda lebih mudah. Dengan cara ini, anda tidak perlu membuat banyak keputusan remeh semasa proses pembangunan. Saya harap anda suka membaca tutorial ini dan mempelajari perkara -perkara baru tentang cara menggunakan kerangka JavaScript yang kuat dan mudah dalam projek anda. Tolong beritahu kami apa yang anda fikirkan dalam komen di bawah. Anda boleh mencari kod untuk aplikasi di GitHub.

soalan yang sering ditanya mengenai memulakan dengan Ember dan Ember CLI

Apakah perbezaan antara Ember dan Ember CLI?

Ember adalah rangka kerja JavaScript untuk membina aplikasi web, dan Ember CLI adalah alat baris arahan yang membantu anda membuat, membangun, dan membina aplikasi Ember. Ember CLI menyediakan persekitaran pembangunan piawai yang menjadikannya lebih mudah untuk menguruskan kebergantungan, mengautomasikan tugas, dan melaksanakan amalan terbaik.

bagaimana memasang Ember CLI?

Untuk memasang Ember CLI, anda perlu memasang Node.js dan NPM pada sistem anda. Selepas memasang prasyarat ini, anda boleh memasang Ember CLI menggunakan arahan berikut di terminal: npm install -g ember-cli.

Saya mendapat mesej ralat yang mengatakan "Anda mesti berada di dalam projek Ember CLI untuk menggunakan perintah servis". Apa maksudnya?

Ralat ini berlaku apabila anda cuba menjalankan arahan ember serve di luar direktori projek Ember CLI. Untuk menyelesaikan masalah ini, gunakan arahan ember serve untuk menavigasi ke direktori akar projek sebelum menjalankan cd.

Bagaimana untuk membuat aplikasi Ember baru menggunakan Ember CLI?

anda boleh menggunakan arahan ember new diikuti dengan nama permohonan untuk membuat aplikasi Ember baru. Sebagai contoh, ember new my-app akan membuat aplikasi Ember baru yang dipanggil "My-App".

Perintah Ember CLI asas apa yang harus saya tahu?

beberapa perintah Ember CLI asas yang harus anda ketahui termasuk ember new (buat aplikasi baru), ember serve (mulakan pelayan pembangunan), ember generate (menghasilkan fail baru), dan ember build (bina aplikasi anda program untuk penempatan).

Bagaimana membina permohonan saya untuk pengeluaran menggunakan Ember CLI?

anda boleh menggunakan arahan ember build dan tetapkan pilihan --environment untuk "pengeluaran" untuk membina permohonan anda untuk pengeluaran. Perintah itu kelihatan seperti ini: ember build --environment production.

Bagaimana untuk menghasilkan fail baru dalam aplikasi Ember saya menggunakan Ember CLI?

anda boleh menggunakan arahan ember generate diikuti dengan jenis fail dan namanya untuk menghasilkan fail baru dalam aplikasi Ember. Sebagai contoh, ember generate route about akan menjana laluan baru yang dipanggil "Mengenai".

Bagaimana untuk memulakan pelayan pembangunan menggunakan Ember CLI?

anda boleh memulakan pelayan pembangunan menggunakan perintah ember serve. Ini akan memulakan pelayan dan menjadikan aplikasi anda boleh diakses di http: // localhost: 4200.

Bagaimana untuk mengemas kini Ember CLI?

anda boleh menggunakan arahan npm uninstall -g ember-cli untuk menyahpasang versi lama dan kemudian gunakan arahan npm install -g ember-cli untuk memasang versi baru untuk mengemas kini Ember CLI.

Apakah tujuan fail.ember-cli?

.ember-cli Fail adalah fail konfigurasi Ember CLI. Ia membolehkan anda menyesuaikan tingkah laku projek Ember CLI anda. Sebagai contoh, anda boleh menentukan port lalai pelayan pembangunan, membolehkan atau melumpuhkan ciri -ciri tertentu, dan banyak lagi.

Atas ialah kandungan terperinci Bermula dengan Ember dan Ember CLI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!