卷妹的成長日記之javaweb day9

👩‍💻部落格首頁：京與舊鋪的部落格首頁

✨歡迎關注🖱點贊🎀收藏⭐留言✒

🔮本文由京與舊鋪原創

😘系列專欄：java學習

👕參考網站：動力節點

💻首發時間：🎞2022年8月23日🎠

🎨你做三四月的事，八九月就會有答案，一起加油吧

🀄如果覺得部落客的文章還不錯的話，請三連支援一下部落客哦

🛒導航小助手🎪

文章目錄

• ​​卷妹的成長日記之javaweb day9​​
• ​​🛒導航小助手🎪​​

• 我們應該怎麼去實作一個功能呢？

• 建議：你可以從後端往前端一步一步寫。也可以從前端一步一步往後端寫。都可以。但是千萬要記住不要想起來什麼寫什麼。你寫代碼的過程最好是程式的執行過程。也就是說：程式執行到哪裡，你就寫哪裡。這樣一個順序流下來之後，基本上不會出現什麼錯誤、意外。
• 從哪裡開始？

• 假設從前端開始，那麼一定是從使用者點選按鈕那裡開始的。

• 第一：先修改前端頁面的超連結，因為使用者先點選的就是這個超連結。

<a href="/oa/dept/list">檢視部門清單</a>      

• 第二：編寫web.xml檔案

<servlet>
    <servlet-name>list</servlet-name>
    <servlet-class>com.bjpowernode.oa.web.action.DeptListServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>list</servlet-name>
    <!--web.xml檔案中的這個路徑也是以“/”開始的，但是不需要加項目名-->
    <url-pattern>/dept/list</url-pattern>
</servlet-mapping>      

• 第三：編寫DeptListServlet類繼承HttpServlet類。然後重寫doGet方法。

package com.bjpowernode.oa.web.action;

import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

public class DeptListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    }
}      

• 第四：在DeptListServlet類的doGet方法中連接配接資料庫，查詢所有的部門，動态的展示部門清單頁面.

• 分析list.html頁面中哪部分是固定死的，哪部分是需要動态展示的。
• list.html頁面中的内容所有的雙引号要替換成單引号，因為out.print(“”)這裡有一個雙引号，容易沖突。
• 現在寫完這個功能之後，你會有一種感覺，感覺開發很繁瑣，隻使用servlet寫代碼太繁瑣了。

while(rs.next()){
    String deptno = rs.getString("a");
    String dname = rs.getString("dname");
    String loc = rs.getString("loc");

    out.print("         <tr>");
    out.print("             <td>"+(++i)+"</td>");
    out.print("             <td>"+deptno+"</td>");
    out.print("             <td>"+dname+"</td>");
    out.print("             <td>");
    out.print("                 <a href=''>删除</a>");
    out.print("                 <a href='edit.html'>修改</a>");
    out.print("                 <a href='detail.html'>詳情</a>");
    out.print("             </td>");
    out.print("         </tr>");
}      

• 第六步：檢視部門詳情。

• 建議：從前端往後端一步一步實作。首先要考慮的是，使用者點選的是什麼？使用者點選的東西在哪裡？

• 一定要先找到使用者點的“詳情”在哪裡。找了半天，終于在後端的java程式中找到了

<a href='寫一個路徑'>詳情</a>      

• 詳情 是需要連接配接資料庫的，是以這個超連結點選之後也是需要執行一段java代碼的。是以要将這個超連結的路徑修改一下。
• 注意：修改路徑之後，這個路徑是需要加項目名的。“/oa/dept/detail”

• 技巧：

out.print("<a href='"+contextPath+"/dept/detail?deptno="+deptno+"'>詳情</a>");      

• 重點：向伺服器送出資料的格式：uri?name=value&name=value&name=value&name=value
• 這裡的問号，必須是英文的問号。不能中文的問号。

• 解決404的問題。寫web.xml檔案。

<servlet>
    <servlet-name>detail</servlet-name>
    <servlet-class>com.bjpowernode.oa.web.action.DeptDetailServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>detail</servlet-name>
    <url-pattern>/dept/detail</url-pattern>
</servlet-mapping>      

• 編寫一個類：DeptDetailServlet繼承HttpServlet，重寫doGet方法。

package com.bjpowernode.oa.web.action;

import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

public class DeptDetailServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //中文思路（思路來源于：你要做什麼？目标：檢視部門詳細資訊。）
        // 第一步：擷取部門編号
        // 第二步：根據部門編号查詢資料庫，擷取該部門編号對應的部門資訊。
        // 第三步：将部門資訊響應到浏覽器上。（顯示一個詳情。）
    }
}      

• 在doGet方法當中：連接配接資料庫，根據部門編号查詢該部門的資訊。動态展示部門詳情頁。

• 第七步：删除部門

• 怎麼開始？從哪裡開始？從前端頁面開始，使用者點選删除按鈕的時候，應該提示使用者是否删除。因為删除這個動作是比較危險的。任何系統在進行删除操作之前，是必須要提示使用者的，因為這個删除的動作有可能是使用者誤操作。（在前端頁面上寫JS代碼，來提示使用者是否删除。）

<a href="javascript:void(0)" onclick="del(30)" >删除</a>
<script type="text/javascript">
  function del(dno){
    if(window.confirm("親，删了不可恢複哦！")){
      document.location.href = "/oa/dept/delete?deptno=" + dno;
    }
  }
</script>      

• 以上的前端程式要寫到後端的java代碼當中：

• DeptListServlet類的doGet方法當中，使用out.print()方法，将以上的前端代碼輸出到浏覽器上。

• 解決404的問題：

• ​​http://localhost:8080/oa/dept/delete?deptno=30​​
• web.xml檔案

<servlet>
    <servlet-name>delete</servlet-name>
    <servlet-class>com.bjpowernode.oa.web.action.DeptDelServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>delete</servlet-name>
    <url-pattern>/dept/delete</url-pattern>
</servlet-mapping>