Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial

ภาพรวม คู่มือนี้จะพาคุณไปสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, และลบ) โดยใช้ mithril js ตลอดการสอนนี้ คุณจะได้เรียนรู้วิธีการตั้งค่าโปรเจกต์ back4app ที่ชื่อว่า basic crud app mithriljs เพื่อทำหน้าที่เป็นแบ็คเอนด์ที่ทรงพลังสำหรับแอปเว็บของคุณ เราจะออกแบบสคีมาข้อมูลที่มีประสิทธิภาพ จัดการผ่านแผงผู้ดูแลระบบของ back4app และรวมหน้าเว็บ mithril js ของคุณโดยใช้การเรียก rest api สิ่งที่คุณจะได้เรียนรู้ วิธีการตั้งค่าระบบ crud ที่จัดการข้อมูลได้อย่างเชื่อถือได้โดยใช้แบ็คเอนด์ที่แข็งแกร่ง กลยุทธ์ในการสร้างการออกแบบฐานข้อมูลที่สามารถขยายได้และเชื่อมโยงกับแอปพลิเคชัน mithril js การใช้ส่วนติดต่อผู้ดูแลระบบที่ใช้งานง่ายของ back4app เพื่อดำเนินการ crud วิธีการปรับใช้ รวมถึงการทำให้เป็นคอนเทนเนอร์ docker เพื่อให้แอปพลิเคชันของคุณออนไลน์ได้อย่างรวดเร็ว ข้อกำหนด ก่อนที่คุณจะเริ่มต้น โปรดยืนยันว่าคุณมี บัญชี back4app และโครงการที่ใช้งานอยู่ หากต้องการความช่วยเหลือ โปรดดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app สภาพแวดล้อมการพัฒนา mithril js คุณสามารถรวม mithril ผ่าน npm หรือ cdn ตรวจสอบให้แน่ใจว่าคุณติดตั้ง node js (v14+) แล้ว ความรู้พื้นฐานเกี่ยวกับ javascript, mithril js, และ restful apis หากต้องการคำแนะนำเพิ่มเติม โปรดตรวจสอบที่ เอกสาร mithril js https //mithril js org/ ขั้นตอนที่ 1 – การเริ่มต้นโครงการของคุณ การตั้งค่าโครงการ back4app ใหม่ ลงชื่อเข้าใช้บัญชี back4app ของคุณ คลิกที่ แอปใหม่ ปุ่มจากแดชบอร์ดของคุณ ระบุชื่อโครงการ basic crud app mithriljs และทำตามขั้นตอนที่แนะนำ สร้างโครงการใหม่ เมื่อการตั้งค่าเสร็จสิ้น โครงการของคุณจะปรากฏในแดชบอร์ดของคุณ ซึ่งทำหน้าที่เป็นศูนย์กลางแบ็คเอนด์สำหรับแอปพลิเคชันของคุณ ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูลของคุณ การสร้างโมเดลข้อมูล สำหรับแอป crud นี้ คุณจะออกแบบคอลเลกชันหลักสองสามรายการ ด้านล่างนี้เป็นแนวทางในการสร้างคอลเลกชันพร้อมฟิลด์ที่เกี่ยวข้องเพื่อจัดการการดำเนินการ crud อย่างมีประสิทธิภาพ 1\ การรวบรวมรายการ การรวบรวมนี้เก็บรายละเอียดสำหรับแต่ละรายการ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือชื่อเรื่องของรายการ คำอธิบาย สตริง สรุปสั้น ๆ เกี่ยวกับรายการ สร้างเมื่อ วันที่ เวลาที่สร้างขึ้น อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2\ การรวบรวมผู้ใช้ การรวบรวมนี้จัดการโปรไฟล์ผู้ใช้และรายละเอียดการตรวจสอบสิทธิ์ สนาม ประเภท วัตถุประสงค์ id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง ชื่อที่ไม่ซ้ำกันของผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่เข้ารหัสเพื่อการตรวจสอบสิทธิ์ที่ปลอดภัย สร้างเมื่อ วันที่ เวลาที่ผู้ใช้ลงทะเบียน อัปเดตเมื่อ วันที่ เวลาสำหรับการแก้ไขใดๆ คุณสามารถเพิ่มคอลเลกชันและฟิลด์เหล่านี้ด้วยตนเองผ่านแดชบอร์ด back4app โดยการสร้างคลาสใหม่และกำหนดแต่ละคอลัมน์ตามที่เหมาะสม สร้างชั้นเรียนใหม่ ในการเพิ่มฟิลด์ เพียงเลือกประเภทข้อมูลที่เหมาะสม กำหนดชื่อ ตั้งค่าค่าปริยาย และทำเครื่องหมายหากจำเป็น สร้างคอลัมน์ การใช้ประโยชน์จาก ai agent ของ back4app สำหรับการสร้าง schema อัตโนมัติ ai agent ที่รวมอยู่ใน back4app ช่วยให้การสร้าง schema ง่ายขึ้นโดยการสร้างคอลเลกชันของคุณโดยอัตโนมัติตามคำแนะนำที่ให้ไว้ วิธีการใช้ ai agent เข้าถึง ai agent จากแดชบอร์ดโปรเจกต์ของคุณ อธิบาย schema ที่คุณต้องการโดยการระบุคอลเลกชันและฟิลด์ ตรวจสอบ schema ที่สร้างขึ้นและนำการเปลี่ยนแปลงไปใช้ ตัวอย่างคำแนะนำ create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) เครื่องมือนี้ช่วยให้แน่ใจว่าการออกแบบฐานข้อมูลของคุณมีความสอดคล้องและเหมาะสมสำหรับการจัดการ crud ขั้นตอนที่ 3 – เปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบ & ฟังก์ชัน crud ภาพรวมของอินเทอร์เฟซผู้ดูแลระบบ อินเทอร์เฟซผู้ดูแลระบบ back4app เป็นโซลูชันที่ไม่ต้องเขียนโค้ดที่ออกแบบมาเพื่อช่วยให้คุณจัดการข้อมูลแบ็กเอนด์ของคุณได้อย่างง่ายดาย การออกแบบแบบลากและวางทำให้การดำเนินการ crud เป็นเรื่องง่าย วิธีเปิดใช้งานอินเทอร์เฟซผู้ดูแลระบบ ไปที่ เพิ่มเติม ในแดชบอร์ด back4app ของคุณ คลิกที่ แอปผู้ดูแลระบบ จากนั้นเลือก เปิดใช้งานแอปผู้ดูแลระบบ ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณเพื่อสร้างผู้ใช้ผู้ดูแลระบบคนแรกของคุณ กระบวนการนี้ยังตั้งค่าบทบาท (เช่น b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบใน admin interface เพื่อจัดการคอลเลกชันของคุณ แดชบอร์ดแอปผู้ดูแลระบบ การดำเนินการ crud ผ่าน admin interface เพิ่มระเบียนใหม่ ใช้ตัวเลือก “เพิ่มระเบียน” ในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อสร้างรายการ ดู/แก้ไขระเบียน คลิกที่ระเบียนเพื่อดูรายละเอียดหรือแก้ไขฟิลด์ ลบระเบียน ใช้ฟังก์ชันลบเพื่อลบรายการที่ล้าสมัย อินเทอร์เฟซที่ใช้งานง่ายนี้ช่วยเพิ่มประสบการณ์ของผู้ใช้โดยการทำให้การดำเนินการ crud ประจำวันง่ายขึ้น ขั้นตอนที่ 4 – การเชื่อมโยง mithril js กับ back4app เมื่อแบ็กเอนด์ของคุณพร้อมและจัดการผ่าน admin interface ถึงเวลาเชื่อมต่อส่วนหน้า mithril js ของคุณกับ back4app โดยใช้การเรียก rest api การใช้การเรียก rest api กับ mithril js เราจะพึ่งพาการเรียก rest api เพื่อโต้ตอบกับแบ็กเอนด์ back4app ของคุณ ตัวอย่าง การดึงและแสดงรายการ สร้างคอมโพเนนต์ mithril ที่ดึงรายการจากคอลเลกชันรายการ // src/components/itemslist js const itemslist = { items \[], loaditems async function() { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); itemslist items = data results; } catch (error) { console error('error retrieving items ', error); } }, oninit function() { itemslist loaditems(); }, view function() { return m('div', \[ m('h2', 'items'), m('ul', itemslist items map(item => m('li', { key item objectid }, `${item title} — ${item description}` ) ) ) ]); } }; export default itemslist; คอมโพเนนต์นี้ใช้วิธีการวงจรชีวิตของ mithril oninit เพื่อโหลดข้อมูลเมื่อคอมโพเนนต์ถูกสร้าง ตัวอย่าง การเพิ่มรายการใหม่ คุณสามารถรวมฟอร์มเพื่อส่งคำขอ post เพื่อเพิ่มรายการใหม่ // src/components/additem js const additem = { title '', description '', submititem async function() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title additem title, description additem description }) }); const data = await response json(); console log('item added ', data); // optionally, refresh the list or redirect the user } catch (error) { console error('error adding item ', error); } }, view function() { return m('div', \[ m('h2', 'add item'), m('input\[type=text]', { placeholder 'title', oninput m withattr('value', value => additem title = value), value additem title }), m('input\[type=text]', { placeholder 'description', oninput m withattr('value', value => additem description = value), value additem description }), m('button', { onclick additem submititem }, 'add item') ]); } }; export default additem; คุณสามารถดำเนินการอัปเดตและลบได้ในลักษณะเดียวกันโดยใช้วิธี http ที่เกี่ยวข้อง (put/patch สำหรับการอัปเดตและ delete สำหรับการลบ) ขั้นตอนที่ 5 – การเสริมความปลอดภัยของแบ็คเอนด์ การดำเนินการควบคุมการเข้าถึง รักษาความปลอดภัยข้อมูลของคุณโดยการใช้ access control lists (acls) กับแต่ละวัตถุ ตัวอย่างเช่น การสร้างรายการที่เจ้าของเท่านั้นที่สามารถแก้ไขได้ async function createsecureitem(itemdata, ownerid) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }) }); const data = await response json(); console log('secure item created ', data); } catch (error) { console error('error creating secure item ', error); } } การตั้งค่าการอนุญาตระดับคลาส (clps) ภายในแดชบอร์ด back4app ของคุณ ปรับ clps สำหรับแต่ละคอลเลกชันเพื่อกำหนดนโยบายความปลอดภัยเริ่มต้น ซึ่งจะช่วยให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การตั้งค่าการตรวจสอบสิทธิ์ผู้ใช้ การกำหนดค่าบัญชีผู้ใช้ back4app ใช้คลาสผู้ใช้ parse เพื่อจัดการการตรวจสอบสิทธิ์ ด้วย mithril js คุณสามารถจัดการการลงทะเบียนและการเข้าสู่ระบบผ่านการเรียก rest api ด้านล่างนี้คือตัวอย่างสำหรับการลงทะเบียนผู้ใช้ // src/components/auth js const auth = { username '', email '', password '', signup async function() { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username auth username, email auth email, password auth password }) }); const data = await response json(); alert('user registered successfully!'); } catch (error) { alert('registration error ' + error message); } }, view function() { return m('form', { onsubmit function(e) { e preventdefault(); auth signup(); } }, \[ m('input\[type=text]', { placeholder 'username', oninput m withattr('value', value => auth username = value), value auth username }), m('input\[type=email]', { placeholder 'email', oninput m withattr('value', value => auth email = value), value auth email }), m('input\[type=password]', { placeholder 'password', oninput m withattr('value', value => auth password = value), value auth password }), m('button', { type 'submit' }, 'sign up') ]); } }; export default auth; คุณสามารถใช้วิธีการที่คล้ายกันในการเข้าสู่ระบบและจัดการเซสชัน ขั้นตอนที่ 7 – การปรับใช้ frontend mithril js ของคุณ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์แอปพลิเคชัน mithril js ของคุณได้อย่างราบรื่นโดยการเชื่อมโยงกับที่เก็บ github ของคุณ 7 1 การสร้างเวอร์ชันการผลิต เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล รันคำสั่งสร้าง npm run build สิ่งนี้จะสร้าง build โฟลเดอร์ที่มีไฟล์สถิตที่ปรับให้เหมาะสมแล้ว 7 2 การจัดระเบียบและการบันทึกโค้ดของคุณ ที่เก็บของคุณควรมีโครงสร้างที่คล้ายกับ basic crud app mithriljs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── index js │ ├── components/ │ │ ├── itemslist js │ │ ├── additem js │ │ └── auth js │ └── app js ├── package json └── readme md ตัวอย่าง src/index js import m from "mithril"; import itemslist from " /components/itemslist"; import additem from " /components/additem"; import auth from " /components/auth"; // define a simple routing system m route(document body, "/", { "/" { view function() { return m("div", \[ m(itemslist), m(additem), m(auth) ]); } } }); การคอมมิตและผลักดันไปยัง github เริ่มต้น git (ถ้ายังไม่ได้เริ่ม) git init เพิ่มไฟล์ของคุณ git add คอมมิตการเปลี่ยนแปลง git commit m "initial commit of mithril js frontend" สร้างที่เก็บข้อมูลบน github (เช่น, basic crud app mithriljs frontend ) และผลักดันโค้ดของคุณ git remote add origin https //github com/your username/basic crud app mithriljs frontend git git push u origin main 7 3 การเชื่อมโยง github กับการปรับใช้เว็บ เข้าสู่ระบบแดชบอร์ด back4app ของคุณ ไปที่โปรเจกต์ของคุณ ( basic crud app mithriljs ) และเลือก web deployment เชื่อมต่อบัญชี github ของคุณตามคำแนะนำที่ปรากฏบนหน้าจอ เลือกที่เก็บและสาขาของคุณ (เช่น main ) ที่มีโค้ดต้นฉบับ mithril js 7 4 การตั้งค่าคอนฟิกการปรับใช้ กำหนดค่า คำสั่งสร้าง ระบุ npm run build หากโฟลเดอร์ build ไม่มีอยู่ ไดเรกทอรีผลลัพธ์ ตั้งค่านี้เป็น build เพื่อชี้ไปยังทรัพย์สินแบบสแตติกของคุณ ตัวแปรสภาพแวดล้อม เพิ่มคีย์ api หรือการตั้งค่าที่จำเป็น 7 5 การทำให้แอปพลิเคชันของคุณเป็น docker (ตัวเลือก) หากคุณชอบการใช้คอนเทนเนอร์ ให้รวม dockerfile \# use an official node image for building from node 16 alpine as builder workdir /app copy package json / run npm install copy run npm run build \# serve using nginx from nginx\ stable alpine copy from=builder /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 การปรับใช้แอปพลิเคชันของคุณ กดปุ่ม deploy ในส่วนการปรับใช้เว็บ back4app ของคุณ ติดตามกระบวนการสร้างเมื่อ back4app ดึง สร้าง และปรับใช้แอปพลิเคชันของคุณ เมื่อเสร็จสิ้น คุณจะได้รับ url สำหรับแอป mithril js ของคุณที่ใช้งานได้ 7 7 การตรวจสอบการปรับใช้ เปิด url ที่ให้ไว้ในเบราว์เซอร์ของคุณ ยืนยันว่าแอปพลิเคชันของคุณโหลดได้ การนำทางทำงาน และทรัพยากรถูกให้บริการอย่างถูกต้อง ใช้เครื่องมือพัฒนาเบราว์เซอร์สำหรับการแก้ไขปัญหาหากจำเป็น ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ทำได้ดีมาก! คุณได้สร้างแอป crud เบื้องต้นด้วย mithril js ที่เชื่อมต่อกับ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app mithriljs , กำหนดโครงสร้างฐานข้อมูลสำหรับ items และ users และจัดการแบ็กเอนด์ของคุณผ่านทาง admin interface นอกจากนี้ คุณได้เชื่อมต่อส่วนหน้า mithril js ของคุณโดยใช้ rest api calls และใช้มาตรการด้านความปลอดภัยเพื่อปกป้องข้อมูลของคุณ ต่อไปจะทำอย่างไร? ปรับปรุงส่วนหน้า เพิ่มฟีเจอร์เช่น มุมมองรายละเอียด, ความสามารถในการค้นหา, หรือการอัปเดตแบบเรียลไทม์ ขยายฟังก์ชันแบ็กเอนด์ สำรวจฟังก์ชันคลาวด์, การรวม api เพิ่มเติม, หรือสิทธิ์ตามบทบาท เรียนรู้เพิ่มเติม ดำดิ่งลึกลงไปใน เอกสาร back4app https //www back4app com/docs และคู่มือ mithril js สำหรับการปรับปรุงขั้นสูง ขอให้สนุกกับการเขียนโค้ดและโชคดีในโครงการของคุณ!