javaweb之JSP+Servlet

javaweb之JSP+Servlet

使用java開發web項目時,能夠在後端使用Servlet,前端使用JSP,下面就介紹一下這二者的配合使用。css

  • Servlet

Servlet的概念其實很簡單,本質是一個聽從Servlet開發出來的java類。運行在 Web 服務器或應用服務器,它是做爲來自 Web 瀏覽器或其餘 HTTP 客戶端的請求和 HTTP 服務器上的數據庫或應用程序之間的中間層。html

Servlet 生命週期

圖片來自https://www.runoob.com前端

  • JSP

JSP(全稱Java Server Pages)是由 Sun Microsystems 公司倡導和許多公司參與共同建立的一種使軟件開發者能夠響應客戶端請求,而動態生成 HTML、XML 或其餘格式文檔的Web網頁的技術標準。JSP 技術是以 Java 語言做爲腳本語言的,JSP 網頁爲整個服務器端的 Java 庫單元提供了一個接口來服務於HTTP的應用程序。java

特色:能夠混雜Html和java代碼!web

其實JSP也是一種Servlet,JSP被編譯後是Servlet類文件。而一般JSP更注重頁面的顯示,而Servlet更注重邏輯控制。數據庫

img

一個完整的網絡請求:後端

  • 就像其餘普通的網頁同樣,您的瀏覽器發送一個 HTTP 請求給服務器。
  • Web 服務器識別出這是一個對 JSP 網頁的請求,而且將該請求傳遞給 JSP 引擎。經過使用 URL或者 .jsp 文件來完成。
  • JSP 引擎從磁盤中載入 JSP 文件,而後將它們轉化爲 Servlet。這種轉化只是簡單地將全部模板文本改用 println() 語句,而且將全部的 JSP 元素轉化成 Java 代碼。
  • JSP 引擎將 Servlet 編譯成可執行類,而且將原始請求傳遞給 Servlet 引擎。
  • Web 服務器的某組件將會調用 Servlet 引擎,而後載入並執行 Servlet 類。在執行過程當中,Servlet 產生 HTML 格式的輸出並將其內嵌於 HTTP response 中上交給 Web 服務器。
  • Web 服務器以靜態 HTML 網頁的形式將 HTTP response 返回到您的瀏覽器中。
  • 最終,Web 瀏覽器處理 HTTP response 中動態產生的HTML網頁,就好像在處理靜態網頁同樣。

下面是一個實際項目中的應用:瀏覽器

一個Servlet:服務器

//GetAllLesson
package intergration.controller.lesson;


import intergration.Service.LessonService;
import intergration.entity.Lesson;
import org.jdom.JDOMException;
import org.xml.sax.SAXException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.ParserConfigurationException;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


@WebServlet("/lesson/getAllLesson")  //訪問Servlet的url
public class GetAllLesson extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //super.doGet(req, resp);
        LessonService lessonService = new LessonService();

        Map<String, Object> modelMap = new HashMap<String, Object>();
        List<Lesson> lessonList = null;
        try {
            lessonList = lessonService.getAllLesson();  //從後臺獲得數據
        } catch (ParserConfigurationException e) {
            e.printStackTrace();
        } catch (SAXException e) {
            e.printStackTrace();
        } catch (JDOMException e) {
            e.printStackTrace();
        }
        modelMap.put("lesson", lessonList);
        if(lessonList == null){
            modelMap.put("success", false);
        }else {
            modelMap.put("success", true);
        }

        req.setAttribute("lesson_list",lessonList);  //將數據傳回前端
        req.getRequestDispatcher("getAllLesson.jsp").forward(req, resp); //重定向

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //super.doPost(req, resp);
        doGet(req, resp);
    }
}

對應的 getAllLesson.jsp網絡

<%@ page import="java.util.List"%>
<%@ page import="intergration.entity.Lesson" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/11/27
  Time: 17:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>getAllLesson</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/public.css" />
</head>
<body>

<div id = "left_table">
    <form action="getLessonById" method="post">
        <input type="text"  name="id" value="" placeholder="課程號" />
        <button type ="submit">查詢</button>
    </form>
</div>
<div id = "table" >
    <div class="add">
        <form action="insertLesson" method="post">
            <input type="text"  name="id" value="" placeholder="ID" />
            <input type="text"  name="name" value="" placeholder="課程名" />
            <input type="text"  name="sex" value="" placeholder="教師" />
            <input type="text"  name="class" value="" placeholder="學時" />
            <select name = "database">
                <option value = "test1">test1</option>
                <option value = "test2">test2</option>
            </select>
            <button type ="submit">新增</button>
        </form>
    </div>

    <table cellpadding="0" cellspacing="0">
        <thead>
        <tr>
            <th>ID</th>
            <th>課程名</th>
            <th>教師</th>
            <th>學時</th>
        </tr>
        </thead>
        <%
            //獲取數據
            List<Lesson> lesson_list = (List<Lesson>)request.getAttribute("lesson_list");
        %>

        <%
            for(Lesson lesson:lesson_list){
        %>
        <tbody>
            <tr align="center">
                <td> <%= lesson.getLessonId() %></td>
                <td> <%= lesson.getLessonName() %></td>
                <td> <%= lesson.getTeacherName() %></td>
                <td> <%= lesson.getHours() %></td>

                <td  width="20%">
                    <span class="delete" ><a href="deleteLessonById?id=<%= lesson.getLessonId()%>">刪除</a> </span>
                    <span class="edit" onclick="dis( <%= lesson.getLessonId() %>,'<%=lesson.getLessonName() %>',<%= lesson.getTeacherName() %>, <%= lesson.getHours() %>);">編輯</span>

                </td>
            </tr>
        </tbody>
        <%
            }
        %>

    </table>
    <div id="mask">
        <div class="mask">
            <div class="title">
                編輯
                <span onclick = "nodis()">
							X
						</span>
            </div>
            <div class="content">
                <form action="updateLesson" method="post">
                    <input type="text"  name="id" id = "update_id"value="" placeholder="ID" />
                    <input type="text"  name="name" id = "update_name" value="" placeholder="課程名" />
                    <input type="text"  name="sex" id = "update_sex"value="" placeholder="教師" />
                    <input type="text"  name="class" id = "update_class"value="" placeholder="學時" />
                    <button type ="submit">更新</button>
                </form>
            </div>
        </div>
    </div>


</div>

</body>

<script>
    function dis(Id,Name,Sex,Class) {
        event.stopPropagation();
        document.getElementById("mask").style.display = "block";
        document.getElementById("update_id").setAttribute("placeholder",Id);
        document.getElementById("update_name").setAttribute("placeholder",Name);
        document.getElementById("update_sex").setAttribute("placeholder",Sex);
        document.getElementById("update_class").setAttribute("placeholder",Class);
        document.getElementById("update_id").setAttribute("value",Id);
        document.getElementById("update_name").setAttribute("value",Name);
        document.getElementById("update_sex").setAttribute("value",Sex);
        document.getElementById("update_class").setAttribute("value",Class);
    }
    function nodis() {
        event.stopPropagation();
        document.getElementById("mask").style.display = "none";
    }
</script>

</html>
相關文章
相關標籤/搜索