JavaRush /Blog Java /Random-VI /Tạo một dự án web đơn giản trong IntelliJ Idea Enterprise...
Стас Пасинков
Mức độ
Киев

Tạo một dự án web đơn giản trong IntelliJ Idea Enterprise. Từng bước, với hình ảnh

Xuất bản trong nhóm
Mức độ kiến ​​thức cần thiết để hiểu bài viết: bạn đã hiểu ít nhiều về Java Core và muốn tìm hiểu các công nghệ JavaEE và lập trình web. Sẽ hợp lý nhất nếu bạn hiện đang nghiên cứu nhiệm vụ Bộ sưu tập Java, bao gồm các chủ đề gần với bài viết. Tạo một dự án web đơn giản trong IntelliJ Idea Enterprise.  Từng bước, có hình ảnh - 1Tôi hiện đang sử dụng IntelliJ IDEA Enterprise Edition (đây là phiên bản trả phí nâng cao của IDE, nó thường được sử dụng trong phát triển chuyên nghiệp - ghi chú của biên tập viên ). Làm việc với các dự án web dễ dàng hơn nhiều so với Phiên bản cộng đồng miễn phí. Vì vậy, trong Phiên bản doanh nghiệp, theo đúng nghĩa đen, chỉ với một cú nhấp chuột, dự án sẽ được tập hợp, đổ vào thùng chứa servlet, máy chủ khởi động và thậm chí một trang có dự án đang chạy sẽ mở ra trong trình duyệt. Trong phiên bản miễn phí của ý tưởng, phần lớn việc này sẽ phải được thực hiện độc lập, có thể nói là “bằng tay”. Tôi sử dụng Apache Maven để xây dựng dự án và quản lý vòng đời của nó. Trong phần này, tôi chỉ sử dụng một phần nhỏ khả năng của nó (quản lý gói/phụ thuộc). Tôi đã chọn Apache Tomcat phiên bản 9.0.0.M4 làm máy chủ ứng dụng/bộ chứa servlet. Tôi biết rằng đã có phiên bản mới hơn nhưng đây là phiên bản tôi đã cài đặt.

Bắt đầu nào

Đầu tiên, hãy mở IntelliJ IDEA và tạo một dự án Maven trống.
Tạo một dự án web đơn giản trong IntelliJ Idea Enterprise.  Từng bước, có hình ảnh - 2
Ở bên trái, chúng tôi chọn Maven, kiểm tra xem JDK cho dự án có được chỉ định ở trên cùng hay không. Nếu nó không có ở đó, hãy chọn cái bạn cần từ danh sách hoặc nhấp vào Mới... và chọn trực tiếp từ máy tính của bạn. Ở giữa cửa sổ, tôi có hình ảnh động tải danh sách các nguyên mẫu. Chúng tôi không cần chúng, vì vậy không cần chờ tải xuống, hãy nhấp vào Tiếp theo ở cuối cửa sổ.
Tạo một dự án web đơn giản trong IntelliJ Idea Enterprise.  Từng bước, có hình ảnh - 3
Trong cửa sổ này bạn cần chỉ định GroupId và ArtifactId . GroupId đề cập đến mã định danh duy nhất của công ty tạo ra dự án. Thông thường, sử dụng tên miền của công ty nhưng theo thứ tự ngược lại. Không phải theo nghĩa của một tấm gương, nhưng chẳng hạn, nếu tên miền của một công ty là maven.apache.org thì GroupId của nó sẽ là org.apache.maven . Nghĩa là, đầu tiên chúng ta viết tên miền cấp một, ngăn cách nó bằng dấu chấm, viết tên miền cấp hai, v.v. Đây là cách tiếp cận được chấp nhận chung. Trong trường hợp bạn đang “cắt” một dự án của riêng mình chứ không phải với tư cách là một phần của công ty, hãy viết tên miền cá nhân của bạn vào đây (cũng theo thứ tự ngược lại!). Tất nhiên là nếu bạn có nó :). Nếu không, đừng buồn. Trên thực tế, bạn có thể viết bất cứ điều gì ở đây .
Đối với công ty có tên miền vasya.pupkin.org, GroupId sẽ là org.pupkin.vasya. Cách tiếp cận tên này là cần thiết để tách các dự án có cùng tên nhưng được phát hành bởi các công ty khác nhau.
Trong ví dụ này, tôi sẽ sử dụng tên miền hư cấu fatfaggy.info.javarush.ru . Theo đó, tôi nhập ru.javarush.info.fatfaggy vào trường GroupId . ArtefactId đơn giản là tên dự án của chúng tôi. Bạn có thể sử dụng các chữ cái và một số ký hiệu (ví dụ: dấu gạch nối) để phân tách các từ. “Tạo tác” của chúng tôi sẽ được gọi chính xác như chúng tôi viết ở đây. Trong ví dụ này, tôi viết my-super-project . Hiện tại, chúng tôi không chạm vào trường phiên bản, chúng tôi để nguyên như vậy.
Tạo một dự án web đơn giản trong IntelliJ Idea Enterprise.  Từng bước bằng hình ảnh - 4
Vâng, cửa sổ IDEA tiêu chuẩn khi tạo một dự án mới. Hãy gọi nó là siêu dự án của tôi theo truyền thống .
Tạo một dự án web đơn giản trong IntelliJ Idea Enterprise.  Từng bước, có hình ảnh - 5
Dự án đã được tạo!
Tệp pom.xml ngay lập tức mở ra trước mặt chúng tôi. Đây là một tập tin có cài đặt Maven. Nếu chúng tôi muốn “nói” cho Maven biết phải làm gì và làm như thế nào hoặc lấy thứ gì đó từ đâu, chúng tôi sẽ mô tả tất cả những điều này trong chính tệp pom.xml này. Nó nằm ở gốc của dự án.
Chúng tôi thấy rằng nó hiện chứa chính xác dữ liệu mà chúng tôi đã nhập khi tạo dự án Maven: groupId , ArtifactIdphiên bản (chúng tôi không chạm vào phiên bản sau).

