MVC ใน JSP (Archiเทคเจอร์)

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

⚡ สรุปอย่างชาญฉลาด

MVC ใน JSP แยกส่วนการทำงานของแอปพลิเคชันออกเป็นเลเยอร์ Model, View และ Controller โดย JSP ทำหน้าที่แสดงผล View, Servlet ทำหน้าที่เป็น Controller และ JavaBeans ห่อหุ้มโมเดลไว้เพื่อสร้างเว็บแอปพลิเคชันที่สะอาด ทดสอบได้ และบำรุงรักษาได้ง่าย

  • 🧱 การแยกข้อกังวล: โมเดลทำหน้าที่เก็บข้อมูลและตรรกะทางธุรกิจ วิวทำหน้าที่แสดงผลส่วนติดต่อผู้ใช้ และคอนโทรลเลอร์ทำหน้าที่ส่งต่อคำขอระหว่างกัน
  • 📐 บทบาทของ JSP: หน้าเว็บ JSP แสดงผลมาร์กอัปแบบไดนามิกสำหรับเลเยอร์ View ในขณะที่ Servlet จัดการการประมวลผลคำขอในเลเยอร์ Controller
  • 🔀 ขั้นตอนการร้องขอ: เบราว์เซอร์ส่งแบบฟอร์ม เซอร์ฟเล็ตตรวจสอบความถูกต้องของข้อมูลที่ป้อน และเติมข้อมูลลงในตาราง Javaจากนั้น Bean จะส่งการควบคุมไปยังมุมมอง JSP เพื่อแสดงการตอบสนอง
  • ✅ ความง่ายในการบำรุงรักษาคือหัวใจสำคัญ: สถาปัตยกรรม MVC ใน JSP ทำให้เว็บแอปพลิเคชันดูแลรักษา ขยาย ทดสอบหน่วย และนำทางจากส่วนกลางได้ง่ายขึ้น
  • 🧪 ตัวอย่างการใช้งาน: ฟอร์มล็อกอินจะส่งข้อมูลไปยัง Mvc_servlet ซึ่งจะเก็บอีเมลและรหัสผ่านไว้ใน TestBean จากนั้นจึงส่งต่อไปยัง mvc_success.jsp
  • 🤖 การปรับปรุงระบบ AI ให้ทันสมัย: ปัจจุบันผู้ช่วย AI ช่วยปรับโครงสร้างโค้ด JSP MVC เดิมให้เป็น Spring MVC โดยสร้างคอนโทรลเลอร์ DTO และการทดสอบตามความต้องการ
อ่านเพิ่มเติม

MVC ใน JSP (Archiเทคเจอร์)

MVC คืออะไร?

MVC ย่อมาจาก Model-View-Controller เป็นรูปแบบการออกแบบซอฟต์แวร์ที่แบ่งแอปพลิเคชันออกเป็นสามชั้นที่เชื่อมต่อกัน ได้แก่ ตรรกะทางธุรกิจ การนำเสนอ และข้อมูล ใน MVC:

  • M ย่อมาจาก Model
  • V ย่อมาจาก View
  • C ย่อมาจาก Controller

MVC คือวิธีการสร้างแอปพลิเคชันอย่างเป็นระบบ โดยกระบวนการทำงานจะเริ่มต้นที่เลเยอร์ View ผู้ใช้จะส่งคำขอเข้ามา คำขอจะถูกประมวลผลในเลเยอร์ Controller และส่งไปยังเลเยอร์ Model เพื่อแทรกหรือดึงข้อมูล จากนั้น Model จะส่งการตอบกลับว่าสำเร็จหรือล้มเหลว ซึ่ง View จะแสดงผลให้ผู้ใช้เห็น แผนภาพสถาปัตยกรรม MVC แสดงอยู่ด้านล่าง:

VMC Archiเทคเจอร์
VMC Archiแผนภาพเทคเจอร์

เหตุใดจึงควรใช้ MVC Archiโครงสร้างใน JSP?

ก่อนกระโดดping การเข้าใจวิธีการทำงานของ MVC ใน JSP จะช่วยให้เข้าใจว่าทำไมนักพัฒนาจึงเลือกใช้รูปแบบนี้ การผสมผสานตรรกะทางธุรกิจ การเรียกใช้ฐานข้อมูล และ HTML ไว้ในหน้า JSP เดียวกัน จะทำให้เกิดโค้ดที่ยุ่งเหยิงและดูแลรักษายาก MVC แก้ปัญหานี้โดยการแยกแต่ละส่วนออกเป็นเลเยอร์ของตัวเอง:

  • Code อ่านง่ายขึ้นเพราะแต่ละไฟล์มีหน้าที่รับผิดชอบเพียงอย่างเดียว
  • ทีมสามารถทำงานในส่วนของ View, Controller และ Model ไปพร้อมๆ กันได้โดยไม่เกิดข้อขัดแย้ง
  • การทดสอบหน่วยจะมุ่งเป้าไปที่โมเดลโดยตรง โดยไม่แตะต้องส่วนการแสดงผล JSP
  • แลกเปลี่ยนping การสร้าง JSP View สำหรับการตอบสนองแบบ JSON หรือเอนจิ้นเทมเพลตอื่นนั้นทำได้ง่าย

วิธีการทำงานของ MVC ใน JSP

ในแอปพลิเคชัน MVC ที่ใช้ JSP แต่ละเลเยอร์จะแมปกับส่วนเฉพาะ Java เทคโนโลยี ไฟล์ JSP ทำหน้าที่แสดงผล (View) ส่วน Servlet ทำหน้าที่เป็นตัวควบคุม (Controller) และ JavaBean คือโครงสร้างที่ห่อหุ้มโมเดลไว้ ส่วนด้านล่างนี้จะอธิบายถึงหน้าที่ความรับผิดชอบของแต่ละเลเยอร์

เลเยอร์โมเดล

  • นี่คือชั้นข้อมูล ซึ่งประกอบด้วยตรรกะทางธุรกิจของระบบ
  • ประกอบด้วยข้อมูลทั้งหมดของแอปพลิเคชัน
  • นอกจากนี้ยังแสดงถึงสถานะของแอปพลิเคชันด้วย
  • มันถูกสร้างขึ้นจาก JavaBean หรือ POJO ที่เชื่อมต่อกับ ฐานข้อมูล.
  • ตัวควบคุม (Controller) สื่อสารกับโมเดล (Model) เพื่อดึงข้อมูลและส่งต่อไปยังเลเยอร์แสดงผล (View layer)
  • โมเดลเชื่อมต่อกับฐานข้อมูลและบันทึกข้อมูลลงในฐานข้อมูล

ดูเลเยอร์

  • นี่คือส่วนแสดงผลของแอปพลิเคชัน
  • ประกอบด้วย HTML, JSP, CSS และ Javaต้นฉบับ
  • โดยปกติแล้วจะแสดงส่วนติดต่อผู้ใช้ของแอปพลิเคชัน
  • ส่วนนี้จะแสดงข้อมูลที่ดึงมาจาก Controller ซึ่ง Controller นั้นจะดึงข้อมูลจากคลาสในเลเยอร์ Model อีกทีหนึ่ง
  • เลเยอร์ View ทำหน้าที่แสดงข้อมูลบนส่วนติดต่อผู้ใช้ (UI) ของแอปพลิเคชัน โดยไม่มีตรรกะทางธุรกิจอยู่ภายใน

เลเยอร์คอนโทรลเลอร์

  • มันทำหน้าที่เป็นส่วนต่อประสานระหว่าง View และ Model
  • มันจะดักจับคำขอทั้งหมดที่มาจากเลเยอร์ View
  • มันรับคำขอจากเลเยอร์ View ประมวลผล และทำการตรวจสอบความถูกต้องของคำขอ
  • คำขอจะถูกส่งต่อไปยังเลเยอร์ Model เพื่อประมวลผลข้อมูล เมื่อประมวลผลคำขอเสร็จแล้ว Model จะส่งผลลัพธ์กลับไปยัง Controller พร้อมข้อมูลที่ต้องการ ซึ่ง View จะแสดงผลต่อไป

ข้อดีของ MVC Archiเทคเจอร์

ข้อดีของ MVC คือ:

  • ง่ายต่อการรักษา
  • ง่ายต่อการขยาย
  • ทดสอบง่าย
  • การควบคุมการนำทางเป็นแบบรวมศูนย์
  • การเชื่อมต่อที่ไม่แน่นหนาระหว่างเลเยอร์ทำให้การปรับโครงสร้างโค้ดปลอดภัยยิ่งขึ้น
  • การพัฒนาแบบคู่ขนานโดยสมาชิกทีมหลายคนเป็นไปได้

ตัวอย่างการออกแบบแอปพลิเคชัน JSP ด้วย MVC Archiเทคเจอร์

