หน้าใหญ่
- ใช้
Todo-App เป็นตัวอย่างเพื่อสัมผัสกับกรอบและห้องสมุดต่าง ๆ ทั้งด้านหน้าและด้านหลัง - ที่อยู่เซิร์ฟเวอร์คือ
http://localhost:8080 - ส่วนต่อประสานของปลายด้านหน้าและด้านหลังคือ:
- รับ TODOS ทั้งหมด:
{path: '/api/todo', method: 'GET', status: 200, return: [{action: 'todo1', done: false}] - เพิ่มสิ่งใหม่:
{path: '/api/todo', method: 'POST', status: 201, return: ''} - เสร็จสมบูรณ์หรือปิดสิ่งที่ระบุ:
{path: '/api/todo/toggle/{index}', method: 'POST', status: 200, return: ''} - ลบ TODO ที่ระบุ:
{path: '/api/todo/{index}', method: 'DELETE', status: 200, return: ''}
แบ็กเอนด์ที่เสร็จสมบูรณ์
-
{tech: 'spring-boot', tag: 'springboot-backend'}
หน้าเว็บที่เสร็จสมบูรณ์
-
{tech: 'vuejs', tag: 'use-vue-frontend' } -
{tech: 'vuejs-vuex', tag: 'use-vuex'} -
{tech: 'react', tag: 'use-react'} -
{tech: ['react', 'redux'], tag: 'use-react-redux'} -
{tech: ['react', 'hooks'], tag: 'use-react-hooks'} -
{tech: 'jquery', tag: 'use-jquery-ajax-to-read/write-from/to-server'} -
{tech: ['react', 'typescript'], tag: 'use-react-typescript'} -
{tech: ['react', 'typescript', 'redux'], tag: 'use-react-typescript-redux'}
ส่วนหน้าบรรทัดคำสั่งที่เสร็จสมบูรณ์
-
{tech: ['react', 'ink'], tag: 'use-ink-cli'}
ส่วนหน้าที่สามารถทำงานได้อย่างอิสระ
-
{tech: 'jquery', tag: 'use-jquery-in-static-web' } -
{tech: 'javascript', tag: 'use-pure-javascript' }
วัตถุประสงค์
- เข้าใจความหมายของส่วนหน้าและส่วนหลัง
- เข้าใจความแตกต่างและการเชื่อมต่อของหลาย ๆ ด้านหน้า
- เข้าใจถึงความสำคัญของส่วนหน้าขนาดใหญ่
- สัมผัสกับกรอบเทคนิคหลักของส่วนหน้า
front-end, back-end
- front-end: ออกแบบและใช้อินเทอร์เฟซเกี่ยวกับการมีปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ในระบบ
- บรรทัดคำสั่ง: โปรแกรมคอนโซล มันมักจะถูกนำไปใช้โดยใช้ภาษาเช่น C, C#และ Java อินพุตและเอาต์พุตด้วยคำสั่งและพารามิเตอร์รวมถึง scanf และ printf
- เดสก์ท็อป: ใช้การควบคุมกราฟิกต่างๆเช่น windows, เมนู, รูปแบบ ฯลฯ เพื่อให้การป้อนข้อมูลและเอาต์พุตเสร็จสมบูรณ์โดยใช้อุปกรณ์ต่าง ๆ เช่นคีย์บอร์ดและหนู เทคโนโลยีที่ใช้กันทั่วไป ได้แก่ MFC, Java Swing, QT, WPF ฯลฯ
- เว็บ (H5): คล้ายกับเดสก์ท็อป แต่ทำงานในเบราว์เซอร์ เทคโนโลยีที่นำมาใช้ส่วนใหญ่ ได้แก่ HTML5, CSS3 และ JavaScript
- มือถือ: การใช้โทรศัพท์มือถือเป็นผู้ให้บริการอุปกรณ์มือถือทั่วไปรวมถึง Android และ iOS
- โปรแกรม MINI: ไม่จำเป็นต้องติดตั้งหรือปรับใช้มันทำงานในแอปพลิเคชันเช่น WeChat และเป็นที่นิยมในประเทศ เช่น WeChat Mini-programs, QQ Mini-programs, Baidu Mini-programs, Alipay Mini-programs, แอปพลิเคชันด่วน ...
- แบ็กเอนด์: หรือที่รู้จักกันในชื่อฝั่งเซิร์ฟเวอร์ โดยทั่วไปใช้เพื่อให้ข้อมูลและบริการ
- ขั้นตอนการประมวลผลทั่วไป
- ข้อมูลถูกเก็บไว้ในฐานข้อมูล
- เซิร์ฟเวอร์ได้รับคำขอจากส่วนหน้าซึ่งโดยทั่วไปจะเป็นคำขอ HTTP
- ตามคำขอตรรกะทางธุรกิจที่เกี่ยวข้องเรียกว่าและผลการคำนวณจะถูกส่งคืน
- ตามผลการคำนวณการตอบสนองจะถูกส่งคืนซึ่งโดยทั่วไปจะเป็นการตอบสนอง HTTP การตอบสนองสามารถมีการเป็นตัวแทนได้หลายครั้งเช่น JSON, HTML ฯลฯ
- เทคโนโลยีและเฟรมเวิร์กที่ใช้กันทั่วไป
- java ee, asp.net, php
- ฤดูใบไม้ผลิไฮเบอร์เนต
- -
- ลักษณะการพัฒนาของแอปพลิเคชันแบบดั้งเดิม
- สแต็คเทคโนโลยีที่ใช้ในส่วนหน้าและส่วนหลังไม่ได้เป็นหนึ่งเดียว
- สแต็คเทคโนโลยีที่ใช้โดยหลาย ๆ ด้านหน้าไม่ได้เป็นหนึ่งเดียว
- วิธีการพัฒนาส่วนหน้าและส่วนหลังและความคิดไม่สอดคล้องกัน
- เป็นเรื่องยากที่จะมีวิศวกรที่มีความเชี่ยวชาญด้านหน้าและด้านหลังในเวลาเดียวกัน
ส่วนหน้าขนาดใหญ่สแต็คเต็มรูปแบบ
