การสร้างโครงการเว็บอย่างง่ายใน IntelliJ Idea Enterprise ทีละขั้นตอนพร้อมรูปภาพ

ระดับความรู้ที่จำเป็นในการทำความเข้าใจบทความ:คุณมีความเข้าใจ Java Core ไม่มากก็น้อยอยู่แล้ว และต้องการดูเทคโนโลยี JavaEE และการเขียนโปรแกรมเว็บ จะเหมาะสมที่สุดหากคุณกำลังศึกษาภารกิจ Java Collections ซึ่งครอบคลุมหัวข้อที่ใกล้เคียงกับบทความ ขณะนี้ฉันใช้ IntelliJ IDEA Enterprise Edition (นี่คือ IDE เวอร์ชันขั้นสูงที่ต้องชำระเงิน ซึ่งโดยปกติจะใช้ในการพัฒนาทางวิชาชีพ -หมายเหตุบรรณาธิการ ) การทำงานกับโครงการเว็บทำได้ง่ายกว่า Community Edition ฟรีมาก ดังนั้นใน Enterprise Edition เพียงคลิกเมาส์เพียงครั้งเดียว โปรเจ็กต์ก็จะถูกประกอบ เทลงในคอนเทนเนอร์เซิร์ฟเล็ต เซิร์ฟเวอร์เริ่มทำงาน และแม้แต่เพจที่มีโปรเจ็กต์ที่กำลังทำงานอยู่ก็เปิดขึ้นในเบราว์เซอร์ ในแนวคิดเวอร์ชันฟรี จะต้องดำเนินการส่วนใหญ่อย่างอิสระ หรือพูดง่ายๆ ก็คือ "ด้วยมือ" ฉันใช้ Apache Maven เพื่อสร้างโปรเจ็กต์และจัดการวงจรการใช้งาน ในที่นี้ฉันใช้ความสามารถเพียงเล็กน้อยเท่านั้น (การจัดการแพ็คเกจ/การพึ่งพา) ฉันเลือก Apache Tomcat เวอร์ชัน 9.0.0.M4 เป็นคอนเทนเนอร์เซิร์ฟเล็ต/เซิร์ฟเวอร์แอปพลิเคชัน ฉันรู้ว่ามีเวอร์ชันที่ใหม่กว่าอยู่แล้ว แต่นี่คือเวอร์ชันที่ฉันติดตั้งไว้

มาเริ่มกันเลย

ก่อนอื่น มาเปิด IntelliJ IDEA และสร้างโปรเจ็กต์ Maven ที่ว่างเปล่า ทางด้านซ้ายเราเลือก Maven ตรวจสอบว่า JDK สำหรับโครงการระบุไว้ที่ด้านบน หากไม่มี ให้เลือกรายการที่คุณต้องการจากรายการ หรือคลิก ใหม่... และเลือกโดยตรงจากคอมพิวเตอร์ของคุณ ตรงกลางหน้าต่าง ฉันมีภาพเคลื่อนไหวสำหรับการโหลดรายการต้นแบบ เราไม่ต้องการมัน ดังนั้นโดยไม่ต้องรอการดาวน์โหลด คุณสามารถคลิกถัดไปที่ด้านล่างของหน้าต่างได้เลย ในหน้าต่างนี้ คุณต้องระบุGroupId และ ArtifactId GroupId หมายถึงตัวระบุเฉพาะของบริษัทที่ผลิตโปรเจ็กต์ เป็นเรื่องปกติที่จะใช้ชื่อโดเมนของบริษัท แต่จะเรียงลำดับกลับกัน ไม่ได้อยู่ในความหมายของมิเรอร์ แต่ตัวอย่างเช่น หากชื่อโดเมนของบริษัทคือ maven.apache.orgดังนั้นGroupId จะเป็นorg.apache.maven นั่นคือ ขั้นแรก เราเขียนโดเมนระดับแรก คั่นด้วยจุด เขียนชื่อของโดเมนระดับที่สอง และอื่นๆ นี่เป็นแนวทางที่เป็นที่ยอมรับกันโดยทั่วไป ในกรณีที่คุณกำลัง "ตัด" โครงการด้วยตัวเอง และไม่ได้เป็นส่วนหนึ่งของบริษัท ให้เขียนชื่อโดเมนส่วนตัวของคุณที่นี่ (ในลำดับย้อนกลับด้วย!) ถ้าคุณมีมันแน่นอน :) ถ้าไม่ก็อย่าอารมณ์เสีย จริงๆ แล้ว คุณสามารถเขียนอะไรก็ได้ ที่ นี่ ในตัวอย่างนี้ ฉันจะใช้ชื่อโดเมนสมมติfatfaggy.info.javarush.ru ด้วยเหตุนี้ฉัน จึงป้อนru.javarush.info.fatfaggy ในช่อง GroupId ArtefactIdเป็นเพียงชื่อของโครงการของเรา คุณสามารถใช้ตัวอักษรและสัญลักษณ์บางอย่าง (เช่น ขีดกลาง) เพื่อแยกคำได้ “สิ่งประดิษฐ์” ของเราจะถูกเรียกตรงตามที่เราเขียนไว้ที่นี่ ในตัวอย่างนี้ ฉันเขียนmy -super-project เราไม่ได้แตะช่องเวอร์ชันในตอนนี้ แต่เราจะปล่อยไว้เหมือนเดิม หน้าต่าง IDEA มาตรฐานเมื่อสร้างโครงการใหม่ ขอเรียกมัน ว่า my-super-projectตามธรรมเนียม โครงการถูกสร้างขึ้นแล้ว! เราเห็นว่าตอนนี้มีข้อมูลที่เราป้อนทุกประการเมื่อสร้างโครงการ Maven: groupId , artifactIdและเวอร์ชัน (เราไม่ได้แตะอย่างหลัง)