Cấu trúc dự án của chúng tôi

Dự án Maven này có cấu trúc nhất định.
Tạo một dự án web đơn giản trong IntelliJ Idea Enterprise.  Từng bước bằng hình ảnh - 6
Như chúng ta có thể thấy, ở gốc rễ:
  • thư mục .idea , chứa các cài đặt ý tưởng cho dự án hiện tại;
  • thư mục src nơi chúng tôi tạo nguồn của mình;
  • tệp my-super-project.iml , tệp dự án được tạo bởi IDEA;
  • pom.xml , cùng một tệp dự án Maven tôi đã nói ở trên, hiện chúng tôi đã mở. Nếu tôi đề cập đến pom.xml hoặc “pom” ở đâu đó, ý tôi là tệp cụ thể này.
Thư mục src lần lượt chứa hai thư mục con:
  • main - cho mã của chúng tôi;
  • test - để kiểm tra mã của chúng tôi.
Cả maintest đều có thư mục java . Hãy xem xét rằng đây là cùng một thư mục, chỉ có thư mục chính dành cho mã nguồn và thư mục trong test tương ứng dành cho mã kiểm tra. Hiện tại chúng tôi không cần thư mục tài nguyên , chúng tôi sẽ không sử dụng nó. Nhưng hãy để anh ấy nằm xuống.

Chuyển thành một dự án web

