使用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的意義html

      3. 熟悉IDEA最基本操做: IDEA爲新手專業打造前端

      4. HttpServlet 詳解(基礎) 

 遇到的坑: 

三 級標題

四 級標題java

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

 

原理了解

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

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

        nginx

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

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

                       利用HTML的表單get提交功能,後臺Servlet處理request / response    web

                           [response就是平時HTTP把html文件「送」到瀏覽器的方式ajax

        抓包中看到的各類元素數據庫

        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設計模式

 

設計模式

相關文章
相關標籤/搜索