天天看點
傳回

JavaWeb學習記錄 Day4（JSP入門）

文章目錄

  • ​​Day 4​​
  • ​​JSP簡介​​
  • ​​JSP執行原理​​
  • ​​JSP文法​​
  • ​​JSP特殊用法​​
  • ​​JSP綜合項目​​

Day 4

2019年7月16日。

這是我學習JavaWeb的第四天。

這一天，我學到了以下的知識。

JSP簡介

Java Service Page ：Java伺服器頁面。其根本是一個簡化的Servlet設計，它 是由Sun Microsystems公司倡導、許多公司參與一起建立的一種動态網頁技術标準。JSP技術有點類似ASP技術，它是在傳統的網頁HTML（标準通用标記語言的子集）檔案(.htm,.html)中插入Java程式段(Scriptlet)和JSP标記(tag)，進而形成JSP檔案，字尾名為(*.jsp)。 用JSP開發的Web應用是跨平台的，既能在Linux下運作，也能在其他作業系統上運作

JSP能處理一些Java前後端互動的資料，主要用來顯示資料，但不建議大量代碼寫在JSP頁面裡面；

  • 優點：簡單，和HTML差不多
  • 缺點：書寫頁面會很亂，HTML代碼和JAVA交錯；

JSP執行原理

動态請求會被分發到Web容器（Web伺服器）中。

容器會去執行位元組碼檔案，就是 .class檔案。

Servlet是java類，可以直接編譯成class檔案。

但是，Jsp怎麼編譯成class檔案？

于是我們會想，jsp是不是會被轉換成一個java類。

追究本質

Tomcat在工作的時候，将我們的Jsp頁面轉換成了java類

JavaWeb學習記錄 Day4（JSP入門）

打開這個類分析：

該類繼承一個類：HTTPJSPBase ， 沒有直接繼承HttpServlet ， 但是HTTPJSPBase繼承了HttpServlet，是以得出結論

JSP本身就是一個servlet的方式運作的

那他怎麼輸出頁面的呢？發現他是使用out對象輸出到浏覽器

JavaWeb學習記錄 Day4（JSP入門）

那這個out對象上去的方式是什麼呢？

發現，有一個_jspService可以執行操作我們的JSP，将它輸出到前端頁面。

JavaWeb學習記錄 Day4（JSP入門）

繼續分析源碼，得到一些屬性；

JavaWeb學習記錄 Day4（JSP入門）

JSP文法

JSP基礎文法

  1. JSP獲得變量的值​

    ​<%= 表達式或者變量值 %>​

     ​
  2. JSP定義局部變量:寫一段Java代碼​

    ​<% Java代碼 %>​

     ​ 注意點：必須嚴格遵守Java規範
  3. JSP定義全局變量​

    ​<%! 全局變量或方法 %>​

     ​

除此之外，JSP中還分為EL表達式和JSTL标簽這兩種表達方法，本篇部落格先介紹EL表達式。

  • EL表達式：​

    ​${}​

     ​

EL表達式一般用來輸出變量的值，而不是一個對象。

文法示範示例如下：

<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%--
JSP基礎文法
  1.JSP獲得變量的值 <%= 表達式或者變量值 %>
  2.JSP定義局部變量:寫一段Java代碼   <% Java代碼 %>
    注意點：必須嚴格遵守Java規範
  3.JSP定義全局變量 <%! 全局變量或方法 %>

簡化符：因為HTML是标記語言，我們需要一些标記
EL表達式和JSTL标簽

    ${}  ==  <%= %> 聯系和差別
    EL表達式一般用來輸出變量的值；而不能是一個對象；

tomcat會在jsp解析的時候将_jspService轉換成對應的doget。dopost，我們正常方式無法直接調用！

//JSP内置對象：
    pageContext 作用域：
          application = pageContext.getServletContext(); 應用
          session = pageContext.getSession(); 會話
          request = 請求
          page = this; 頁面

      ===
      out.輸出
--%>


<%!
  int i = 0;

  public int add(int a,int b){
      return a+b;
  }

%>


<%
//Java代碼
String name = "abc";
int age = 18;
int j = 0;
    Date date = new Date();

    out.write(
            (java.lang.String) org.apache.jasper.runtime.PageContextImpl.proprietaryEvaluate
                    ("${name}", java.lang.String.class,
                            (javax.servlet.jsp.PageContext)_jspx_page_context,
                            name
                    )
    );

%>


<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>

  <h1>

日期：<%=new Date()%>
名字：<%=name%>
年齡：<%=age%>
i:<%=i++%>
j:<%=j++%>

  </h1>

  </body>
</html>

JSP特殊用法

jsp代碼可以在不同的 <%%>中實作，但是，Java代碼必須保持完成，否則頁面會報500錯誤（伺服器代碼錯誤）；

示例如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>首頁</title>
  </head>
  <body>

  <%--在頁面輸出100個Hello，World--%>

  <%
      for (int i = 0; i < 100; i++) {
  %>
      <h1>Hello,World</h1>
  <%
      }
  %>

 
  </body>
</html>

JSP綜合項目

模拟一個資料庫，在資料庫中有一個新聞表（News），在表中有兩個字段（日期和資訊），完成JSP的綜合運用，項目示例如下：

  1. 模拟資料庫（db） 
package com.kuang.db;

import com.kuang.pojo.News;

import java.util.ArrayList;
import java.util.List;

public class NewsDB {

