Dalam JavaScript Essentials: Bahagian 7, saya membayangkan bahawa kami akan melihat ke dalam membangunkan API ([0] [1]) dan di sinilah kami bermula. Kami akan merasakan apa yang diperlukan untuk membangunkan API mudah untuk menjejaki perbelanjaan.
Untuk penjejak perbelanjaan ini, kami perlu menjejaki item yang dibeli, jumlah dan tarikh item itu dibeli. Perbelanjaan akan kelihatan seperti ini:
{ "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop", "amount": 2099.99, "date": "2024-31-12" }
Pada ketika ini, memandangkan pangkalan data sebenar belum lagi ditambah, kita boleh menggunakan senarai (susunan tatasusunan) untuk menyimpan data yang akan kita cipta. Dalam petikan ini, kami akan meneliti setiap konsep utama yang mengelilingi penciptaan API dan menambah beberapa cara untuk menambah baik apl ini kemudian.
Ketahui bahawa kami akan membina di atas projek ini, jadi, pastikan ia bersih dan terokai, uji kaji, gelisah, dsb sebaik mungkin.
Seperti biasa, kami memerlukan persekitaran kerja yang segar untuk setiap projek, jadi kami akan bermula dengan mencipta dan memulakan projek Node JS. Jika anda tidak pasti, lihat JavaScript Essentials: Bahagian 6 (Mastermind dalam Javascript).
Sekarang kita perlu mencipta folder induk untuk API kita dengan melakukan:
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
Apa yang kami lakukan dengan skrip ini adalah secara langsung.
Alternatifnya ialah pergi ke mana sahaja anda mahu mencipta folder ini dan menciptanya di sana kemudian buka folder dalam projek vscode dan init nod - lihat, JavaScript Essentials: Bahagian 6 (Mastermind dalam Javascript).
Pada ketika ini, kita perlu memasang pakej nodejs yang dipanggil ekspres. Express ialah perpustakaan yang akan membantu kami mencipta API kami.
Kita boleh memasang pakej ini dengan menjalankan, npm i express. Ini harus mengubah suai fail package.json dan mencipta fail package-lock.json dan folder node_modules. Rujuk petikan, Apakah itu Nodejs, untuk pemahaman dan maklumat lanjut mengenai cara menggunakan npm untuk memasang pakej.
Dalam fail index.js kami, kami boleh menambah kod ini.
console.log("expense-tracker-simple-api"); // import the express lib const express = require("express"); // create an express application const app = express(); // create a GET request on the base endpoint app.get("/", (req, res) => res.send("Hello world")); // create a server that listens to requests on port 3000 app.listen(3000, () => console.log(`Api running on ${"http://localhost:3000"}`) );
Apa yang kami lakukan ialah mencipta aplikasi ekspres, gunakan aplikasi untuk membuat permintaan GET untuk menghantar mesej dan biarkan aplikasi mendengar permintaan yang datang dari port 3000.
const app = express();
Mencipta aplikasi ekspres (? iaitu cara membuat aplikasi ekspres)
app.get("/", (req, res) => res.send("Hello world"));
Kami menggunakan contoh aplikasi ekspres untuk membuat permintaan GET. app mempunyai beberapa kaedah dan sifat yang termasuk kaedah HTTP. Lihat kaedah kecuali tentang http di sini.
{ "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop", "amount": 2099.99, "date": "2024-31-12" }
Kami menggunakan aplikasi ekspres untuk mendengar pada port dan menggunakan fungsi anak panah untuk memberitahu kami, memberitahu pembangun, bahawa aplikasi kami sedang berjalan. Untuk pelabuhan, kami boleh mengubahnya ke pelabuhan lain pilihan kami. Walau bagaimanapun, beberapa port khas telah pun dimaksudkan atau digunakan untuk beberapa tugas tertentu dan ia terkenal dalam komuniti dan sebagai pelayan sedemikian sebagai lalai apabila aplikasi atau program tersebut dijalankan pada PC kami. Lihat ini - 0 1 2
Nota: Terdapat beberapa yang tidak boleh digunakan kerana sistem anda disertakan bersamanya dan terdapat beberapa yang disertakan dengan aplikasi yang kami pasang seperti beberapa pelayan dan pangkalan data dan lain-lain. Jangan risau, apabila kami menggunakan port yang sudah digunakan, aplikasi kami akan memberitahu kami. Apa yang perlu kita lakukan ialah tambah satu atau tolak satu. Tiada peluh.
Untuk membuat permintaan GET, gunakan app.get(...), untuk POST gunakan app.post(...) dan seterusnya. Untuk setiap laluan yang ingin kami buat, app.SomeMethod(...), akan mengambil laluan atau laluan, menunjukkan sumber mana yang klien pengguna inginkan atau tindakan yang mereka mahu laksanakan. Sebagai sebahagian daripada laluan, ia boleh mengambil sekurang-kurangnya satu pengendali permintaan. Ini bermakna kita boleh mempunyai aplikasi.SomeMethod(path, handder1, handler2, ..., handlern);.
Untuk permintaan GET di atas, laluan atau laluan ialah / (rentetan) dan pengendali permintaan tunggal yang kami ada ialah (req, res) => res.send("Hello world"), fungsi pengendali (panggilan balik atau fungsi anak panah mudah). Pengendali permintaan boleh menjadi perisian tengah dan pengawal.
Pengendali permintaan biasanya mengambil dua argumen, permintaan dan respons yang masing-masing dipendekkan sebagai req dan res (anda tidak perlu memanggilnya begitu tetapi yang pertama sentiasa permintaan dan yang kedua ialah respons). Permintaan itu menyimpan data (atau beberapa maklumat) tentang siapa yang membuat permintaan dan perkara yang mereka mahukan. Respons adalah cara untuk memberikan maklum balas kepada pengguna yang membuat permintaan. Dalam kes ini, kami menghantar "Hello world" apabila pelanggan membuat permintaan GET ke laluan /.
Di sini anda dapati bahawa pelanggan dan pengguna boleh ditukar ganti, dalam erti kata peranti yang membuat permintaan HTTP kepada pelayan api kami dan bukan pengguna, seperti dalam akaun pengguna.
Biasanya, pengendali permintaan akan mengambil hujah ketiga yang akan menunjuk kepada pengendali seterusnya selepas pengendali sebelumnya melakukan tugasnya. Kami memanggil ini seterusnya. Ia kelihatan lebih kurang seperti:
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
Argumen seterusnya berguna, ia menunjuk kepada pengendali permintaan dan kadangkala ia memerlukan hujah, ralat. Kami akan melaksanakan pengendali ralat untuk mengendalikan ralat yang tidak kami tangani atau ralat yang kami "luluskan" kepada pengendali permintaan seterusnya.
Sekarang mari batalkan proses nodej yang sedang berjalan (dalam terminal), menggunakan kawalan c. Kemudian jalankan semula. Kali ini dengan kandungan yang dikemas kini daripada bahagian Buat pelayan mudah dan laluan GET, kita seharusnya melihat output dalam konsol (terminal) yang serupa dengan,
{ "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop", "amount": 2099.99, "date": "2024-31-12" }
Buka http://localhost:3000 dalam penyemak imbas. Apa yang anda nampak? Teks bertulis, Hello dunia ?
Rom tidak dibina dalam satu hari bak kata pepatah. Perkara yang sama berlaku untuk pembangunan perisian. Mungkin di sini yang kami maksudkan ialah kami akan menambah lebih banyak ciri secara beransur-ansur semasa kami membangunkan dan dalam proses berterusan ini, ia menjadi menjengkelkan untuk memulakan dan menghentikan pelayan sepanjang masa.
Teruskan, tambah satu lagi permintaan GET (laluan) dengan laluan /hello dan pengendali permintaan yang menyatakan sesuatu yang anda ingin katakan. Bergembiralah.
Anda perlu memulakan semula pelayan (proses nodej yang sedang berjalan) dan lawati, http://localhost:3000/hello dalam penyemak imbas untuk melihat respons dari titik akhir itu.
Ini, DAPATKAN http://localhost:3000/hello, ialah titik akhir. Anda berkongsi ini dengan pengguna api. Dalam kalangan kami, kami sebut laluan, kerana kami tidak perlu mengetahui keseluruhan URL (termasuk protokol - http, domain - localhost, port - 3000, dan laluan - /hello). Laluan ialah LALUAN KAEDAH, lebih kurang, DAPATKAN /hello.
Pada macOS atau Windows, kami boleh melakukan nod --watch index.js atau kami boleh melihat perubahan bukan sahaja dalam fail entri kami tetapi dalam keseluruhan laluan folder oleh, node --watch-path=./ index. js untuk melihat perubahan dalam laluan fail dan juga fail itu sendiri.
Pada masa ini, ini ialah kandungan fail package.json saya:
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
Kita boleh menambah skrip yang dipanggil dev di bawah bahagian skrip.
console.log("expense-tracker-simple-api"); // import the express lib const express = require("express"); // create an express application const app = express(); // create a GET request on the base endpoint app.get("/", (req, res) => res.send("Hello world")); // create a server that listens to requests on port 3000 app.listen(3000, () => console.log(`Api running on ${"http://localhost:3000"}`) );
Kami boleh menghentikan pelayan yang sedang berjalan dengan kawalan c dan kini melaksanakan npm run dev. Ini akan memantau perubahan yang disimpan dalam fail kami dan memuatkan semula pelayan.
Jadi jika ini tidak berkesan untuk anda, kami ada alternatif. Kami akan memasang nodemone, npm i nodemon -g. Kami akan menggunakannya di mana-mana sebagai alat utiliti supaya kami tidak perlu memasangnya sebagai sebahagian daripada pakej kami. Kita boleh melihat perubahan dengan melaksanakan, nodemon index.js. Terdapat kes di mana ini tidak akan berfungsi dan apabila tidak, dom nodemon --exec node index.js
Kami boleh mengubah suai skrip dev kami untuk menggunakan nodemon dengan,
const app = express();
Pada ketika ini, anda boleh mengubah suai fail .js anda secara bebas dan apabila disimpan, pelayan akan dimulakan semula untuk memuatkan semula perubahan beban yang digunakan.
Kami telah pun membuat permintaan GET. Dalam bahagian ini, kami akan melihat maksud setiap kaedah secara ringkas kerana kami telah membincangkannya dengan panjang lebar dalam Permintaan dan Respons.
Dalam aplikasi ini, kami hanya menyediakan satu jenis sumber kepada pelanggan kami, iaitu perbelanjaan. Dengan mengandaikan kami menyediakan beberapa sumber, maka kami akan mengumpulkan permintaan di bawah setiap sumber.
Jadi, katakan kita mempunyai pengguna dan perbelanjaan, kita mempunyai GET, POST, PUT, DELETE, dll untuk kedua-dua pengguna dan perbelanjaan.
Buat masa ini, kami akan menggunakan laluan /expenditures untuk mewakili sumber perbelanjaan.
DAPAT: Ini bermakna kami akan membuat laluan untuk menyenaraikan, mendapatkan semua, mengambil semua, dll rekod yang kami ada tentang perbelanjaan. Kami boleh mempunyai permintaan GET yang mengambil salah satu rekod. Kami telah mencipta GET yang serupa
POST: Kaedah siaran sering digunakan untuk mencipta sumber
PUT: Kaedah put digunakan untuk mengemas kini rekursus
PADAM: Kaedah padam digunakan untuk memadam sumber
Kini kita boleh menambah baris kod berikut pada fail index.js tetapi di atas app.listen(3000,...).
{ "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop", "amount": 2099.99, "date": "2024-31-12" }
Apabila anda menyimpan fail anda, adakah anda melihat log dalam terminal? Uji laluan GET untuk perbelanjaan dalam penyemak imbas.
Kami hanya boleh menjalankan permintaan GET dalam penyemak imbas. Kami akan membincangkan pelanggan api seterusnya.
Klien API dalam konteks ini ialah alat, program atau aplikasi yang digunakan untuk berinteraksi (menggunakan, menyepadukan atau menguji) API. Paling biasa digunakan ialah Posmen, Insomnia, curl, dll...
Dalam vscode dan bersama beberapa IDE lain, terdapat sambungan yang menyediakan sambungan kepada klien api. vscode mempunyai beberapa sambungan ini untuk perkara itu. Walau bagaimanapun, kami akan mempertimbangkan klien api yang dikenali sebagai REST Client. Untuk kes penggunaan kami, lebih mudah untuk menggunakan Rest Client supaya jangan risau. Kami dilindungi.
Nota: posmen atau pelanggan api lain pilihan anda boleh digunakan
{ "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop", "amount": 2099.99, "date": "2024-31-12" }
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
console.log("expense-tracker-simple-api"); // import the express lib const express = require("express"); // create an express application const app = express(); // create a GET request on the base endpoint app.get("/", (req, res) => res.send("Hello world")); // create a server that listens to requests on port 3000 app.listen(3000, () => console.log(`Api running on ${"http://localhost:3000"}`) );
Sebagai latihan, buat permintaan untuk titik akhir perbelanjaan. Rujuk apabila anda mengalami sebarang kesulitan. Banyak lagi yang perlu kita lakukan.
Pada ketika ini, saya tidak perlu menekankan bahawa kami akan menggunakan JSON untuk berkomunikasi dengan api kami menggunakan klien API.
Seperti yang dinyatakan sebelum ini, kami boleh menghantar data ke api kami menggunakan kandungan, pengepala atau URL permintaan kami. Kami telah melihat cara menghantar data melalui badan permintaan dan pengepala (Kami akan melihat untuk menghantar beberapa data tertentu pada masa lain). Semak permintaan POST yang dibuat. Perkara yang belum kami lihat ialah cara menghantar data sebagai sebahagian daripada URL.
Katakanlah kita ingin membaca perbelanjaan yang mempunyai id 4, kita boleh menghantar parameter tambah (sebagai sebahagian daripada URL) sebagai, /perbelanjaan/2. Untuk permintaan yang akan mengendalikan keperluan ini, kami lakukan, /expenditures/:id, di mana :id merujuk kepada id perbelanjaan. Dengan mengandaikan ia adalah sesuatu yang lain selain id, katakan nama, kemudian kita lakukan :name. Express akan memproses ini dan menyediakan kami cara untuk mengekstrak nilai ini tanpa peluh.
Sekarang, untuk rentetan pertanyaan, idea itu serupa dengan parameter permintaan namun, ia datang selepas soalan, diikuti dengan key1=value1&key2=value2...&keyN=valueN, di mana kuncinya ialah pengecam nilai yang anda nak lulus. Contoh yang sangat langsung ialah URL REST-Client, https://marketplace.visualstudio.com/items?itemName=humao.rest-client. Tanda soal menandakan permulaan rentetan pertanyaan dan apa sahaja yang mengikutinya memetakan kunci kepada nilai. Cth: ?itemName=humao.rest-client.
Ia akan menjadi masa yang baik untuk menguji semua titik akhir api anda dan pengalaman bermain dengannya.
Sekarang kita akan memproses permintaan yang menghantar data menggunakan badan permintaan - Titik akhir POST.
{ "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop", "amount": 2099.99, "date": "2024-31-12" }
Objek permintaan mempunyai sifat, badan, dan pada sifat ini, adalah nilai yang kami luluskan dalam badan permintaan permintaan kami - req.body.
Ini adalah permintaan yang akan dijalankan.
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
Ini ialah pelaksanaan titik akhir kami yang hanya akan log badan permintaan ke konsol.
console.log("expense-tracker-simple-api"); // import the express lib const express = require("express"); // create an express application const app = express(); // create a GET request on the base endpoint app.get("/", (req, res) => res.send("Hello world")); // create a server that listens to requests on port 3000 app.listen(3000, () => console.log(`Api running on ${"http://localhost:3000"}`) );
Apa yang berlaku? Kami mempunyai respons biasa tetapi... undefined telah dilog masuk dalam konsol. Nah, ini bermakna semuanya baik-baik saja, tetapi pelayan api kami tidak tahu bahawa ia harus menghuraikan yang masuk sebagai json. Ingat json?
Mari tambah satu baris ini di bawah aplikasi const = express(); yang sepatutnya menyelesaikan menghuraikan data masuk sebagai json.
const app = express();
Sekarang, mari kita uji titik akhir POST sekali lagi. Apa yang anda dapat kali ini? Adakah anda mendapat sesuatu yang serupa dengan ini?
app.get("/", (req, res) => res.send("Hello world"));
Kini anda tahu cara mendapatkan data daripada badan. Sekarang sebagai senaman, hancurkan badan dan hantar objek dalam tindak balas. Jadi, bukannya mengelognya, kembalikannya sebagai respons.
Kami akan membuat titik akhir GET baharu untuk membaca perbelanjaan mengikut id.
Ini akan menjadi permintaan API kami:
app.listen(3000, () => console.log(`Api running on ${"http://localhost:3000"}`) );
Objek permintaan mempunyai sifat, params dan pada sifat ini, adalah nilai yang kami luluskan dalam param permintaan permintaan kami - req.params.
Kini pelaksanaannya akan serupa dengan apa yang telah kami lakukan setakat ini tetapi sedikit berbeza.
app.get("/", (req, res, next) => ...);
Kami juga boleh mengakses id secara terus. Saya harap anda perasan bahawa kunci atau nama :id yang diluluskan sebagai sebahagian daripada laluan sepadan dengan kunci dalam objek yang dilog. Cuba namakan semula kekunci params dalam laluan dan lihat output dilog.
Untuk rentetan pertanyaan, terdapat sifat pada objek permintaan, pertanyaan, yang mendedahkan rentetan pertanyaan yang diluluskan.
Untuk menunjukkan ini akan menghantar rentetan pertanyaan untuk menapis rekod untuk dikembalikan. Titik akhir ini sepatutnya cukup.
expense-tracker-simple-api Api running on http://localhost:3000
Kini pelaksanaannya akan menjadi sesuatu yang serupa dengan:
{ "name": "expense-tracker-simple-api", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "", "dependencies": { "express": "^4.21.2" } }
Sekarang jalankan api anda dan semak log anda. Eksperimen dengan ini.
Pada ketika ini, kami belum menyambung ke pangkalan data jadi kami perlu memanipulasi data daripada ingatan. Apa yang kami ingin lakukan ialah mencipta tatasusunan, menambah tatasusunan, mengemas kini elemen di dalamnya dan mengalih keluar elemen. Nampaknya boleh dilaksanakan kerana itulah yang akan kami lakukan.
Kami akan melakukan beberapa pengubahsuaian pada beberapa kod yang ditulis sebelum ini, sila ubah anda juga. Petikan akhir akan dikongsi pada penghujungnya.
Mari kita buat tatasusunan perbelanjaan (data palsu) di bawah const express = require("express");
{ "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop", "amount": 2099.99, "date": "2024-31-12" }
Titik akhir semasa hanya mengembalikan mesej menggunakan res.send(message) tetapi perkara yang ingin kami pulangkan ialah json. Walaupun .send juga boleh mengambil objek atau json, kami akan menggunakan res.json(obj).
Saya tidak menyebut tetapi kod status lalai yang dikembalikan ialah 200. Adakah anda perasan? Kecuali yang lain berlaku atau terdapat masalah dengan permintaan, kod status tetap sama. Terdapat bahagian di bawah kod status, lihat sekilas.
Kami boleh mengubah kod status dengan menghantar kod status yang dikehendaki dalam res.status(desireStatusCode).json(obj). Saya akan mengekalkan 200 kod status sepanjang masa.
Pastikan pelayan masih berjalan
Kami boleh lulus senarai perbelanjaan terus.
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
Apakah jawapan yang diterima? Semak kod status serta muatan respons.
Daripada pengalaman dan juga untuk mengelakkan kekaburan, saya lebih suka mengembalikan kod status 200 secara lalai dan mempunyai sama ada sifat kejayaan, mesej atau sifat data untuk mengembalikan mesej atau sumber yang diminta. Secara lalai, apabila status palsu, mesej akan dihantar lain, mesej atau data mungkin dihantar.
console.log("expense-tracker-simple-api"); // import the express lib const express = require("express"); // create an express application const app = express(); // create a GET request on the base endpoint app.get("/", (req, res) => res.send("Hello world")); // create a server that listens to requests on port 3000 app.listen(3000, () => console.log(`Api running on ${"http://localhost:3000"}`) );
Kita perlu memaparkan id (indeks setiap baris)
const app = express();
app.get("/", (req, res) => res.send("Hello world"));
Mengapa penapis dilakukan selepas pemetaan?
app.listen(3000, () => console.log(`Api running on ${"http://localhost:3000"}`) );
Adakah pelaksanaan ini memberi petunjuk kepada anda tentang, Mengapa penapis dilakukan selepas pemetaan? ?
app.get("/", (req, res, next) => ...);
expense-tracker-simple-api Api running on http://localhost:3000
{ "name": "expense-tracker-simple-api", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "", "dependencies": { "express": "^4.21.2" } }
Kami telah merangkumi punca kebanyakan pembangunan API. Projek ini adalah asas kerana ia datang. Bersantai dan lihat sekali lagi. Ada lagi yang perlu diteliti seperti
crud api = buat, senaraikan, baca, kemas kini dan padam. Itulah cara anda menghadapi masalah ini.
Senarai Tugasan
Kalkulator
Penukar Mata Wang
Anda sedang menukar daripada satu mata wang kepada mata wang yang lain. Lakukan sebanyak mata wang yang anda boleh (3 sudah memadai)
Ketahui bahawa lebihan telah dikeluarkan.
{ "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop", "amount": 2099.99, "date": "2024-31-12" }
Permintaan API
# create a folder for the project at the path of your choice mkdir expense-tracker-simple-api # open the project with vscode # code expense-tracker-simple-api code -r expense-tracker-simple-api # open the built-in terminal and init node npm init -y # this should create the package.json file # create the entry file, index.js echo "console.log(\"expense-tracker-simple-api\");" > index.js # run the index.js file node index.js
Atas ialah kandungan terperinci API CRUD asas dengan ekspres. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!