โครงสร้างโครงการของเรา

โครงการ Maven นี้มีโครงสร้างบางอย่าง ดังที่เราเห็นโดยพื้นฐานแล้ว:

• ไดเร็กทอรี.ideaซึ่งมีการตั้งค่าแนวคิดสำหรับโปรเจ็กต์ปัจจุบัน
• ไดเรกทอรีsrcที่เราสร้างแหล่งที่มาของเรา
• ไฟล์my-super-project.imlซึ่งเป็นไฟล์โครงการที่สร้างโดย IDEA;
• pom.xml ซึ่งเป็น ไฟล์โปรเจ็กต์ Maven เดียวกับที่ฉันพูดถึงด้านบน ซึ่งตอนนี้เราได้เปิดไว้แล้ว ถ้าฉันพูดถึง pom.xml หรือ “pom” ที่ไหนสักแห่ง ฉันจะหมายถึงไฟล์นี้โดยเฉพาะ

โฟลเดอร์srcจะมีสองโฟลเดอร์ย่อย:

• main - สำหรับโค้ดของเรา
• ทดสอบ - สำหรับการทดสอบโค้ดของเรา

ทั้งmainและtestมีโฟลเดอร์java พิจารณาว่าโฟลเดอร์เหล่านี้เป็นโฟลเดอร์เดียวกัน โดยโฟลเดอร์ในmain เท่านั้น สำหรับซอร์สโค้ด และโฟลเดอร์ที่อยู่ในการทดสอบสำหรับโค้ดทดสอบ ตามลำดับ เราไม่ต้องการ โฟลเดอร์ทรัพยากรเลยในตอนนี้ เราจะไม่ใช้มัน แต่ให้เขานอนลง

กลายเป็นโครงการเว็บ

ถึงเวลาที่เราจะแปลงโปรเจ็กต์ Maven ให้เป็นโปรเจ็กต์เว็บ เมื่อต้องการทำสิ่งนี้ ให้คลิกขวาที่ชื่อโปรเจ็กต์ในแผนผังนี้ และเลือกเพิ่มการรองรับเฟรมเวิร์ก... หน้าต่างจะเปิดขึ้นโดยที่เราสามารถเพิ่มการรองรับเฟรมเวิร์กที่แตกต่างกันทุกประเภทสำหรับโปรเจ็กต์ของเรา แต่เราต้องการเพียงสิ่งเดียวเท่านั้น: เว็บแอปพลิเคชัน เราเลือกเขา. เราตรวจสอบว่ามีเครื่องหมายถูกถัดจากWeb Applicationและในส่วนหลักของหน้าต่างสังเกตว่าเราต้องการ สร้างไฟล์ web.xml ให้เราทันที (ฉันแนะนำให้ทำเครื่องหมายในช่องหากไม่มี) . หลังจากนี้เราจะเห็นว่าโครงสร้างของโครงการของเราได้รับการเสริมด้วยเว็บ โฟลเดอร์ . นี่คือรากฐานของโครงการเว็บของเราที่/ นั่นคือหากเราป้อนที่อยู่ localhost ในเบราว์เซอร์ (แน่นอนว่าเมื่อเราเปิดใช้งาน) ก็จะเข้าถึงได้ที่นี่โดยตรงไปยังรูทของโครงการเว็บ หากเราป้อนlocalhost/addUserโฟลเดอร์ เว็บจะค้นหาทรัพยากรที่เรียกว่าaddUser ในเว็บมีโฟลเดอร์ที่จำเป็นที่เรียกว่าWEB-INFซึ่ง มีไฟล์ web.xml อยู่ ซึ่งเราขอให้สร้างในขั้นตอนก่อนหน้า มาเปิดกันเถอะ อย่างที่คุณเห็นยังไม่มีอะไรน่าสนใจเลย มีเพียง "หมวก" เท่านั้น อย่างไรก็ตาม หากเราไม่ได้ขอให้สร้างมันขึ้นมา เราอาจจะต้องสร้างมันขึ้นมาด้วยตนเอง นั่นคือพิมพ์ "ส่วนหัว" ทั้งหมดนี้ด้วยมือ หรือในกรณีที่รุนแรง ให้มองหาเวอร์ชันสำเร็จรูปบนอินเทอร์เน็ต . web.xmlมีไว้เพื่ออะไร? สำหรับการทำแผนที่ ที่นี่เราจะบอก Tomcat ว่า URL ใดที่ร้องขอให้ส่งไปยังเซิร์ฟเล็ตใด แต่นั่นคือทั้งหมดทีหลัง ตอนนี้เราจะปล่อยให้มันว่างเปล่า นอกจากนี้ ยังมีไฟล์ชื่อindex.jspใน โฟลเดอร์ เว็บ มาเปิดกันเถอะ นี่คือไฟล์ที่จะถูกดำเนินการตามค่าเริ่มต้น นั่นคือเมื่อเราเปิดตัวโครงการนี่คือสิ่งที่เราจะได้เห็น โดยพื้นฐานแล้วjspเป็นไฟล์ html ทั่วไป โดยมีความแตกต่างคือคุณสามารถรันโค้ด java ในไฟล์ได้

