從零開始學習 JavaWeb - 04 建立JavaWeb

時間  2020-09-10
標籤 開始 學習 javaweb 建立 欄目 Java 简体版
原文   原文鏈接

簡述:

  在前面的文章中，咱們已經下載並安裝 IDEA、Tomcat 和 Maven了。如今來經過IDEA 建立帶有 Maven 的 JavaWeb。css

建立 JavaWeb:

1.建立簡單的JavaWeb模板:

  1.打開IDEA，選擇下面的選項建立目錄.
imagehtml

  2.出現下面的頁面，選擇 maven -> 勾選 Create from archetype -> 選擇 org.apache.maven.archetypes:maven-archetype-webapp -> Next. 注意圖下第二步上面咱們能夠選擇 JDK 版本。藍色框 的也是一個 webapp, 框出來是爲了提醒別選錯 webapp.
imagejava

  3.選擇項目存放的目錄位置，下面紅色框柱的 GroupId、ArtifactId、Version 這幾個，我後面補全，若是本身想知道的，能夠先去查別的文檔。由於是學習Demo，我直接用默認的。
imageweb

  4.選擇Maven 的版本後，選擇右下角的 FINSH 完成按鍵，而後下面的配置，我也是後面補全。
imageapache

  5.完成後出現下面的是由於要安裝 依賴/插件，這個時候，咱們能夠看到目錄結構中是沒有 src 文件夾的。安裝可能比較久，不能心急。
image瀏覽器

  6.依賴/插件安裝後後，會出現 src 這個文件夾
若是沒有，能夠按下面進行
    🅐按住下面圖片第一右鍵文件夾，選中 Reload from Disk, 刷新一下。
image.png
    🅑
image.png
src的目錄結構
image.pngtomcat

2.webapp的建立：

  由於這裏我不想將 webapp 放在 main 裏面，我這裏會把 webapp 刪除掉，而後在 src 的同級目錄下建立先的 webapp. 若是不想看這裏的話，能夠跳到看下一步。
  1.打開 Project Structure, Project Structure 在菜單 Flie 選項下面，咱們能夠用快捷鍵 ⌘ + ; 打開。服務器

  2.打開 Project Structure後，咱們選擇 Modules -> + 號後，選擇 Web.
(Ps: 第一圖中，咱們能夠看到項目文件下面有個Web, 那是咱們刪除原來在 main下面的webapp的目錄時候，沒有在這裏刪除，咱們能夠點擊這個目錄後，經過 - 號鍵刪除)
image.png
image.pngapp

  3.點擊Web後，生成目錄下面正確的webapp, 由於咱們要放在 src 的同級目錄下先作①選擇修改
image
    ➊.我的建議直接修改路徑，不要選擇後面的 ... 去選擇文件夾，我這裏是將 web 修改成了 webapp, introductionJavaWebDemo 是的項目目錄，由於我但願 webapp 跟 src 目錄是同級的，因此直接修改成 webapp 就好了。後面的 WEB-INF/web.xml 不要動。
image
    ➋.修改完之後，選擇2修改，出現下面的彈框，而後這裏是 resource directory path, 設置跟➊裏面的路徑同樣就好了，只是少了 /WEB-INF/web.xml 這一段。而後選擇 ok.
image.png
  若是出現下面的狀況，選擇 YES 就好了
image.pngwebapp

  建立完成後的目錄結構
image.png

3.建立 index.jsp：

  1.右鍵webapp -> New -> JSP/JSPX
image.png

  2.輸入 index 後回車
image.png

  3.生成的index.jsp
image.png

4.建立資源文件夾和編寫簡單 html 展現：

  1.建立 assets 文件夾，目錄結構以下，assets 這個文件夾主要用來存放靜態資源，如 image、css、js等。
image.png

  2.修改 index.jsp 爲下面內容。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>introductionJavaWebDemo</title>
    <link rel="shortcut icon" type="image/ico" href="/assets/favicon.ico" mce_href="/assets/favicon.ico" />
</head>
<body>
    <div>
        This is a JavaWeb Demo
    </div>
</body>
</html>

5.建立 Artifacts:

  1.打開 Project Structure，而後選擇 Artifacts, 咱們能夠看到紅框中已經有了 artifacts 了。經過 - 號先刪除它們。
image.png

  2.建立 artifacts流程, + -> Web Application: Exploded -> From Modules...
image.png

  3.選擇對應的 modules,而後肯定，再肯定就能夠了。
image.png

6.經過 Tomcat 啓動 Web 服務器，展現 index.jsp：

  1.打開 Run 的 configurations 進行設置, 能夠點擊下圖框柱的地方，或者 菜單欄 -> Run -> Edit Configuartions...
image.png

  2.打開後，經過 + -> Tomcat Server -> Local 建立 IDEA 和 Tomcat Server 的關聯。
image.png

  3.標記①那個是名字，能夠先無論，咱們點擊②裏面 CONFIGURE... 按鈕打開
image.png

  4.咱們能夠看到這裏已經有一個 Tomcat 9.0.20 這個是我以前下載的另外一個版本，配置過的其餘學習案例的，這裏咱們要選擇咱們以前下載的 Tomcat 9.0.37 版本。+ 號鍵新增
image

  5.點擊 Tomcat Home 後面的 小圖標打開選擇目錄。
image

  6.找到咱們下載的 tomcat 9.0.37 版本的存放位置，選中文件夾後，點擊 open 肯定。
image

  7.下面的 Tomcat base directory 會自動填寫。若是沒有，Tomcat base directory後面的小圖標重複一次 5和6的操做。沒問題確認。
image

  8.咱們能夠看到下圖咱們新增的 Tomcat 9.0.37版本，選中直接按確認。
image

  9.完成上一步後，咱們能夠看到 Application server 裏面變成了Tomcat 9.0.37 版本，若是咱們以前在IDEA配置過，其實直接省略第3到第8步，直接點擊中間的會出現以前新建過的 Tomcat 版本選擇。
image.png
image.png

  10.完成了Tomcat的基本配置，咱們如今來進行部署。
(Ps: IDEA這個工具，它會幫咱們把關聯的 Tomcat 進行部署起來，全部省了咱們不少功夫和設置配置的時間。若是想具體瞭解原始的部署流程，請本身查詢文章)
image.png

  11. + 號鍵咱們選擇 Artifact...。這個Artifact 就是咱們上面建立的 Artifacts。
image.png

  12.由於我但願打開Tomcat服務器的時候，映射到的是 http://localhost:8080/ 這個路徑 而不是 8080/ 後面加一大串的路徑，全部把 Application context 改爲了 /。修改完後確認。
image.png

  13.回到項目，咱們能夠看到 ①的地方變了，而後咱們按②的小按鈕啓動 Tomcat.
image.png

  14.啓動後，自動打開默認瀏覽器，這裏顯示的就是 index.jsp 的內容，下面表明運行成功。
image.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程