ในตัวอย่างนี้ เราจะแสดงวิธีการใช้สถาปัตยกรรม MVC ในแอปพลิเคชัน JSP

  • เราจะยกตัวอย่างแบบฟอร์มที่มีตัวแปรสองตัว คือ "อีเมล" และ "รหัสผ่าน" ซึ่งเป็นตัวแทนของเลเยอร์การแสดงผลของเรา
  • เมื่อผู้ใช้ป้อนอีเมลและรหัสผ่านแล้วคลิกส่ง การดำเนินการจะถูกส่งต่อไปยัง Mvc_servlet ซึ่งจะส่งอีเมลและรหัสผ่านไปให้
  • MVC Servlet คือเลเยอร์ Controller ใน MVC Servlet นี้ คำขอจะถูกส่งไปยังอ็อบเจ็กต์ Bean ซึ่งทำหน้าที่เป็นเลเยอร์ Model
  • ค่าอีเมลและรหัสผ่านจะถูกกำหนดลงใน bean และจัดเก็บไว้เพื่อใช้งานในภายหลัง
  • ค่าจาก bean จะถูกดึงมาและแสดงในเลเยอร์ View

Mvc_example.jsp (มุมมอง)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MVC Guru Example</title>
</head>
<body>
<form action="Mvc_servlet" method="POST">
Email: <input type="text" name="email">
<br />
Password: <input type="text" name="password" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

คำอธิบายของรหัส:

ดูเลเยอร์:

Code บรรทัดที่ 10-15: ในที่นี้ เรากำลังใช้ฟอร์มที่มีสองช่องเป็นพารามิเตอร์ คือ "อีเมล" และ "รหัสผ่าน" และคำขอเหล่านี้จะต้องถูกส่งต่อไปยังคอนโทรลเลอร์ Mvc_servlet.java ซึ่งถูกส่งผ่านในแอตทริบิวต์ action โดยใช้เมธอด HTTP แบบ POST

Mvc_servlet.java (คอนโทรลเลอร์)

package demotest;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Mvc_servlet
 */
public class Mvc_servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public Mvc_servlet() {
        super();
        // TODO Auto-generated constructor stub
    }


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String email=request.getParameter("email");
        String password=request.getParameter("password");

        TestBean testobj = new TestBean();
        testobj.setEmail(email);
        testobj.setPassword(password);
        request.setAttribute("gurubean",testobj);
        RequestDispatcher rd=request.getRequestDispatcher("mvc_success.jsp");
        rd.forward(request, response);
	}

}

คำอธิบายของรหัส:

ชั้นควบคุม:

Code 14 แนว: Mvc_servlet สืบทอดมาจาก HttpServlet

Code 26 แนว: เนื่องจากวิธีการที่ใช้คือ POST คำขอจึงเข้าสู่เมธอด doPost ของ Servlet ซึ่งจะประมวลผลคำขอและบันทึกไว้ในอ็อบเจ็กต์ bean ในชื่อ testobj

Code 34 แนว: โดยใช้ object request เราจะกำหนดค่าแอตทริบิวต์ “gurubean” ซึ่งกำหนดค่าเป็น testobj

Code 35 แนว: ในที่นี้ เราใช้ object RequestDispatcher เพื่อส่งต่อข้อความแสดงความสำเร็จไปยังไฟล์ mvc_success.jsp

บทความที่เกี่ยวข้อง

TestBean.java (โมเดล)

package demotest;

import java.io.Serializable;

public class TestBean implements Serializable{

	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	private String email="null";
	private String password="null";


}

คำอธิบายของรหัส:

เลเยอร์โมเดล:

Code บรรทัดที่ 7-17: ไฟล์นี้ประกอบด้วยเมธอด getter และ setter สำหรับอีเมลและรหัสผ่าน ซึ่งเป็นสมาชิกของคลาส TestBean

Code บรรทัดที่ 19-20: ฟังก์ชันนี้กำหนดอีเมลและรหัสผ่านของสมาชิกเป็นประเภท String ในคลาส Bean

Mvc_success.jsp (มุมมองผลลัพธ์)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@page import="demotest.TestBean"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Success</title>
</head>
<body>
<%
TestBean testguru=(TestBean)request.getAttribute("gurubean");
out.print("Welcome, "+testguru.getEmail());
%>
</body>
</html>

คำอธิบายของรหัส:

Code 12 แนว: เรากำลังดึงค่าแอตทริบิวต์โดยใช้ object request ที่ถูกกำหนดไว้ในเมธอด doPost ของ Servlet

Code 13 แนว: เรากำลังพิมพ์ข้อความต้อนรับและอีเมลที่บันทึกไว้ในอ็อบเจ็กต์ bean

เอาท์พุต

เมื่อคุณรันโค้ดข้างต้น คุณจะได้ผลลัพธ์ต่อไปนี้:

เมื่อคุณเปิดไฟล์ mvc_example.jsp คุณจะเห็นแบบฟอร์มที่มีช่องสำหรับอีเมลและรหัสผ่าน พร้อมปุ่มส่งข้อมูล

