web編程教程-jsp入門學習的筆記

課程回顧

會話管理

1）會話管理：管理瀏覽器和服務器之間的會話過程中產生的會話數據

2）Cookie技術：會話數據保存在瀏覽器客戶端。

Cookie核心的API：

2.1 在服務器端創建Cookie對象

Cookeie cookie = new Cookie("name","value");

2.2 把cookie發送給瀏覽器端（通過響應頭：set-cookie）

response.addCookie(cookie);

2.3 瀏覽器帶著cookie信息訪問服務器（通過請求頭：cookie），服務器得到cookie信息

Cookie[] cookies = request.getCookies();

局限：

1）只能保存字符串類型，不能保存中文

2）一個cookie不能超過4kb

3）Session技術：會話數據保存在服務器端。（內存）

Session核心的API：

3.1 創建或得到session對象

HttpSession session = request.getSession(); //創建或得到session對象
request.getSession(false); //得到session對象

3.2 會話數據保存session對象中，和得到會話數據

session.setAttribute("name",Object); 保存數據
session.getAttribute("name") 得到數據

注意：

1）session.setIntactiveInterval(時間); 設置session過期時間

2）session.invalidate() 手動銷毀session對象

2 Session案例

用戶登錄場景

3 編程實戰

通訊錄程序

軟件的生命周期

3.1 需求分析（需求分析師）

功能分析：

1）添加聯系人

2）修改聯系人

3）刪除聯系人

4）查詢所有聯系人

功能流轉

美工設計：設計軟件的靜態原型

3.2 需求設計（系統分析師/架構師/資深開發人員）

1）設計實體（抽象實體）

聯系人實體：

class Contact{
    private String id;
    private String name;
    private String gender;
    private int age;
    private String phone;
    private String email;
    private String qq;
}

2）設計"數據庫"，（xml代替"數據庫"）

contact.xml
<contactList>
<contact id="1">
<name>張三</name>
<gender>男</gender>
<age>20</age>
<phone>13433334444</phone>
<email>zs@qq.com</email>
<qq>43222222<qq>
</contact>
</contactList>

3）設計涉及的接口

DAO接口（數據訪問對象）：實體對象的CRUD方法。

項目原則：通常一個實體對象就會對應一個DAO接口和一個DAO實現類

interface ContactDao{
    public void addContact(Contact contact);//添加聯系人
    public void updateContact(Contact contact);//修改聯系人
    public void deleteContact(String id);//刪除聯系人
    public List<Contact> findAll(); //查詢所有聯系人
    public Contact findById(String id);//根據編號查詢聯系人
}

4）設計項目的目錄結構

項目名稱： contactSys_web

目錄結構：

|- contactSys_web
    |-src
        |-gz.itcast.contactSys_web.entity : 存放實體對象
        |-gz.itcast.contactSys_web.dao : 存放dao的接口
        |-gz.itcast.contactSys_web.dao.impl: 存放dao的實現類
        |-gz.itcast.contactSys_web.servlet: 存放servlet的類
        |-gz.itcast.contactSys_web.test: 存放單元測試類
        |-gz.itcast.contactSys_web.util: 存放工具類
        |-gz.itcast.contactSys_web.exception: 存放自定義異常類
    |-WebRoot
        |-html文件
        |-images：目錄。存放圖片資源
        |-css：目錄。存放css資源
        |-js：目錄。存放js資源

3.3 編碼實現（軟件開發工程師/攻城獅）

開發順序：

設計數據庫-> 實體 -> DAO接口，DAO實現-> Servlet+html頁面

3.4 功能測試（測試攻城獅）

3.5 性能測試（測試攻城獅）

3.6 部署上線（實施攻城獅）

3.7 維護階段（實施攻城獅）

4 Jsp基礎

4.1 Jsp引入

Servlet的作用：用java語言開發動態資源的技術！！！

Jsp的作用：用java語言（+html語言）開發動態資源的技術！！！

Jsp就是servlet！！！

4.2 Jsp的特點

1）jsp的運行必須交給tomcat服務器！！！！

tomcat的work目錄： tomcat服務器存放jsp運行時的臨時文件

2）jsp頁面既可以寫html代碼，也可以寫java代碼。

（html頁面不能寫java代碼。而jsp頁面可以寫java代碼）

4.3 體驗jsp頁面作用

需求：顯示當前時間到瀏覽器上

可以把jsp頁面當做html頁面在tomcat中訪問！！！

4.4 Jsp的執行過程

問題：訪問http://localhost:8080/day12/01.hello.jsp 如何顯示效果？

1）訪問到01.hello.jsp頁面，tomcat掃描到jsp文件，在%tomcat%/work把jsp文件翻譯成java源文件

(01.hello.jsp -> _01_hello_jsp.java) （翻譯）

2）tomcat服務器把java源文件編譯成class字節碼文件（編譯）

（_01_hello_jsp.java -> _01_hello_jsp.class）

3）tomcat服務器構造_01_hello_jsp類對象

4）tomcat服務器調用_01_hello_jsp類里面方法，返回內容顯示到瀏覽器。

第一次訪問jsp：

走（1）（2）（3）（4）

第n次訪問jsp：

走（4）

注意：

1）jsp文件修改了或jsp的臨時文件被刪除了，要重新走翻譯（1）和編譯（2）的過程

4.5 疑問

問題：為什么Jsp就是servlet！！！

jsp翻譯的java文件：

public final class _01_hello_jsp extends org.apache.jasper.runtime.HttpJspBase
implements org.apache.jasper.runtime.JspSourceDependent {

HttpJspBase類：

public abstract class org.apache.jasper.runtime.HttpJspBase extends javax.servlet.http.HttpServlet implements javax.servlet.jsp.HttpJspPage {

結論： Jsp就是一個servlet程序！！！

servlet的技術可以用在jsp程序中

jsp的技術并不是全部適用于servlet程序！

Servlet的生命周期：

1）構造方法（第1次訪問）
2）init方法（第1次訪問）
3）service方法
4）destroy方法

Jsp的生命周期

1）翻譯： jsp->java文件
2）編譯： java文件->class文件（servlet程序）
3）構造方法（第1次訪問）
4）init方法（第1次訪問）：_jspInit()
5）service方法：_jspService()
6）destroy方法：_jspDestroy()

5 Jsp語法

5.1 Jsp模板

jsp頁面中的html代碼就是jsp的模板

5.2 Jsp表達式

語法：<%=變量或表達式%>

作用：向瀏覽器輸出變量的值或表達式計算的結果

注意：

1）表達式的原理就是翻譯成out.print("變量" );通過該方法向瀏覽器寫出內容

2）表達式后面不需要帶分號結束。

5.3 Jsp的腳本

語法：<%java代碼 %>

作用：執行java代碼

注意：

1）原理把腳本中java代碼原封不動拷貝到_jspService方法中執行。

5.4 Jsp的聲明

語法：<%! 變量或方法 %>

作用：聲明jsp的變量或方法

注意:

1）變量翻譯成成員變量，方法翻譯成成員方法。

5.5 Jsp的注釋

語法： <%!-- jsp注釋 --%>

注意;

1)html的注釋會被翻譯和執行。而jsp的注釋不能被翻譯和執行。

6 Jsp的三大指令

6.1 include指令

作用：在當前頁面用于包含其他頁面

語法： <%@include file="common/header.jsp"%>

注意：

1）原理是把被包含的頁面（header.jsp）的內容翻譯到包含頁面(index.jsp)中,合并成翻譯成一個java源文件，再編譯運行！！，這種包含叫靜態包含（源碼包含）

2）如果使用靜態包含，被包含頁面中不需要出現全局的html標簽了！！！（如html、head、body）

6.2 page指令

作用：告訴tomcat服務器如何翻譯jsp文件

<%@ page
language="java" --告訴服務器使用什么動態語言來翻譯jsp文件
import="java.util.*" --告訴服務器java文件使用什么包導入包，多個包之間用逗號分割
pageEncoding="utf-8" --告訴服務器使用什么編碼翻譯jsp文件（成java文件）
contentType="text/html; charset=utf-8" 服務器發送瀏覽器的數據類型和內容編碼
注意：在開發工具中，以后只需要設置pageEncoding即可解決中文亂碼問題
errorPage="error.jsp"
isErrorPage="false"
buffer="8kb"
session="true"
isELIgnored="false"
%>

6.3 taglib指令

總結：

1）編碼實戰：
1.1 servlet應用
1.2 初步了解軟件開發流程
2）Jsp基礎
2.1 Jsp的執行原理（翻譯-》編譯-》servlet的生命周期）
2.2 語法（jsp表達式，jsp腳本）
2.3 指令
include指令
page指令

dmin.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡歷設置</title>
</head>
<body>
<form action="index.jsp" method="get" >
<table>
<tr>
<td>姓名</td>
<td><input type="text" name="username"></td>
</tr>
</table>
<input	type="submit" name="submit" value="提交">
</form>
</body>
</html>

index.jsp

AVA中將WORD轉換為HTML導入到CKEDITOR編輯器中（解決圖片問題，樣式，非常完美），ckeditor粘貼word,ckeditor3粘貼word,ckeditor4粘貼word,ckeditor5粘貼word內容，ckeditor復制word圖片，ckeditor復制粘貼word圖片，ckeditor復制word內容，ckeditor粘貼word圖片，復制word圖片粘貼到ckeditor，

前端用了VUE2,VUE3，React，HTML5，也是一個新項目，為了方便用的這些框架，實際上這個是無所謂，功能的實現和前端這些框架沒什么關系。

后端用了PHP,JSP,ASP,ASP.NET,SpringBoot，功能實現和后端用的什么開發語言無關，后端只提供一個文件上傳的接口，HTTP form協議，圖片上傳時會調這個接口。

編輯器是ckeditor5，為ckeditor編輯器增加粘貼Word圖片的功能，支持快捷鍵操作（Ctrl+V），支持多種系統：Windows,macOS,Linux,信創國產化環境，中標麒麟，銀河麒麟，統信，龍芯。

支持word粘貼，word內容粘貼,word圖文粘貼,word圖片粘貼，粘貼后圖片能夠自動上傳到服務器中，然后將圖片和內容HTML添加到編輯器中，上傳接口地址能夠自定義

用戶使用操作起來更方便一些，一般發新聞，或者發文章用的比較多，基本上每天發新聞，發文章都會用到，

這個功能確實為用戶帶來了方便。

1.1. 集成到CKEditor3.x

主要步驟如下：

1.上傳WordPaster文件夾

一般將WordPaster.cab放在WordPaster目錄下。

2.上傳CKEditor插件目錄

3.引入JS，初始化控件

注意：不要重復引入jquery，如果您的項目已經引入了jq，則不用再引入jq-1.4

如果希望添加到默認工具欄中，請修改ckeditor.js，在toolbar_Full中增加imagepaster,netpaster

為ckeditor增加插件(imagepaster,netpaster,pptpaster,pdfimport)：

注意：

1.如果接口字段名稱不是file，請配置FileFieldName。ueditor接口中使用的upfile字段

參考：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45

2.如果接口返回JSON，請配置ImageMatch

參考：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

3.如果接口返回的圖片地址沒有域名，請配置ImageUrl

參考：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
4.如果接口有權限驗證（登陸驗證，SESSION驗證），請配置COOKIE。或取消權限驗證。
參考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

常見問題：

1.為什么整合到項目中圖片無法上傳？
請先測試接口：http://www.ncmem.com/doc/view.aspx?id=61f361025c9247098f6a15c3dfc53db5

在線咨詢

上一篇：HTML 屬性
下一篇：網頁上的內容無法復制，這幾招輕松秒殺

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商