เล็กน้อยเกี่ยวกับเนื้อหาคงที่และไดนามิก

เนื้อหาแบบคงที่คือเนื้อหาที่ไม่เปลี่ยนแปลงเมื่อเวลาผ่านไป ทุกสิ่งที่เราเขียนในไฟล์ html จะถูกแสดงโดยไม่มีการเปลี่ยนแปลง ถ้าเราเขียนว่า สวัสดีชาวโลก คำจารึกนี้จะปรากฏขึ้นทันทีที่เราเปิดหน้านั้น และใน 5 นาที และในวันพรุ่งนี้ ในหนึ่งสัปดาห์ และในหนึ่งปี เธอจะไม่เปลี่ยนแปลง แต่ถ้าเราต้องการที่จะแสดงวันที่ปัจจุบันบนหน้าเว็บล่ะ? ถ้าเราเขียนแค่ว่า “27 ตุลาคม 2017” พรุ่งนี้เราก็จะเห็นวันเดียวกัน ในหนึ่งสัปดาห์ และในหนึ่งปี แต่ฉันอยากให้วันนี้ยังคงมีความเกี่ยวข้อง นี่คือจุดที่ความสามารถในการรันโค้ดบางส่วนได้โดยตรงภายในเพจมาช่วยเรา เราสามารถรับวัตถุวันที่ แปลงเป็นรูปแบบที่เราต้องการและแสดงบนหน้า จากนั้นทุกวันทุกครั้งที่เราเปิดเพจวันที่ก็จะมีความเกี่ยวข้องเสมอ หากเราต้องการเพียงเนื้อหาคงที่ เว็บเซิร์ฟเวอร์ปกติและไฟล์ html ก็เพียงพอสำหรับเรา เราไม่ต้องการ Java, Maven หรือ Tomcat ใด ๆ แต่หากเราต้องการใช้เนื้อหาแบบไดนามิก ทั้งหมดนี้ก็จะมีประโยชน์ตรงนี้ แต่สำหรับตอนนี้ กลับมาที่index.jsp ของเรา อีก ครั้ง มาระบุบางสิ่งที่เป็นของเราเองแทนส่วนหัวมาตรฐาน เช่น “My super web-app!” และในส่วนเนื้อหาเราจะเขียนว่า “ฉันยังมีชีวิตอยู่!” เราเกือบจะพร้อมที่จะเปิดตัวโครงการของเราแล้ว! แต่น่าเสียดายที่สามเหลี่ยมสีเขียวตามปกติสำหรับการเปิดโปรแกรมไม่ทำงาน คลิกที่ปุ่มทางด้านซ้าย (แสดงบนหน้าจอด้วยลูกศรสีแดง) แล้วเลือกแก้ไขการกำหนดค่า... หน้าต่างจะเปิดขึ้นเมื่อเราถูกขอให้คลิกที่เครื่องหมายบวกสีเขียวเพื่อเพิ่มการกำหนดค่าบางประเภท คลิกที่มันซึ่งอยู่ที่มุมซ้ายบนของหน้าต่าง เลือก รายการ Tomcat Serverและรายการย่อย Local หน้าต่างจะเปิดขึ้นพร้อมพารามิเตอร์ที่แตกต่างกันมากมาย แต่เราพอใจกับเกือบทุกอย่างและเป็นค่าเริ่มต้น เราสามารถตั้งชื่อการกำหนดค่าของเราได้อย่างดีแทนที่จะเป็นUnnamed แบบมาตรฐาน (ที่ด้านบนสุด) นอกจากนี้ยังจำเป็นต้องตรวจสอบว่าแนวคิดนี้พบ Tomcat ในระบบของเราได้สำเร็จ (คุณได้ ดาวน์โหลดและติดตั้งไว้ก่อนแล้วใช่ไหม) หากคุณหาไม่พบ (ซึ่งไม่น่าจะเป็นไปได้) ให้คลิกลูกศรลงและเลือกตำแหน่งที่เราติดตั้งไว้ หรือเวอร์ชันอื่นหากคุณมีหลายเวอร์ชัน ฉันมีอันหนึ่งและติดตั้งไว้แล้ว ดังนั้นทุกอย่างจึงดูเหมือนในภาพหน้าจอ และที่ด้านล่างสุดของหน้าต่างเราจะเห็นว่ามีคำเตือนว่าไม่มีสิ่งประดิษฐ์ใดที่มีไว้สำหรับปรับใช้กับเซิร์ฟเวอร์ และทางด้านขวาของคำจารึกนี้จะมีปุ่มที่เสนอให้แก้ไขข้อบกพร่องนี้ เราคลิกที่มันและเห็นว่าแนวคิดนั้นค้นพบทุกสิ่ง สร้างทุกสิ่งขึ้นมาเอง สิ่งที่ขาดหายไป และทำการตั้งค่าทั้งหมดเอง เราเห็นว่าเราถูกย้าย จาก แท็บเซิร์ฟเวอร์ ไปยังแท็บการปรับใช้ ใน ส่วนปรับ ใช้เมื่อเริ่มต้นเซิร์ฟเวอร์เรามีอาร์ติแฟกต์ที่จำเป็นต้องปรับใช้อยู่แล้ว และด้านล่างระบุว่าอาร์ติแฟกต์นี้จะถูกสร้างขึ้นก่อนการปรับใช้ สมัครเลย โอเค และเราเห็นว่าประการแรก ที่ด้านล่างของหน้าต่างมีส่วนปรากฏขึ้นพร้อมกับเซิร์ฟเวอร์ Tomcat ในพื้นที่ของเรา ซึ่งสิ่งประดิษฐ์ของเราจะถูกวางไว้ คุณสามารถยุบส่วนนี้ได้โดยคลิกที่ปุ่มที่เกี่ยวข้องทางด้านขวาของหน้าต่าง เรายังเห็นว่าสามเหลี่ยมสีเขียวสำหรับการเปิดตัวนั้นเปิดใช้งานอยู่แล้ว สำหรับผู้ที่ต้องการตรวจสอบทุกอย่างคุณสามารถคลิกที่ปุ่มที่มีการตั้งค่าโปรเจ็กต์ (ทางด้านขวาของปุ่มเริ่มต้นที่มีเครื่องหมายลูกศรสีแดง) ไปที่ส่วนสิ่งประดิษฐ์และตรวจสอบให้แน่ใจว่าได้สร้างสิ่งประดิษฐ์แล้วจริงๆ มันไม่อยู่ที่นั่นจนกว่าเราจะกด ปุ่ม แก้ไขแต่ตอนนี้ทุกอย่างเรียบร้อยดี และการกำหนดค่านี้เหมาะกับเราค่อนข้างดี โดยสรุป ความแตกต่างระหว่างmy-super-project:warและmy-super-project:war explodedก็คือmy-super-project:war จะสร้าง ไฟล์war เพียงไฟล์เดียว (ซึ่งเป็นเพียงไฟล์เก็บถาวร) และตัวเลือกที่มีการระเบิดเป็นเพียงสงครามที่ "แตกออก " และตัวเลือกนี้สะดวกกว่าสำหรับฉันเป็นการส่วนตัวเนื่องจากช่วยให้ฉันปรับใช้การเปลี่ยนแปลงเล็กน้อยกับเซิร์ฟเวอร์ได้อย่างรวดเร็ว ในความเป็นจริง อาร์ติแฟกต์คือโปรเจ็กต์ของเรา ซึ่งรวบรวมไว้แล้วเท่านั้น และโครงสร้างโฟลเดอร์มีการเปลี่ยนแปลงเพื่อให้สามารถอัปโหลดไปยัง Tomcat ได้โดยตรง มันจะมีลักษณะดังนี้: ตอนนี้ทุกอย่างก็พร้อมที่จะเปิดตัวโครงการของเราแล้ว เรากดปุ่มเริ่มสีเขียวอันโลภและเพลิดเพลินไปกับผลลัพธ์! :)