    public static List<News> list = new ArrayList<News>();

    static {
        list.add(new News("7.16","學習了JSP的使用以及源碼分析"));
        list.add(new News("7.14","學習了Servlet，簡單的JSP的使用"));
        list.add(new News("7.13","學習了Tomcat，Servlet的使用"));
        list.add(new News("7.13","學習了Tomcat，Servlet的使用"));
        list.add(new News("7.13","學習了Tomcat，Servlet的使用"));
        list.add(new News("7.13","學習了Tomcat，Servlet的使用"));
        list.add(new News("7.13","學習了Tomcat，Servlet的使用"));
        list.add(new News("7.13","學習了Tomcat，Servlet的使用"));
    }

}      
package com.kuang.pojo;

//實體類，一般放在pojo包下，【 or  entity  or JavaBeans】
//實體類，隻有屬性，一般用來映射資料庫中的字段  （ O R M ）
//私有屬性 ， 無參構造，有參構造
//get/set方法
//為了友善程式列印，建議加上toString（）；
public class News {

    private String data;
    private String content;

    public News() {
    }

    public News(String data, String content) {
        this.data = data;
        this.content = content;
    }

    public String getData() {
        return data;
    }

    public void setData(String data) {
        this.data = data;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    @Override
    public String toString() {
        return "News{" +
                "data='" + data + '\'' +
                ", content='" + content + '\'' +
                '}';
    }
}
  1. dao層（dao） 
package com.kuang.dao;


//dao包一般用來存放操作資料庫的對象類；

import com.kuang.pojo.News;

import java.util.List;

public interface NewsDao {
    //獲得所有的新聞
    public List<News> getAllNews();

}      
package com.kuang.dao;

import com.kuang.db.NewsDB;
import com.kuang.pojo.News;

import java.util.List;

//NewsDao的實作類
public class NewsDaoImpl implements NewsDao {
    @Override
    public List<News> getAllNews() {
        List<News> list = NewsDB.list;
        return list;
    }

}
  1. service層（service） 
package com.kuang.service;

import com.kuang.pojo.News;

import java.util.List;

//service一般存放業務類
public interface NewsService {
    //獲得所有的新聞
    public List<News> getAllNews();
}      
package com.kuang.service;

import com.kuang.dao.NewsDao;
import com.kuang.dao.NewsDaoImpl;
import com.kuang.pojo.News;

import java.util.List;

public class NewsServiceImpl implements NewsService {

    //從dao層中取出相應的操作資料庫的方法
    NewsDao newsDao = new NewsDaoImpl();

    @Override
    public List<News> getAllNews() {
        return newsDao.getAllNews();
    }
}
  1. servlet（servlet） 
package com.kuang.servlet;

import com.kuang.pojo.News;
import com.kuang.service.NewsService;
import com.kuang.service.NewsServiceImpl;
import org.apache.catalina.Session;
import org.junit.Test;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;

public class NewsServlet extends HttpServlet {

    NewsService newsService = new NewsServiceImpl();

    @Test
    public void test(){


    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //寫代碼讀取資料存到某個地方，讓前端讀取；

        List<News> allNews = newsService.getAllNews();//從業務層去獲得資料中的全部新聞

        int i = 1;

        for (News allNew : allNews) { //周遊獲得每一個新聞

            String data = allNew.getData();
            String content = allNew.getContent();

            //四大作用域
            //      page（不用它，代表目前頁面）
            //      request（一次請求中有效）： 登入注冊
            //      session (一次會話中存在) ： 購物車
            //      application：本質就是Context （全局，所有會話共享） ： 廣告
            //這四個作用域用來存放一些内容或者對象
            HttpSession session = req.getSession();

            session.setAttribute("data"+i,data);
            session.setAttribute("content"+i,content);

            System.out.println(session.getAttribute("data"+i));
            System.out.println(session.getAttribute("content"+i));

            i++;//自增
        }

        //資料都讀取出來了，給你放到session中了，該去通路頁面了
        resp.sendRedirect("index.jsp");

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}
  1. web.xml 
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <servlet>
        <servlet-name>newsServlet</servlet-name>
        <servlet-class>com.kuang.servlet.NewsServlet</servlet-class>
    </servlet>


    <servlet-mapping>
        <servlet-name>newsServlet</servlet-name>
        <url-pattern>/news.do</url-pattern>
    </servlet-mapping>

</web-app>
  1. index.jsp 
<%@ page import="com.kuang.db.NewsDB" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>首頁</title>

  <%--引入css--%>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/layui.css">
  <%--引入靜态資源檔案必須帶上項目路徑位置--%>
  <Script src="${pageContext.request.contextPath}/statics/layui/layui.js"></Script>

</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>正常時間線</legend>
</fieldset>

<ul class="layui-timeline">


<%
  for (int i = 1; i <= NewsDB.list.size(); i++) {
%>

  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">
        <%=request.getSession().getAttribute("data"+i)%>
        <%--${sessionScope.data1}--%>
      </h3>
      <p>
        <%--${sessionScope.content1}--%>
          <%=request.getSession().getAttribute("content"+i)%>
      </p>
    </div>
  </li>

<%
  }
%>


  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">過去</div>
    </div>
  </li>
</ul>


</body>
</html>
jsp java web java html xml
上一篇: JavaWeb學習記錄 Day3（Servlet進階）
下一篇: Android Studio 常見編譯問題一覽

繼續閱讀