เมื่อคุณกรอกอีเมลและรหัสผ่านลงในแบบฟอร์มแล้วคลิกส่ง:

การออกแบบแอปพลิเคชัน JSP

หลังจากคลิกปุ่มส่ง (Submit) ผลลัพธ์จะแสดงดังต่อไปนี้:

การออกแบบแอปพลิเคชัน JSP

เมื่อคุณป้อนอีเมลและรหัสผ่านในหน้าจอแล้วคลิกส่ง ข้อมูลจะถูกบันทึกไว้ใน TestBean จากนั้นระบบจะดึงข้อมูลเหล่านั้นจาก TestBean มาแสดงในหน้าจอถัดไปเพื่อแจ้งข้อความแสดงความสำเร็จ JSP ทำหน้าที่นำเสนอข้อมูลและแสดงมุมมอง (View) ในขณะที่ Servlet ทำหน้าที่เป็นตัวควบคุม (Controller) และ... JavaBean ทำหน้าที่เป็นโมเดล โดยตรรกะทางธุรกิจหลักจะบรรจุอยู่ในเลเยอร์โมเดลนี้

คำถามที่พบบ่อย

MVC ใน JSP เป็นรูปแบบการออกแบบที่แบ่งเว็บแอปพลิเคชันออกเป็นสามชั้น ได้แก่ Model (ข้อมูลและตรรกะทางธุรกิจ), View (หน้า JSP ที่แสดงผล UI) และ Controller (Servlet ที่ประมวลผลคำขอและส่งต่อการตอบกลับ)

JSP จัดอยู่ในเลเยอร์ View เป็นหลัก เนื่องจากทำหน้าที่แสดงผล HTML แบบไดนามิกให้กับผู้ใช้ ในรูปแบบ JSP Model 2 นั้น Servlet จะทำหน้าที่เป็น Controller และ Javaถั่วทำหน้าที่เป็นแบบจำลอง keeping JSP ที่ปราศจากตรรกะทางธุรกิจ

โมเดล 1 วางตรรกะทางธุรกิจ การเข้าถึงข้อมูล และการนำเสนอไว้ภายในหน้า JSP โดยตรง โมเดล 2 ใช้สถาปัตยกรรม MVC โดยมี Servlet ทำหน้าที่เป็น Controller JavaBean ประกอบกันเป็น Model และไฟล์ JSP ทำหน้าที่แสดงผล View โดยแนะนำให้ใช้ Model 2

MVC ช่วยปรับปรุงความสามารถในการบำรุงรักษา การทดสอบ และประสิทธิภาพการทำงานของทีม แต่ละเลเยอร์พัฒนาอย่างอิสระ ตรรกะทางธุรกิจไม่รวมอยู่ในไฟล์ JSP การนำทางรวมศูนย์อยู่ที่ Servlet และการทดสอบหน่วยครอบคลุม Model โดยไม่ต้องสร้างเว็บคอนเทนเนอร์ขึ้นมา

เบราว์เซอร์ส่งแบบฟอร์มไปยังเซิร์ฟเล็ต เซิร์ฟเล็ตจะตรวจสอบความถูกต้องของข้อมูลที่ป้อน สร้างหรืออัปเดตข้อมูล Javaโดยจะเก็บค่า Bean ไว้เป็นแอตทริบิวต์ในคำขอ จากนั้นจะส่งการควบคุมไปยังหน้า JSP ซึ่งจะอ่านค่า Bean และแสดงผลการตอบกลับ

ผู้ช่วยเขียนโค้ด AI วิเคราะห์ไฟล์ Servlet และ JSP รุ่นเก่า เช่นtracฝังตรรกะทางธุรกิจลงในบริการที่สะอาด สร้างคอนโทรลเลอร์และ DTO ของ Spring MVC และสร้าง JUnit การทดสอบนี้จะช่วยเร่งการย้ายจาก JSP Model 2 ไปยังเฟรมเวิร์กที่ทันสมัยโดยลดการเขียนโค้ดใหม่ด้วยตนเอง

เครื่องมือ AI ช่วยสร้างโครงสร้างพื้นฐานของคอนโทรลเลอร์ Spring MVC และสร้างแผนที่คำขอpingพวกเขายังแนะนำคำอธิบายประกอบการตรวจสอบความถูกต้อง เขียนเทมเพลต Thymeleaf และสร้างการทดสอบการบูรณาการ นอกจากนี้ยังตรวจจับปัญหาด้านความปลอดภัย เช่น การขาดการป้องกัน CSRF หรือการจัดการอินพุตที่ไม่ปลอดภัยในวิธีการควบคุม

สรุปโพสต์นี้ด้วย: