使用Intellij idea新建Java Web項目(servlet) 原理及初步使用


准備

      1. JDK       (配置JDK_HOME\bin   和 CLASSPATH)   注:JDK8下載已經需要注冊了,請使用JDK11(現在是官方長期支持的版本)     對於我們新手來說,JDK11的門檻更多在於:JDK9以來更新的module管理。 但是對module配置方面陌生不應該是守舊的原因,請看: JDK8過渡到JDK11
      2. Tomcat  (需要配置CATALINA_HOME,並為servlet配置CLASSPATH   %CATALINA_HOME%\lib\servlet-api.jar)

             有關環境配置的知識:   JAVA SE11環境變量配置(Windows)        Java中設置環境變量CLASSPATH的意義

      3. 熟悉IDEA最基本操作: IDEA為新手專業打造

      4. HttpServlet 詳解(基礎) 

 遇到的坑: 

三 級標題

四 級標題

  1. Java Web項目中解決中文亂碼方法總結 
  2. IDEA 在同一目錄創建多個項目
  3. 解決 IDEA 部署 Tomcat 時,輸出路徑沒有靜態資源 :idea輸出文件夾沒有jsp頁面
  4. servlet的url-pattern匹配規則詳細描述

 

原理了解

      1. HTTP協議詳解 - 小坦克 - 博客園   (建議看完他的HTTP專題)    [get是requset的一種]

        Python | 解析pcap文件分析HTTP Request/Response報文 | 小武的博客

      2. HTML from 表單提交請求到servlet 實例

        Http響應Response詳解 - 勇敢的心 - CSDN博客

                       利用HTML的表單get提交功能,后台Servlet處理request / response   

                           [response就是平時HTTP把html文件“送”到瀏覽器的方式

        抓包中看到的各種元素

        servlet的本質是什么,它是如何工作的? - 知乎

      3. JSP與servlet的關系:javaweb學習總結(十四)——JSP原理

                既然開發Java Web項目,那就默認會HTML開發了

      4. JSON教程導讀

                      事實上關於網頁的語言學習都可以看一下國內兩個W3cschool網站

 如果想抓包一下,可以用現代瀏覽器如Chrome Firefox打開一個網頁,然后F12開發者工具 - NetWork 勾上“”Preserve log”,F5刷新一下,可以看到一堆文件,隨便點一個,點擊Header或Response

 


 

開始

首先按如下方法創建JavaEE Web Application項目

Intellij idea創建javaWeb以及Servlet簡單實現 - yhao2014的專欄 - CSDN博客

Ps.記得讓防火牆放過IntelliJ idea,Idea的代碼提示錯誤是在右側邊欄,沒有窗口的...

(如果Application Server選項里沒有Tomcat,可以點擊旁邊的NEW   選擇Tomcat Server,然后JIDEA會自動識別你的環境變量)

 附:Tomcat 9.0.X 控制台亂碼最優解決方案

 

然后開始代碼實現

 如果只改動了資源文件,需要刷新Tomcat

 

 

 在InteliJ Idea里運行Servlet有個坑,

事實上調試欄上的開始是使用Tomcat 8080端口,這個會使得web.xml生效

而瀏覽器那一欄是單元測試,是用來測試網頁的,修改html后刷新就會生效,和Tomcat無關。默認是使用InteliJ Idea的服務器,不會使用你的web.xml.........

(建議,網頁編輯部分用VSCode+Live Server插件,保存即可自動刷新預覽) 

 

Ps. 如果修改了 web.xml ,則需要Redeploy重新部署    (直接Update classes and resources是沒用的,畢竟Tomcat說了算)

 

 

另外,我做了一個示例(JDK11 Tomcat9)

 

度盤鏈接: https://pan.baidu.com/s/1smw_cTgQXvV8NkB9HaHtOQ

(由於太小,放github浪費,就丟網盤了)提取碼: tasz

稍微深入地理解一下Servlet:Java Web(一) Servlet詳解!!   [非常重要]

 

 

 

如果看不懂,請看此處解釋:

 

其實就是利用HTML的<form>表單功能:
填寫完HTML表單點擊“登錄”或“取消”(其實我偷懶,所以取消和登錄功能寫一樣了)
然后就會觸發表單的submit,這時通知瀏覽器發送表單內容
其實就是使用表單指定的方法(這里是GET)發送,其實和你直接瀏覽器訪問
 http://localhost/Login?username=a&password=2 是一樣的 然后作為 實現了Servlet和Web等功能的服務器Tomcat,Tomcat 就會按照WEB.xml里描述的去攔截Login這個路徑並轉由 LoginServlet 這個類處理,這樣就使得LoginServlet類並啟動並執行。 之后LoginServlet類就接收Request,根據函數體定義處理,最后發回Response 然后瀏覽器收到了Response 注:Response可以是一個HTML資源,也可以是其他的,最后瀏覽器根據Response來生成並顯示網頁內容

 

 

 

 


逐漸增加功能

 

1, 使用AJAX技術動態加載內容

我參考了:http://www.w3school.com.cn/ajax/index.asp  短短幾頁,請務必看完

當然,目前還有一種新技術Fetch可以用

 1 function loadXMLDoc() {
 2     var xmlhttp = new XMLHttpRequest();
 3     console.log("Good");
 4     xmlhttp.open("GET","Login?username=Bill&passwd=jkkdsf",true);
 5     xmlhttp.send();
 6 
 7     xmlhttp.onreadystatechange=function() {         /*必須先判斷狀態*/
 8         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 9             document.getElementById("datalist").innerHTML = xmlhttp.responseText;
10         }
11     }
12 
13 }
ajax-demo.js
<!--               </form>標簽后面                       -->

        <div id="datalist"></div>


<!--    JS部分放在后面,便於頁面內容更快加載展示   -->
    <script src="script/ajax-demo.js"></script>


<!---              </body>之前                              -->
index.html改動部分

由於JS里的get內容是錯誤的用戶名密碼,所以LoginServlet類會轉發LoginError.html的所有內容到瀏覽器,

然后JS把response的Text內容都寫到id為datalist的元素里

效果(非常粗暴的把LoginError.html全部加載進來了,但是去掉了一些html標簽,我猜測是 瀏覽器自動去掉的)


 

 

由此可見,我們可以輕輕松松地用 JDBC  Servlet  AJAX 來做一個動態加載數據庫內容的Java Web項目

 稍微深入理解一下Servlet

 

 

安全方面(web.xml分角色權限)

java - 使用一個JDBC領域,Glassfish 3安全- 基於表單 認證

使用JDBC讀寫數據庫與網頁交互

jsp+servlet+jdbc實現表單提交

JSP+Servlet+JDBC+MySQL實現表單生成 

將JDBC ResultSet解析為JSON格式

 

由於我要做管理員界面,所以不考慮SEO,因此全部前后端分離

 

 關於前后端分離:JavaWeb項目為什么我們要放棄jsp?為什么要前后端解耦?為什么要前后端分離?2.0版,為分布式架構打基礎。

前后端分離后對http地址路徑的處理:用nginx的反向代理機制解決前端跨域問題

 


 

資料區

非常好非常基礎的JavaWeb入門教程(Servlet JSP SSH SSM都講到了):https://skyline75489.github.io/Heart-First-JavaWeb/

通過瀏覽器打開網頁的底層故事:What-happens-when 的中文翻譯

JS函數式編程學習:https://skyline75489.github.io/learnrx-zh-cn/

 

AJAX讀取JSON的思路和AJAX讀取XML差不多
[感想]原來XML和HTML相近的好處:用JS處理時,調用方法一樣 如getElementsByTagName("TITLE");

 


 

[計划(不存在的,永久擱置)]

        1. 初步前后端分離,利用JSON傳遞內容,js處理JSON並修改HTML    (JSON是傳遞數據的一種格式,比XML簡潔高效)
        2. 再繼續分離,靜態頁面交給Nginx(性能好),動態交給Tomcat。    [這個只要讓Nginx指定某個路徑交給Tomcat就行,權限方面由web.xml配置控制]
        3. 單點登錄SSO
        4. 后續會逐步采用Maven、SSM+SpringBoot
        5. 甚至使用nodejs / node-fetch處理JSON

 <待寫內容>

      介紹MVC等抽象模型概念 從Script到Code Blocks、Code Behind到MVC、MVP、MVVM

  框架 架構 設計模式的區別:  架構、框架和設計模式關系

    【架構】 簡單的說架構就是一個藍圖,是一種設計方案,將客戶的不同需求抽象成為抽象組件,並且能夠描述這些抽象組件之間的通信和調用。

       【框架】 軟件框架是項目軟件開發過程中提取特定領域軟件的共性部分形成的體系結構,不同領域的軟件項目有着不同的框架類型。框架不是現成可用的應用系統。而是一個半成品,提供了諸多服務,開發人員進行二次開發,實現具體功能的應用系統。

      【設計模式】 是一套被反復使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結,它強調的是一個設計問題的解決方法。
-------------   lfsf802

 

JSON

 

 

<待了解概念>

Java設計模式

 

設計模式


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM