Perbelanjaan penjejakan dengan couchdb dan sudut

Tutorial ini menunjukkan membina aplikasi penjejakan perbelanjaan menggunakan CouchDB (pangkalan data NoSQL) dan sudut (kerangka JavaScript). Aspek yang unik ialah API HTTP CouchDB, yang membolehkan komunikasi langsung antara frontend sudut dan pangkalan data, menghapuskan keperluan untuk pelayan backend yang berasingan.

Kami akan meliputi membina aplikasi kecil langkah demi langkah, dengan setiap langkah yang diwakili oleh komit (termasuk ujian, walaupun tidak terperinci di sini). Kod Lengkap boleh didapati di GitHub (pautan tidak disediakan dalam asal, perlu ditambah jika tersedia).

Konsep Utama:

• HTTP API CouchDB: interaksi sisi klien langsung melalui permintaan HTTP memudahkan pembangunan.
• Suntikan Ketergantungan Angular (DI): Menguruskan kebergantungan aplikasi, meningkatkan modulariti dan kesesuaian.
• mengikat data dua hala: dengan cekap menyegerakkan model sudut dan pandangan, memastikan konsistensi UI dengan data CouchDB.
• Pengesahan sisi klien dan pelayan: Angular mengendalikan pengesahan frontend, sementara CouchDB menguatkuasakan pengesahan dokumen untuk integriti data.
• Skalabiliti: Tutorial mempamerkan teknik seperti arahan dan data yang mengikat untuk membina penyelesaian berskala.

Mengapa memilih Couchdb? Walaupun pilihan klien seperti IndexedDB dan penyimpanan tempatan wujud, pelayan pangkalan data menawarkan kelebihan, terutamanya untuk aplikasi kerjasama. Pelbagai pengguna boleh mengakses dan mengemas kini senarai perbelanjaan serentak. Sokongan HTTP asli CouchDB menghapuskan lapisan perantara, memudahkan komunikasi antara aplikasi dan pangkalan data. Sokongan yang wujud untuk replikasi menjadikan sistem pangkalan data yang diedarkan mudah dilaksanakan.

Prasyarat:

Pasang CouchDB terkini (versi 1.6 atau lebih baru) dan pelepasan Node.js stabil baru -baru ini (versi 0.10.x atau lebih baru).

Menyediakan persekitaran pembangunan:

1. Pasang node.js dan alat:

   Gunakan pemasang (tersedia di laman web Node.js) atau pengurus pakej seperti NVM. Pasang , , , dan yo menggunakan NPM secara global: generator-angular grunt-cli couchapp npm install -g yo generator-angular grunt-cli couchapp

Buat dan perancah aplikasi sudut:
2. Buat direktori projek, navigasi kepadanya, dan gunakan penjana sudut:

   mkdir expenses && cd expenses && yo angular expenses

Jalankan pelayan pembangunan:
3. Gunakan Grunt untuk memulakan pelayan pembangunan:

   . Ini harus dibuka dalam penyemak imbas anda. grunt serve http://127.0.0.1:9000

4. Pasang Couchdb: Ikuti arahan pemasangan CouchDB untuk sistem operasi anda. (mis., Menggunakan brew pada macOS).

persediaan couchdb awal:

1. Mula Couchdb: couchdb &

2. Buat pangkalan data: curl -X PUT http://127.0.0.1:5984/expenses

3. Masukkan dokumen awal: Gunakan curl untuk menambah entri perbelanjaan sampel (perintah contoh disediakan dalam tutorial asal).

mengaktifkan CORS:

Untuk membenarkan permintaan silang asal dari aplikasi sudut ke CouchDB, membolehkan CORS dalam konfigurasi CouchDB (biasanya local.ini). Tutorial menyediakan curl arahan untuk membolehkan CORS dan menetapkan asal -usul ke * (untuk pembangunan sahaja; ubah ini untuk pengeluaran).

Suntikan Angular dan Ketergantungan:

Tutorial menunjukkan menggunakan suntikan pergantungan Angular untuk menguruskan tetapan sambungan pangkalan data. A tetap appSettings dibuat untuk memegang url pangkalan data.

mengambil data dengan Perkhidmatan $http Angular:

Paparan CouchDB () dicipta untuk mendapatkan data perbelanjaan. Pengawal Sudut menggunakan perkhidmatan _design/expenses/_view/byName untuk membuat permintaan untuk pandangan ini dan mengemas kini $http dengan data yang diambil. Tutorial menunjukkan menggunakan $scope untuk memaparkan data dalam paparan. ng-repeat

3 Borang HTML ditambah untuk membolehkan pengguna memasukkan perbelanjaan baru.

Arahan mengikat input bentuk ke skop sudut. Arahan

memanggil fungsi pengawal untuk menghantar data ke CouchDB menggunakan . Kemas kini optimis digunakan untuk memberikan maklum balas segera kepada pengguna.

Menambah Pengesahan: ng-model ng-submit $http.post Pengesahan sisi pelayan dilaksanakan dalam dokumen reka bentuk CouchDB menggunakan

. Pengesahan sisi klien ditambah menggunakan arahan Angular

dan . Kesahan borang diperiksa menggunakan untuk melumpuhkan butang hantar jika borang tidak sah.

validate_doc_update required ng-pattern Kesimpulan: form.$invalid

Tutorial menyimpulkan dengan meringkaskan konsep utama yang diliputi dan mencadangkan topik penerokaan lanjut, seperti hosting di CouchDB, kemas kini dokumen, arahan tersuai, replikasi, dan fungsi pandangan yang lebih maju. Seksyen Soalan Lazim juga dimasukkan untuk menangani soalan -soalan biasa mengenai hosting, menggunakan JavaScript/Node.js/Couchdb bersama -sama, dan cadangan pemasangan/hosting.

Atas ialah kandungan terperinci Perbelanjaan penjejakan dengan couchdb dan sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!