整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
jsp是一種基于文本的程序，全名java server page,其特點是html和java程序共存。執行時jsp會被運行容器編譯，編譯后的jsp跟servlet一樣，因此jsp是另一種形式的servlet。
jsp 頁面包括以下內容：
靜態內容
指令
表達式
小腳本
聲明
注釋
1.指令：
page指令： 通常位于jsp頁面的頂端，同一個頁面可以有多個page指令。
include指令：將一個外部文件嵌入到jsp文件中。
taglib指令 ：使用標簽定義新的自定義標簽。
1.1其中page指令語法：
<%@ page 屬性=“屬性值”>
| 屬性 | 默認值 |
|---|---|
| language | java |
| import | “” |
1.2 include 指令
<%@ include file="url" %>
1.3 動作
include動作
<jsp:include page="url" flush="true"/>
include 動作和include指令區別
描述 | include指令 | include 動作
--- | --- | ---
語法 | < % @ include file=""/> | < jsp:include page="url" flush="true"/>
發生時間 | 頁面轉換期間 | 請求期間
包含內容 | 文件實際內容 | 頁面的輸出
轉化servlet | 一個servlet | 2個servlet
編譯時間 | 較慢 | 較快
執行時間 | 稍快 |較慢--每次資源必須被編譯
forward動作
<jsp:forward page="url"/>
==request.getRequestDispatcher("/url").forward(res,resp);
param動作
<jsp:param name="參數名" value="參數值"/>常常與<jsp:forward>一起使用
例子：
<jsp:forward page="user.jsp">
<jsp:param name="email" value="1233@154.com"/></jsp:forward>
2.jsp注釋
html注釋
<!-- html注釋 -->//客戶端可見
jsp 注釋
<%-- jsp注釋 --%>//客戶端不可見
jsp 腳本注釋 //客戶端不可見
//單行注射
／** 多行注釋*／
3.jsp腳本
在jsp頁面中執行的java代碼，語法：
<% java 代碼 %>
4.jsp聲明
在jsp頁面定義變量或者方法，語法
<%! java 代碼 %>
舉例：
<%!
String s="adele"; int add(int x,int y){ return x+y;
}
%>
5.jsp表達式
在jsp頁面執行的表達式，語法：
<% =表達式 %>// 表達式不以分號結尾
舉例：
<%!
String s="adele";%><h2> hello,<%=s %> </h2>
CC36B22A-503E-4C29-98BB-3B58038C140E.png
jspService()是用來處理客戶端請求的，對于每一個請求，服務器會創建一個新的線程來處理該請求。以多線程方式執行大大降低對系統的資源需求，提高系統的并發量和縮短了響應時間，servlet是常駐在服務器內存中。
它同servlet 一樣，jsp 實例初始化和銷毀也會調用sevlet的init() 和destroy();
另外jsp還有自己的初始化方法_jspInit();_jspDestroy();
<%@ page language="java" contentType="text/html";charset="utf-8">
<%!
public void _jspInit(){
}public void _jspDestroy(){
}
%>
動作元素：
動作元素為請求處理階段提供信息。
Paste_Image.png
在jsp頁面使用javaben
像普通的java類一樣，創建javabean;
在jsp使用動作標簽來使用 javaben
相關標簽如下：
<jsp:useBwan id="" class="" scope="" />
<jsp:setProperty name="javabean 是例" property="*"/>(跟表單關聯)
<jsp:setProperty name="javabean 是例" property="javaben 屬性名"/>(跟表單關聯)
<jsp:setProperty name="javabean 是例" property="javaben 屬性名" value=""/>(手動設置)
<jsp:setProperty name="javabean 是例" property="javaben 屬性名" param="request對象參數"/>(跟request參數關聯)
<jsp:getProperty name="" property=""/>
舉個例子：
首先用戶 在login.jsp提交表單，然后用戶在dologin.jsp 根據動作標簽獲取參數。
login.jsp
<form name="loginForm" action="dologin.jsp?mypass=999999" method="post">
<table>
<tr>
<td>用戶名：</td>
<td><input type="text" name="username" value=""/></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" name="password" value=""/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="登錄"/></td>
</tr>
</table>
</form>
dologin.jsp
<body>
<jsp:useBean id="myUsers" class="com.po.Users" scope="page"/>
<h1>setProperty動作元素</h1>
<hr>
<!--根據表單自動匹配所有的屬性 -->
<%--
<jsp:setProperty name="myUsers" property="*"/>
--%>
<!--根據表單匹配所有部分的屬性 -->
<%--
<jsp:setProperty name="myUsers" property="username"/>
--%>
<!--根表單無關，通過手工賦值給屬性 -->
<%--
<jsp:setProperty name="myUsers" property="username" value="lisi"/>
<jsp:setProperty name="myUsers" property="password" value="888888"/>
--%>
<!--通過URL傳參數給屬性賦值 -->
<jsp:setProperty name="myUsers" property="username"/>
<jsp:setProperty name="myUsers" property="password" param="mypass"/>
<!-- 使用傳統的表達式方式來獲取用戶名和密碼 -->
<%--
用戶名：<%=myUsers.getUsername() %><br>
密碼：<%=myUsers.getPassword() %><br>
--%> <!-- 使用getProperty方式來獲取用戶名和密碼 -->
用戶名：<jsp:getProperty name="myUsers" property="username"/> <br>
密碼：<jsp:getProperty name="myUsers" property="password"/><br>
<br>
<br>
<a href="testScope.jsp">測試javabean的四個作用域范圍</a>
<%
request.getRequestDispatcher("testScope.jsp").forward(request, response); %>
</body>
javaben 四大作用域
page ，僅當前頁面有效
request ,通過httpRequest.getAttribute()獲取jvabean對象
session ,通過httpSession.getAttribute() 獲取javabean對象
application，通過application.getAttribute方法獲取javabean 對象。
1.概述：
由于http協議的無狀態，無法保存用戶的狀態，所以需要用session和cookie.
cookie 是web服務器保存在客戶端的一系列文本信息。它的作用時記錄一些用戶的行為，簡化登陸，但是容易泄露用戶信息。
2.jsp創建和使用cookie
創建cookie
Cookie cookie=new Cookie(String ,Object);
寫入cookie
response.addCookie(cookie);
讀取 cookie
Cookie[] cookies=request.getCookies();
3.cookie的常用方法
setMaxAge();
setValue();
getName();
getValue();
getMaxAge();
舉個列子： 使用cookie記住用戶登陸的賬號密碼；
登陸界面：
<body>
<h1>用戶登錄</h1>
<hr>
<%
request.setCharacterEncoding("utf-8");
String username="";
String password = "";
Cookie[] cookies = request.getCookies(); if(cookies!=null&&cookies.length>0)
{ for(Cookie c:cookies)
{ if(c.getName().equals("username"))
{
username = URLDecoder.decode(c.getValue(),"utf-8");
} if(c.getName().equals("password"))
{
password = URLDecoder.decode(c.getValue(),"utf-8");
}
}
} %>
<form name="loginForm" action="dologin.jsp" method="post">
<table>
<tr>
<td>用戶名：</td>
<td><input type="text" name="username" value="<%=username %>"/></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" name="password" value="<%=password %>" /></td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" name="isUseCookie" checked="checked"/>十天內記住我的登錄狀態</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="登錄"/><input type="reset" value="取消"/></td>
</tr>
</table>
</form>
</body>
處理登陸邏輯的jsp
<body>
<h1>登錄成功</h1>
<hr>
<br>
<br>
<br>
<%
request.setCharacterEncoding("utf-8"); //首先判斷用戶是否選擇了記住登錄狀態
String[] isUseCookies = request.getParameterValues("isUseCookie"); if(isUseCookies!=null&&isUseCookies.length>0)
{ //把用戶名和密碼保存在Cookie對象里面
String username = URLEncoder.encode(request.getParameter("username"),"utf-8"); //使用URLEncoder解決無法在Cookie當中保存中文字符串問題
String password = URLEncoder.encode(request.getParameter("password"),"utf-8");
Cookie usernameCookie = new Cookie("username",username);
Cookie passwordCookie = new Cookie("password",password);
usernameCookie.setMaxAge(864000);
passwordCookie.setMaxAge(864000);//設置最大生存期限為10天
response.addCookie(usernameCookie);
response.addCookie(passwordCookie);
} else
{
Cookie[] cookies = request.getCookies(); if(cookies!=null&&cookies.length>0)
{ for(Cookie c:cookies)
{ if(c.getName().equals("username")||c.getName().equals("password"))
{
c.setMaxAge(0); //設置Cookie失效
response.addCookie(c); //重新保存。
}
}
}
} %>
<a href="users.jsp" target="_blank">查看用戶信息</a>
</body>
使用cookie獲取用戶信息：
<body>
<h1>用戶信息</h1>
<hr>
<%
request.setCharacterEncoding("utf-8");
String username="";
String password = "";
Cookie[] cookies = request.getCookies(); if(cookies!=null&&cookies.length>0)
{ for(Cookie c:cookies)
{ if(c.getName().equals("username"))
{
username = URLDecoder.decode(c.getValue(),"utf-8");
} if(c.getName().equals("password"))
{
password = URLDecoder.decode(c.getValue(),"utf-8");
}
}
} %>
<BR>
<BR>
<BR>
用戶名：<%=username %><br>
密碼：<%=password %><br>
</body>
3.cookie和 session的區別
| session | cookie |
|---|---|
| 在服務端保存信息 | 在客戶端保存信息 |
| 保存的 object類型 | 保存的是 string 類型 |
| 隨會話結束，銷毀數據 | 可以長期保存在客戶端中 |
| 重要信息 | 不重要信息 |
SP：Java Server Pages。JSP是一種網頁的編碼格式,不同于HTML的是JSP中是由 HTML中的標簽指令 和 Java邏輯代碼 拼湊而成, 其中的Java代碼類似于JavaScript中的邏輯代碼, 但相對比來說JSP中的Java代碼更方便閱讀和書寫.
當JSP頁面被運行時,WEB容器會把請求交給JSP引擎處理,會將JSP翻譯成一個_jspServlet,然后按照Servlet的調用方式來進行調用,
瀏覽器向服務器發請求，不管訪問的是什么資源，其實都是在訪問Servlet，所以當訪問一個jsp頁面時，其實也是在訪問一個Servlet，服務器在執行jsp的時候，首先把jsp翻譯成一個Servlet，所以我們訪問jsp時，其實不是在訪問jsp，而是在訪問jsp翻譯過后的那個Servlet,
Tomcat在Web中的作用:
Tomcat是Web中的容器,
當客戶在Web服務器中輸入請求的時候, 如果請求的動態頁面, 那么Web服務器會創建一個Servlet來處理, Servlet就是Java代碼, 只是在服務器端的Java代碼, Servlet通過配置文件來攔截客戶所發出的請求, 并進行相應的處理, 最后反饋到客戶端.
在這一系列的請求中,Web服務器是如何創建出Servlet來對請求進行處理? 而Tomcat的作用就是幫助Web服務器來創建Servlet的
Tomcat是應用(java)服務器,它只是一個Servlet容器,是Apache的擴展,處理動態頁面的部分
Tomcat各個文件夾的含義
當我們通過瀏覽器訪問index.jsp時，服務器首先將index.jsp翻譯成一個index_jsp.class，在Tomcat服務的work\Catalina\localhost\項目名\org\apache\jsp 目錄下可以看到index_jsp.class的源代碼文件index_jsp.java，
index_jsp這個類是繼承 org.apache.jasper.runtime.HttpJspBase這個類的，通過查看Tomcat服務器的源代碼，可以知道在apache-tomcat-6.0.20-src\java\org\apache\jasper\runtime目錄下存HttpJspBase這個類的源代碼文件
HttpJspBase 類是繼承 HttpServlet 的，所以 HttpJspBase 類是一個 Servlet ，而 index_jsp 又是繼承 HttpJspBase類的，所以index_jsp類也是一個Servlet，所以當瀏覽器訪問服務器上的index.jsp頁面時，其實就是在訪問index_jsp這個Servlet，index_jsp這個Servlet使用_jspService這個方法處理請求。
1:jsp中的代碼是由 Java代碼 和 HTML 代碼組成的 但是兩種不同的代碼是如何實現他們的作用的?
在客戶端發出請求時(請求的是動態代碼) 但是客戶端卻只能看到HTML代碼, Java代碼是客戶端看不到的
原因是: 請求的JSP頁面中,所有的代碼是通過了Web服務器(在Tomcat下)編譯后的Servlet代碼, 在jsp中編寫的java代碼和html代碼都會被翻譯到_jspService方法中去,在jsp中編寫的java代碼會原封不動地翻譯成java代碼，如<%out.print("HelloJsp");%>直接翻譯成out.print("Hello Jsp");，而HTML代碼則會翻譯成使用out.write("<html標簽>\r\n");的形式輸出到瀏覽器。在jsp頁面中編寫的html排版標簽都是以out.write("<html標簽>\r\n");的形式輸出到瀏覽器，瀏覽器拿到html代碼后才能夠解析執行html代碼。
當執行_jspService方法處理請求時，就會執行在jsp編寫的java代碼了，所以Jsp頁面中的java代碼服務器是通過調用_jspService方法處理請求時執行的。(_jspService中的Java代碼是實現動態頁面的邏輯基礎)
我們的開發工程中經常會使用到各種圖，所謂的圖就是由節點和節點之間的連接所形成的系統，數學上專門有一個分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導圖，流程圖，狀態機，組織架構圖，等等。今天我要做的是用開源的HTML5工具來快速構造一個做圖的工具。
工預善其事，必先利其器。第一件事是選擇一件合適的工具，開源時代，程序員還是很幸福的，選擇很多。
最終，我選擇了jsPlumb，因為它完全開源，使用很簡單，用D3的話可能會多花很多功夫。joint.js也不錯。大家可以根據自己的需要選擇。
下面我們一步一步的來使用jsPlumb來創建我們的流程圖工具。
第一步是等待DOM和jsPlumb初始化完畢，類似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代碼放在這個函數里：
jsPlumb.ready(function()?{
????//?...?your?code?goes?here?...
}創建一個jsPlumb的實例，并初始化jsPlumb的配置參數：
//Initialize?JsPlumb
var?color?=?"#E8C870";
var?instance?=?jsPlumb.getInstance({
????//?notice?the?'curviness'?argument?to?this?Bezier?curve.??the?curves?on?this?page?are?far?smoother
????//?than?the?curves?on?the?first?demo,?which?use?the?default?curviness?value.??????
????Connector?:?[?"Bezier",?{?curviness:50?}?],
????DragOptions?:?{?cursor:?"pointer",?zIndex:2000?},
????PaintStyle?:?{?strokeStyle:color,?lineWidth:2?},
????EndpointStyle?:?{?radius:5,?fillStyle:color?},
????HoverPaintStyle?:?{strokeStyle:"#7073EB"?},
????EndpointHoverStyle?:?{fillStyle:"#7073EB"?},
????Container:"container-id"
?});這里給給出了一些配置包括，連接線（這里配置了一個貝塞爾曲線），線的風格，連接點得風格。Container需要配置一個對應的DIV容器的id。（這里也可以使用setContainer的方法）
下面我們要創建一個節點（node），每一個節點可以用一個DIV來實現。我這里提供了一個函數來創建節點。
function?addNode(parentId,?nodeId,?nodeLable,?position)?{
??var?panel?=?d3.select("#"?+?parentId);
??panel.append('div').style('width','120px').style('height','50px')
????.style('position','absolute')
????.style('top',position.y).style('left',position.x)
????.style('border','2px?#9DFFCA?solid').attr('align','center')
????.attr('id',nodeId).classed('node',true)
????.text(nodeLable);
??return?jsPlumb.getSelector('#'?+?nodeId)[0];
}這里做的事情就是創建了一個DIV元素，并放在對應的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。
我使用D3來操作DOM，大家可能會更習慣JQuery，這純屬個人喜好的問題。
最后返回創建節點的實例引用，這是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一樣的，這樣用的好處是你可以使用不同的DOM操作庫，例如Vanilla
下面我使用一個函數來創建端點/錨點（anchor），錨點就是節點上的連接點，用于連接不同的節點。
function?addPorts(instance,?node,?ports,?type)?{
??//Assume?horizental?layout
??var?number_of_ports?=?ports.length;
??var?i?=?0;
??var?height?=?$(node).height();??//Note,?jquery?does?not?include?border?for?height
??var?y_offset?=?1?/?(?number_of_ports?+?1);
??var?y?=?0;
??for?(?;?i?<?number_of_ports;?i++?)?{
????var?anchor?=?[0,0,0,0];
????var?paintStyle?=?{?radius:5,?fillStyle:'#FF8891'?};
????var?isSource?=?false,?isTarget?=?false;
????if?(?type?===?'output'?)?{
??????anchor[0]?=?1;
??????paintStyle.fillStyle?=?'#D4FFD6';
??????isSource?=?true;
????}?else?{
??????isTarget?=true;
????}
????anchor[1]?=?y?+?y_offset;
????y?=?anchor[1];
????instance.addEndpoint(node,?{
??????uuid:node.getAttribute("id")?+?"-"?+?ports[i],
??????paintStyle:?paintStyle,
??????anchor:anchor,
??????maxConnections:-1,
??????isSource:isSource,
??????isTarget:isTarget
????});
??}
}instance是jsPlumb的實例
node是我們用addNode方法創建的Node實例
ports，是一個string的數組，指定端點的個數和名字
type，可能是output或者input，指定端點的種類，一個節點的輸出端口可以連接另一個節點的輸入端口。
這里anchor是一個四維數組，0維和1維分別是錨點在節點x軸和y軸的偏移百分比。我這里希望把端口畫在節點的左右兩側，并按照端口的數量均勻分布。
最后使用instance.addEndpoint來創建端點。注意這里只要指定isSource和isTarget就可以用drag&drop的方式來連接端點，非常方便。
下面一步我們提供一個函數來連接端點：
function?connectPorts(instance,?node1,?port1,?node2?,?port2)?{
??//?declare?some?common?values:
??var?color?=?"gray";
??var?arrowCommon?=?{?foldback:0.8,?fillStyle:color,?width:5?},
??//?use?three-arg?spec?to?create?two?different?arrows?with?the?common?values:
??overlays?=?[
????[?"Arrow",?{?location:0.8?},?arrowCommon?],
????[?"Arrow",?{?location:0.2,?direction:-1?},?arrowCommon?]
??];
??var?uuid_source?=?node1.getAttribute("id")?+?"-"?+?port1;
??var?uuid_target?=?node2.getAttribute("id")?+?"-"?+?port2;
??instance.connect({uuids:[uuid_source,?uuid_target]});
}node1和node2是源節點和目標節點的引用，port1和port2是源端口和目標端口的名字。
使用instance.connect方法來創建連接。 overlays用來添加連接線的箭頭效果或者其他風格，我這里沒有使用，因為覺得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法參數就可以了。
調用以上方法來創建節點，端點和連接線。
var?node1?=?addNode('container-id','node1',?'node1',?{x:'80px',y:'20px'});
var?node2?=?addNode('container-id','node2',?'node2',?{x:'280px',y:'20px'});
addPorts(instance,?node1,?['out1','out2'],'output');
addPorts(instance,?node2,?['in','in1','in2'],'input');
connectPorts(instance,?node1,?'out2',?node2,?'in');這里我們創建了兩個節點，第一個節點有兩個輸出端口，第二個節點有三個輸入端口，然后把第一個節點的out2端口連接到第二個端點的in端口。效果如下：
最后我們給節點增加drag&drop的功能，這樣我們就可以拖動這些節點來改變圖的布局了。
instance.draggable($('.node'));這里似乎依賴于JQuery-UI,我還不是很清楚。
我們已經初步具有了創建圖的功能，可是節點的創建必須通過程序，我們希望用交互的方式來創建節點。
通常我們希望有一個tree view的控件，讓后通過拖拽來創建對應類型的節點。這里我使用了這個開源的tree view，基于bootstrap https://github.com/jonmiles/bootstrap-treeview
我們先創建一個tree view：
function?getTreeData()?{
??var?tree?=?[
????{
??????text:?"Nodes",
??????nodes:?[
????????{
??????????text:?"Node1",
????????},
????????{
??????????text:?"Node2"
????????}
??????]
????}
??];?
??return?tree;
}
//Initialize?Control?Tree?View
$('#control-panel').treeview({data:?getTreeData()});樹上有兩個節點:
然后我實現從樹上拖拽對應的節點，到流程圖上的邏輯。
//Handle?drag?and?drop
$('.list-group-item').attr('draggable','true').on('dragstart',?function(ev){
??//ev.dataTransfer.setData("text",?ev.target.id);
??ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
??console.log('drag?start');
});
$('#container-id').on('drop',?function(ev){
??//avoid?event?conlict?for?jsPlumb
??if?(ev.target.className.indexOf('_jsPlumb')?>=?0?)?{
????return;
??}
??ev.preventDefault();
??var?mx?=?''?+?ev.originalEvent.offsetX?+?'px';
??var?my?=?''?+?ev.originalEvent.offsetY?+?'px';
??console.log('on?drop?:?'?+?ev.originalEvent.dataTransfer.getData('text'));
??var?uid?=?new?Date().getTime();
??var?node?=?addNode('flow-panel','node'?+?uid,?'node',?{x:mx,y:my});
??addPorts(instance,?node,?['out'],'output');
??addPorts(instance,?node,?['in1','in2'],'input');
??instance.draggable($(node));
}).on('dragover',?function(ev){
??ev.preventDefault();
??console.log('on?drag?over');
});這里要注意的是要避免和jsPlumb拖拽端點的邏輯沖突，當檢測到target是jsPlumb對象是需要直接從drop方法中退出以執行對應的jsPlumb的drop邏輯。
好了，一個繪制流程圖的軟件工具初步完工。
我把代碼放在oschina的代碼托管服務上了， 大家有興趣可以去試試。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