Đã đến lúc chúng ta chuyển đổi dự án Maven của mình thành một dự án web. Để thực hiện việc này, nhấp chuột phải vào tên dự án trong cây này và chọn Thêm hỗ trợ khung...
Tạo một dự án web đơn giản trong IntelliJ Idea Enterprise.  Từng bước, có hình ảnh - 7
Một cửa sổ sẽ mở ra nơi chúng tôi có thể thêm hỗ trợ cho tất cả các loại khung khác nhau cho dự án của mình. Nhưng chúng ta chỉ cần một: Ứng dụng Web . Chúng tôi chọn anh ấy.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 8
Chúng tôi kiểm tra xem có dấu kiểm bên cạnh Ứng dụng web hay không và trong phần chính của cửa sổ có ghi chú rằng chúng tôi muốn tạo tệp web.xml cho chúng tôi ngay lập tức (tôi khuyên bạn nên chọn hộp nếu nó không có ở đó) . Sau này, chúng ta sẽ thấy cấu trúc dự án của chúng ta đã được bổ sung thư mục web .
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 9
Đây là thư mục gốc của dự án web của chúng tôi tại / . Nghĩa là, nếu chúng ta nhập địa chỉ localhost vào trình duyệt (tất nhiên là khi chúng ta khởi chạy nó), thì nó sẽ được truy cập chính xác tại đây, vào thư mục gốc của dự án web. Nếu chúng ta nhập localhost/addUser thì thư mục web sẽ tìm kiếm tài nguyên có tên addUser .
Điều chính là phải hiểu rằng thư mục web là thư mục gốc của dự án khi chúng tôi tải nó lên Tomcat. Bây giờ chúng ta có một cấu trúc thư mục nhất định, nhưng trong dự án đã hoàn thành mà chúng ta sẽ tải lên, nó sẽ hơi khác một chút và thư mục web sẽ là thư mục gốc ở đó.
Trong web có một thư mục bắt buộc có tên WEB-INF , nơi chứa tệp web.xml mà chúng tôi đã yêu cầu tạo ở bước trước. Hãy mở nó.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 10
Như bạn có thể thấy, không có gì thú vị trong đó cả, chỉ có “chiếc mũ”. Nhân tiện, nếu chúng tôi không yêu cầu tạo nó, chúng tôi có thể phải tạo nó theo cách thủ công, nghĩa là nhập toàn bộ “tiêu đề” này bằng tay hoặc trong trường hợp nghiêm trọng, hãy tìm phiên bản làm sẵn trên Internet . Web.xml dùng để làm gì ? Để lập bản đồ. Ở đây chúng tôi sẽ cho Tomcat biết URL nào yêu cầu gửi tới servlet nào. Nhưng đó là chuyện sau, bây giờ chúng ta sẽ để trống. Ngoài ra còn có một tệp có tên là index.jsp trong thư mục web . Hãy mở nó.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 11
Có thể nói đây là tệp sẽ được thực thi theo mặc định. Tức là khi chúng tôi khởi động dự án, đây chính xác là những gì chúng tôi sẽ thấy. Về bản chất, jsp là một tệp html thông thường, với điểm khác biệt là bạn có thể thực thi mã java trong đó.

Một chút về nội dung tĩnh và động

Nội dung tĩnh là nội dung không thay đổi theo thời gian. Mọi thứ chúng tôi viết trong tệp html sẽ được hiển thị mà không có thay đổi. Nếu chúng ta viết xin chào thế giới, thì dòng chữ này sẽ được hiển thị ngay khi chúng ta mở trang, sau 5 phút, ngày mai, một tuần và một năm. Cô ấy sẽ không thay đổi. Nhưng nếu chúng ta muốn hiển thị ngày hiện tại trên trang thì sao? Nếu chúng ta chỉ viết “ngày 27 tháng 10 năm 2017” thì ngày mai chúng ta sẽ thấy cùng một ngày, sau một tuần và một năm. Nhưng tôi muốn ngày này vẫn có liên quan. Đây là lúc chúng tôi có thể hỗ trợ khả năng thực thi một số mã trực tiếp bên trong trang. Chúng ta có thể lấy một đối tượng ngày tháng, chuyển đổi nó sang dạng chúng ta cần và hiển thị nó trên trang. Sau đó, mỗi ngày, bất cứ khi nào chúng ta mở trang này, ngày tháng sẽ luôn có liên quan. Nếu chúng ta chỉ cần nội dung tĩnh thì một máy chủ web thông thường và các tệp html là đủ cho chúng ta. Chúng tôi không cần bất kỳ Java, Maven hoặc Tomcat nào. Nhưng nếu chúng ta muốn sử dụng nội dung động thì đây là lúc tất cả những điều này sẽ có ích. Nhưng bây giờ hãy quay lại với index.jsp của chúng ta . Hãy chỉ ra điều gì đó của riêng chúng ta thay vì tiêu đề tiêu chuẩn, chẳng hạn như “Siêu ứng dụng web của tôi!”, và trong phần nội dung, chúng ta sẽ viết, chẳng hạn như “Tôi còn sống!” Chúng tôi gần như đã sẵn sàng để khởi động dự án của mình! Nhưng thật không may, hình tam giác màu xanh lá cây thông thường để khởi chạy chương trình không hoạt động.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 12
Hãy nhấp vào nút bên trái của nút đó (được biểu thị trên màn hình bằng mũi tên màu đỏ) và chọn Chỉnh sửa cấu hình... Một cửa sổ sẽ mở ra nơi chúng tôi được yêu cầu nhấp vào dấu cộng màu xanh lục để thêm một số loại cấu hình. Bấm vào nó, nó nằm ở góc trên bên trái của cửa sổ.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 13
Chọn mục Máy chủ Tomcatmục con Địa phương. Một cửa sổ sẽ mở ra với nhiều thông số khác nhau, nhưng chúng tôi hài lòng với hầu hết mọi thứ và thông số mặc định.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 14
Bằng cách nào đó, chúng ta có thể đặt tên độc đáo cho cấu hình của mình thay vì tiêu chuẩn Chưa đặt tên (ở trên cùng). Cũng cần phải kiểm tra xem ý tưởng đã tìm thấy thành công Tomcat trong hệ thống của chúng tôi chưa (bạn đã tải xuống và cài đặt nó trước đó rồi phải không?). Nếu bạn không thể tìm thấy nó (điều này khó xảy ra), hãy nhấp vào mũi tên xuống và chọn nơi chúng tôi đã cài đặt nó hoặc phiên bản khác nếu bạn có một vài phiên bản trong số đó. Tôi có một cái và nó đã được cài đặt sẵn nên mọi thứ trông giống như trên ảnh chụp màn hình. Và ở cuối cửa sổ, chúng tôi thấy rằng có một cảnh báo rằng không có một tạo phẩm nào được thiết kế để triển khai lên máy chủ. Và ở bên phải của dòng chữ này có một nút đề nghị sửa lỗi này. Chúng tôi nhấp vào nó và thấy rằng chính ý tưởng đã tìm thấy mọi thứ, tự tạo ra mọi thứ, những gì còn thiếu và tự thực hiện tất cả các cài đặt.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 15
Chúng ta thấy rằng chúng ta đã được chuyển từ tab Máy chủ sang tab Triển khai , trong phần Triển khai khi khởi động máy chủ , chúng ta đã có tạo phẩm cần được triển khai và bên dưới có ghi rằng tạo phẩm này sẽ được xây dựng trước khi triển khai. Áp dụng, được rồi. Và chúng ta thấy rằng trước tiên, ở cuối cửa sổ, một phần đã xuất hiện với máy chủ Tomcat cục bộ của chúng ta, nơi hiện vật của chúng ta sẽ được đặt vào đó. Bạn có thể thu gọn phần này bằng cách nhấp vào nút tương ứng ở bên phải cửa sổ.
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 16
Chúng tôi cũng thấy rằng tam giác màu xanh lá cây để khởi chạy đã hoạt động. Đối với những người muốn kiểm tra mọi thứ, bạn có thể nhấp vào nút có cài đặt dự án (ở bên phải các nút khởi chạy, được đánh dấu bằng mũi tên màu đỏ), đi tới phần Hiện vật và đảm bảo rằng hiện vật đã thực sự được tạo. Nó không ở đó cho đến khi chúng tôi nhấn nút Fix đó , nhưng bây giờ mọi thứ đều ổn. Và cấu hình này khá phù hợp với chúng tôi. Tóm lại, sự khác biệt giữa my-super-project:warmy-super-project:war phát nổmy-super-project:war sẽ chỉ tạo một tệp chiến tranh (chỉ là một kho lưu trữ) và tùy chọn với bùng nổ chỉ đơn giản là một cuộc chiến “không được giải nén” . Và tùy chọn này thuận tiện hơn cho cá nhân tôi vì nó cho phép tôi nhanh chóng triển khai các thay đổi nhỏ đối với máy chủ. Trên thực tế, tạo phẩm này là dự án của chúng tôi, chỉ mới được biên dịch và trong đó cấu trúc thư mục đã được thay đổi để có thể tải trực tiếp lên Tomcat. Nó sẽ trông giống như thế này:
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 17
Chà, bây giờ mọi thứ đã sẵn sàng để khởi động dự án của chúng tôi. Chúng ta nhấn nút khởi động màu xanh lá cây đáng mơ ước và tận hưởng thành quả! :)
Creation простейшего веб-проекта в IntelliJ Idea Enterprise. Пошагово, с картинками - 18
Bình luận
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION