AJAX起步，入門教材:Google Web Toolkit 入門

原創 thefirstwind 2020-02-23 23:29

如何開始學習AJAX，這個問題不僅是一直困擾着大家而且也是我一直在考慮的問題。經過多方面的調查發現google提供的Google Web Toolkit 工具非常適合入門選手的學習。

這裏推薦先看看IBM的教材非常棒http://www-128.ibm.com/developerworks/cn/java/j-lo-gwt-intro/index.html 
也不用我廢話了，看完就可以進行進一步的學習了。

以下是轉載

面向 Java 開發人員的 Ajax: Google Web Toolkit 入門

  

級別: 初級

肖 菁, 唯 J 族創始人

2006 年 7 月 03 日

Ajax 被用於創建更加動態和交互性更好的 Web 應用程序。Google Web Toolkit (簡稱GWT) 是 Google 推出的 Ajax 應用開發包，GWT 支持開發者使用Java 語言開發 Ajax 應用。本文中作者將介紹如何使用 GWT 開發 Ajax 應用的基本方法和步驟。

 

Ajax是 Asynchronous JavaScript and XML（以及 DHTML 等）的縮寫，由XHTML、CSS、JavaScript、XMLHttpRequest、XML等技術組合而成，是當前Web應用開發領域的熱門技術，用於創建更加動態和交互性更好的Web應用程序，提升用戶的瀏覽體驗。

Ajax的核心是JavaScript對象XmlHttpRequest。XmlHttpRequest處理所有服務器通信的對象，是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務器提出請求並處理響應，而不阻塞用戶。

Ajax並不是本文的中心關注點，因此這裏不再贅述，請大家訪問參考資源區的相關鏈接，瞭解更多關於Ajax技術和應用方面的知識。

 

衆所周知，即使對於Ajax技術非常熟悉的開發者而言，Ajax應用的開發和調試過程也不是一件容易的事情，更困難的是，到目前爲止，一直沒有出現合適的開發工具能夠支持Ajax應用的開發和調試。

與此相反的是，Java語言--企業應用開發的主流語言-的開發和調試過程卻因爲有各種各樣開發工具的支持而簡單的多，而且這樣的開發工具我們可以免費獲得，比如Eclipse、NetBeans。

如果能夠應用Java語言開發Ajax，Ajax應用開發的最大難題-開發工具的缺失-就將迎刃而解。這種情況下，我們就可以既充分利用Java語言的開發優勢降低Ajax應用開發的難度，加快Ajax應用的開發速度，爲Ajax的大規模應用創造可能，又可以充分發揮Ajax技術的優勢，創建更加動態和交互性更好的Web應用程序，提升用戶的瀏覽體驗。

Google Web Toolkit(簡稱GWT)的出現爲我們提供了這種可能。GWT是Google推出的Ajax應用開發包，支持開發者使用Java語言開發Ajax應用。GWT框架本身是開源的，但是GWT中的開發工具僅僅提供開發用License，不允許分發。

GWT提供了一組基於Java語言的開發包，這個開發包的設計參考Java AWT包設計，類命名規則、接口設計、事件監聽等都和AWT非常類似。熟悉Java AWT的開發者不需要花費多大的力氣就能夠快速的理解GWT開發工具包，將更多地時間投入到GWT應用的開發過程中。

開發出來的Java應用將由GWT開發包提供的編譯工具編譯後聲生成對應的、應用了Ajax技術的Web應用，Java應用中出現的、和服務器之間的交互動作被自動生成的異步調用代碼所代替。


 

GWT除了支持將應用Java語言開發的應用轉化爲Ajax應用，同時提供了更多的高級特性，下面是這些特性的簡單描述。

1. GWT編譯器

GWT編譯器是GWT的核心，負責完成將Java代碼翻譯很Ajax內容的工作。GWT編譯器能夠翻譯Java語言的大部分特性。包括支持Java語言中的基本類型、違例處理等，支持java.lang包和java.util包中的絕大部分類和接口，支持正則表達式和序列化。

2. 跨平臺支持

如果你使用GWT中提供的顯示組件(比如Button)和組裝組件(比如VerticalPanel)，GWT編譯生成的Ajax應用能夠支持大部分的瀏覽器和操作系統，比如Internet Explorer、Firefox等，也能夠支持Linux、Windows等不同操作系統。這是因爲GWT最大限度的將這些控件翻譯成瀏覽器內置的類型。比如Button類編譯後生成的是標準HTML：<input type="button">。

GWT建議使用CSS修飾頁面元素的顯示效果。GWT的類中很少提供訪問頁面元素樣式屬性的方法，我們可以直接在CSS文件中通過對應的樣式名稱來設置頁面元素的默認顯示效果。比如使用 .gwt-Button { font-size: 150%; } 使用Button元素的默認顯示效果。

3. 宿主模式(Hosted Mode)

宿主模式是指我們和沒有轉換爲Ajax應用的GWT應用交互的狀態。當我們開發和調試時，我們就一直處在宿主模式下。在這種情況下，Java虛擬機使用GWT內置的瀏覽器運行GWT應用編譯後的class內容，因此能夠提供"編碼、測試、調試"過程的最佳速度。

我們可以運行com.google.gwt.dev.GWTShell啓動宿主模式。

4. Web模式(Web Mode)

Web模式是指已經成功轉化爲Ajax應用的狀態，這種狀態下，我們已經開始通過Web方式來訪問Ajax應用了。

在Web模式下運行時，不再需要GWT工具包或者JVM的支持。

5. 命令行工具

GWT工具包中提供了幾個非常適用的小工具來幫助我們更快的建立GWT應用開發環境：projectCreator、applicationCreator、junitCreator。

  • projectCreator
    創建在Eclipse中開發GWT應用所需要的項目基本文件和可選的Ant buildfile文件。
  • applicationCreator
    applicationCreator命令用於創建基本的HelloWorld！應用和GWT應用開發環境。
  • junitCreator
    生成junti測試代碼。

通過上面的內容，我們已經瞭解了GWT工具集工作的基本原理和主要特性。有些迫不及待了吧，那麼就請隨我一起進入GWT應用開發的過程吧，享受應用Java語言開發Ajax應用帶來的簡單和便利。

本文中所有的環境準備、實例開發和說明均針對Windows操作平臺，如果使用其他的操作系統，請根據實際情況進行適當的調整。


 

1、 下載和安裝JDK1.4.X

GWT工具包的編譯需要JDK支持，因此在安裝GWT工具包之前請下載和安裝合適的JDK。GWT工具支持Java語言1.4版本或者以下版本，因此JDK版本選擇JDK1.4.X是比較合適的，不需要採用最新的JDK5.0或者更高版本。

請訪問java.sun.com網站上下載安裝版本，下載後安裝到C:/jdk目錄下，本書中的後續內容中將使用%JAVA_HOME%變量來引用這個目錄。

您可以根據實際情況將JDK安裝到任意目錄下。但是在運行本文中例子的時候，請記住將對應的%JAVA_HOME%變量替換爲您的實際安裝目錄。

2、 下載和安裝GWT

請訪問http://code.google.com/webtoolkit/下載GWT的最新版本，將下載的壓縮文件解壓縮到C:/GWT目錄下。本書中的後續內容中將使用%GWT_HOME%變量來引用這個目錄。

GWT工具包支持不同的操作系統，請根據自己的操作系統選擇合適的安裝包。

您可以根據實際情況將GWT安裝到任意目錄下。但是在運行本文中例子的時候，請記住將對應的%GWT_HOME%變量替換爲您的實際安裝目錄。


 

下面的內容中我們將介紹如何使用GWT工具集來完成第一個GWT的例子-"Hello World！"，並且將使用GWT編譯及將他轉化爲Ajax應用，在瀏覽器中完成測試。

我們要完成的例子要實現的功能包括：

1、 在頁面上顯示一個按鈕

2、 點擊該按鈕，默認情況下，我們將在按鈕後面緊跟着顯示字符串"Hello World!"。

3、 如果點擊按鈕時，"Hello World!"字符串已經顯示在瀏覽器中，我們要將他隱藏起來。我們現在開始使用GWT工具集完成"Hello World！"例子的開發，下面的步驟是完成"Hello World！"例子開發環境配置、應用開發、編譯的基本步驟，同樣適用於其他GWT應用的開發，只是根據實際情況可能有增減。

1、 創建GWT應用開發環境

從上面的GWT特性部分我們知道，GWT工具包中提供的applicationCreator命令行工具可以幫助我們創建GWT應用開發所需要的環境，因此我們可以直接使用applicationCreator幫助我們完成這項工作。

打開命令行工具，進入C:/根目錄下，執行"mkdi"命令創建新的文件目錄HelloWorld。


C:/> mkdir HelloWorld

執行下面的命令將%JAVA_HOME%/bin目錄和%GWT_HOME%目錄加入到PATH路徑中。


C:/>set path=%JAVA_HOME%/bin;%GWT_HOME%

請將命令行中的%JAVA_HOME%替換爲實際環境中JDK的安裝目錄，將%GWT_HOME%替換爲GWT工具包的安裝目錄。

進入新創建的HelloWorld目錄，然後運行applicationCreator命令創建GWT應用開發環境。

applicationCreator.cmd命令支持的語法如下。

ApplicationCreator [-eclipse projectName] [-out dir] [-overwrite] [-ignore] className 其中最重要的一個參數是classname，也就是我們創建的GWT應用中的主Java類，我們這裏選擇使用org.vivianj.gwt.client.HelloWorld。


C:/HelloWorld>applicationCreator.cmd org.vivianj.gwt.client.HelloWorld

根據GWT工具包的默認規則，GWT應用中的主Java類報名的最後一段必須是client。也就是說，只有xxx.client.Xxxx這樣命名的Java類才能被識別爲正確的GWT應用主類。

ApplicationCreator工具運行的時候，屏幕上會打印如下內容。


Created directory C:/HelloWorld/src
Created directory C:/HelloWorld/src/org/vivianj/gwt
Created directory C:/HelloWorld/src/org/vivianj/gwt/client
Created directory C:/HelloWorld/src/org/vivianj/gwt/public
Created file C:/HelloWorld/src/org/vivianj/gwt/HelloWorld.gwt.xml
Created file C:/HelloWorld/src/org/vivianj/gwt/public/HelloWorld.html
Created file C:/HelloWorld/src/org/vivianj/gwt/client/HelloWorld.java
Created file C:/HelloWorld/HelloWorld-shell.cmd
Created file C:/HelloWorld/HelloWorld-compile.cmd

2、 開發"Hello World！"例子

使用ApplicationCreator工具的時候，ApplicationCreator工具其實已經幫我們生成了符合Hello World!例子要求的全部內容。爲了不打斷第一個例子的演示過程，我們先簡單的瞭解一下ApplicationCreator工具的生成內容。我們將在將在測試過程後面做出更加詳細的分析。

圖1中顯示了ApplicationCreator工具執行後生成的目錄結構。


圖1 GWT應用開發環境

圖1中的src/org/vivianj/gwt/client目錄中的HelloWorld.java是GWT應用的主類；src/org/vivianj/gwt/public目錄中的HelloWorld.html文件是例子的默認頁面；src/org/vivianj/gwt目錄下的HelloWorld.gwt.xml是GWT應用的配置文件，提供GWT應用中頁面和主類的配置信息；根目錄下的HelloWorld-compile.cmd文件用於提供將該GWT應用編譯成Ajax的命令；根目錄下的HelloWorld-shell.cmd文件用於啓動宿主模式(Hosted Mode)，方便測試GWT應用。

3、 在宿主模式下啓動"Hello World！"例子

我們可以直接在命令行中執行HelloWorld-shell.cmd來啓動宿主模式(Hosted Mode)，運行新創建的"Hello World！"例子。


C:/HelloWorld>HelloWorld-shell.cmd

這個命令將啓動兩個可視化界面：Google Web Toolkit Development Shell（見圖2）和GWT內置的GWT應用瀏覽器（見圖3），GWT應用瀏覽器中將顯示"Hello World！"例子的初始界面，如果我們點擊界面上的"Click Me"按鈕，按鈕後面將會顯示"Hello World!"字符串（見圖4），如果再次單擊頁面上的"Click Me"按鈕，按鈕後面的"Hello World！"字符串會消失。



圖2 Google Web Toolkit Development Shell運行界面 


圖3 Hello World！例子初始運行界面

圖4 "Hello World！"例子-單擊"Clieck Me"按鈕後的界面
圖4 Hello World！例子-單擊Clieck Me按鈕後的界面

4、 編譯"Hello World！"例子

要將GWT應用編譯成Ajax應用，我們可以執行HelloWorld-compile.cmd。


C:/HelloWorld>HelloWorld-compile.cmd

命令運行時，界面上將會顯示下面的內容。


Output will be written into C:/HelloWorld/www/org.vivianj.gwt.HelloWorld
Copying all files found on public path
Compilation succeeded

其中的第一行顯示生成的Ajax應用位於C:/HelloWorld/www/org.vivianj.gwt.HelloWorld目錄下。



圖5 Hello World！例子編譯後的目錄結構

從上面的圖中我們可以看到，新生成的www目錄下有一個名爲org.vivianj.gwt.HelloWorld的目錄，它的命名規則是GWT主類全名(org.vivianj.gwt.client.HelloWorld)去掉其中的"client."。

org.vivianj.gwt.HelloWorld目錄下的HelloWorld.html文件就是"Hello World！"例子對應的頁面，以.cache.html後綴結尾的文件就是"Hello World！"例子中對應的Ajax代碼部分，而gwt.js文件則是GWT提供的、Ajax代碼中需要用到的JavaScript公共函數。其他還有些輔助文件。

5、 Web模式下測試"Hello World！"例子

運行HelloWorld-compile.cmd後，GWT應用就已經被編譯成Ajax應用了，不再依賴於JDK和GWT環境，而僅僅依賴於瀏覽器。

我們打開IE瀏覽器，打開C:/HelloWorld/www/org.vivianj.gwt.HelloWorld/HelloWorld.html文件，就可以看到"Hello World！"例子在Web模式下的運行效果（見圖6），單擊頁面上的"Click Me"按鈕，按鈕後面會出現"Hello World！"字符串（見圖7），如果再次單擊頁面上的"Click Me"按鈕，按鈕後面的"Hello World！"字符串會消失。



圖6 Web模式下運行 HelloWorld！例子的默認效果 


圖7 Web模式下運行 HelloWorld！例子-單擊 Click Me按鈕後的效果


 

上面的步驟中，我們已經完成第一個GWT應用的編譯和測試，下面我們來詳細的介紹一下GWT應用開發過程中涉及的幾個文件：顯示頁面HelloWorld.html、主類HelloWorld和配置文件HelloWorld.gwt.xml。

1. 顯示頁面HelloWorld.html

GWT應用中的HTML內容必須存放在public目錄下，public目錄的全路徑是"org/vivianj/gwt/ublic"，是將主類HelloWorld的包名"org.vivianj.gwt.client"中的client替換爲"public"後形成的目錄結構。

我們將主要介紹HelloWorld.html中和GWT相關的內容，HelloWorld.html文件的全部內容見清單1。


24.    <meta name='gwt:module' content='org.vivianj.gwt.HelloWorld'>

在HelloWorld.html文件的第24行，我們使用meta標籤指定了本頁面和GWT模塊" org.vivianj.gwt.HelloWorld"之間的聯繫，meta標籤的name屬性是不變的，而content屬性則是GWT主類全名(org.vivianj.gwt.client.HelloWorld)去掉其中的"client."後的結果。


40.	    <script language="javascript" src="gwt.js"></script>

在HelloWorld.html文件的第40行，我們使用script標記引入GWT工具提供的默認函數庫。根據HTML語言的規定，我們可以選擇在<head></head>之間加入這行代碼，也可以選擇在<body></body>之間加入這段代碼。GWT建議在<head></head>之間加入這行代碼，以便獲得稍微快一些的起動速度。


56.	<td id="slot1"></td><td id="slot2"></td>

在HelloWorld.html文件的第56行，我們使用td標籤定義了兩個相鄰的表格單元格，他們分別命名爲"slot1"和"slot2"，根據"HelloWorld!"例子的要求，名爲"slot1"的單元格中應該顯示按鈕，而名爲"slot2"的單元格中則根據情況決定顯示"HelloWorld!"字符串或者不顯示任何內容。

我們將在主類HelloWorld.java的源代碼中使用RootPanel.get("slot1")來獲得對該單元格的引用，請參考下面的"主類HelloWorld"部分的說明。


43.	<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

在HelloWorld.html的第43行，我們使用iframe標籤來設置當前頁支持歷史功能，iframe的屬性必須和上面的內容保持一致，否則將不會起到任何效果。



1.	<html>
2.		<head>
3.		
4.			<!--                                           -->
5.			<!-- Any title is fine                         -->
6.			<!--                                           -->
7.			<title>Wrapper HTML for HelloWorld</title>
8.	
9.			<!--                                           -->
10.			<!-- Use normal html, such as style            -->
11.			<!--                                           -->
12.			<style>
13.				body,td,a,div,.p{font-family:arial,sans-serif}
14.				div,td{color:#000000}
15.				a:link,.w,.w a:link{color:#0000cc}
16.				a:visited{color:#551a8b}
17.				a:active{color:#ff0000}
18.			</style>
19.	
20.			<!--                                           -->
21.			<!-- The module reference below is the link    -->
22.			<!-- between html and your Web Toolkit module  -->		
23.			<!--                                           -->
24.			<meta name='gwt:module' content='org.vivianj.gwt.HelloWorld'>
25.			
26.		</head>
27.	
28.		<!--                                           -->
29.		<!-- The body can have arbitrary html, or      -->
30.		<!-- you can leave the body empty if you want  -->
31.		<!-- to create a completely dynamic ui         -->
32.		<!--                                           -->
33.		<body>
34.	
35.			<!--                                            -->
36.			<!-- This script is required bootstrap stuff.   -->
37.			<!-- You can put it in the HEAD, but startup    -->
38.			<!-- is slightly faster if you include it here. -->
39.			<!--                                            -->
40.			<script language="javascript" src="gwt.js"></script>
41.	
42.			<!-- OPTIONAL: include this if you want history support -->
43.			<iframe id="__gwt_historyFrame"
style="width:0;height:0;border:0"></iframe>
44.	
45.			<h1>HelloWorld</h1>
46.	
47.			<p>
48.			This is an example of a host page for the HelloWorld application. 
49.			You can attach a Web Toolkit module to any HTML page you like, 
50.			making it easy to add bits of AJAX functionality to existing
pages 
51.			without starting from scratch.
52.			</p>
53.	
54.			<table align=center>
55.				<tr>
56.					<td id="slot1"></td><td
id="slot2"></td>
57.				</tr>
58.			</table>
59.		</body>
60.	</html>

2. 主類HelloWorld

主類HelloWorld必須繼承自com.google.gwt.core.client.EntryPoint類，並且覆蓋其public void onModuleLoad()方法。

在onModuleLoad()方法中，我們使用GWT中提供的默認顯示組件(比如Button)和組裝組件(比如VerticalPanel)來設計需要顯示的界面，所有這些組件都位於com.google.gwt.user.client.ui包下面。這些組件的命名規則和Java AWT的命名規則基本類似，使用方式也和AWT的基本一致，不過GWT中提供了不少的新組建可供選擇，比如可以直接用VerticalPanel來實現垂直方向的佈局管理。

HelloWorld.java中的19和20行，就聲明瞭Button和Label兩個顯示組件。


19.    final Button button = new Button("Click me");
20.    final Label label = new Label();

onModuleLoad()方法中，我們需要把生成的顯示組件或者組裝組建加入到顯示頁面的對應顯示區域。首先，我們需要在頁面上使用id屬性爲顯示區域指定唯一的名稱(參見清單1中的56行)。com.google.gwt.user.client.ui.RootPanel的靜態方法get可以根據傳入的字符串參數（參數值就是顯示區域的id屬性）獲取頁面上對應的顯示區域。

HelloWorld.java的36、37行，就使用了RootPanel的get方法分別獲得頁面上id爲"slot1"、"slot2"的顯示區域，然後調用add方法將生成的Button和Label對象加入到顯示區域中。


36.    RootPanel.get("slot1").add(button);
37.    RootPanel.get("slot2").add(label);

Ajax最重要的功能就是爲用戶提供更好的交互體驗，GWT中使用和AWT中相同的事件監聽機制完成客戶端事件監聽，GWT中支持的Listener接口包括ChangeListener、ClickListener等。我們可以通過各種各樣的Listener接口獲得用戶界面上所發生的動作，通過處理這些動作來完成對應業務邏輯。

HelloWorld.java中的第22行~29行的內容就實現了一個ClickListender接口，並且提供了對應的onClick方法實現，用於處理按鈕點擊後的業務邏輯（判斷是否需要顯示"Hello World!"字符串），然後調用Button對象的addClickListener方法增加監聽器。


22.    button.addClickListener(new ClickListener() {
23.          public void onClick(Widget sender) {
24.            if (label.getText().equals(""))
25.              label.setText("Hello World!");
26.            else
27.              label.setText("");
28.          }
29.    });

HelloWorld類的全部源代碼內容見清單2。



1.	package org.vivianj.gwt.client;
2.	
3.	import com.google.gwt.core.client.EntryPoint;
4.	import com.google.gwt.user.client.ui.Button;
5.	import com.google.gwt.user.client.ui.ClickListener;
6.	import com.google.gwt.user.client.ui.Label;
7.	import com.google.gwt.user.client.ui.RootPanel;
8.	import com.google.gwt.user.client.ui.Widget;
9.	
10.	/**
11.	 * Entry point classes define <code>onModuleLoad()</code>.
12.	 */
13.	public class HelloWorld implements EntryPoint {
14.	
15.	  /**
16.	   * This is the entry point method.
17.	   */
18.	  public void onModuleLoad() {
19.	    final Button button = new Button("Click me");
20.	    final Label label = new Label();
21.	
22.	    button.addClickListener(new ClickListener() {
23.	      public void onClick(Widget sender) {
24.	        if (label.getText().equals(""))
25.	          label.setText("Hello World!");
26.	        else
27.	          label.setText("");
28.	      }
29.	    });
30.	
31.	    // Assume that the host HTML has elements defined whose
32.	    // IDs are "slot1", "slot2".  In a real app, you probably would not want
33.	    // to hard-code IDs.  Instead, you could, for example, search for all 
34.	    // elements with a particular CSS class and replace them with widgets.
35.	    //
36.	    RootPanel.get("slot1").add(button);
37.	    RootPanel.get("slot2").add(label);
38.	  }
39.	}

3. 配置文件HelloWorld.gwt.xml

配置文件中包括兩個元素。Inherits元素地設置GWT應用的繼承信息，而entry-point元素的class屬性則用於設置設置GWT應用的主類。



1.	<module>
2.	
3.		<!-- Inherit the core Web Toolkit stuff.                  -->
4.		<inherits name='com.google.gwt.user.User'/>
5.	
6.		<!-- Specify the app entry point class.                   -->
7.		<entry-point class='org.vivianj.gwt.client.HelloWorld'/>
8.	  
9.	</module>





 

Ajax是當前熱門的Web應用開發技術，Java是企業應用開發中的主流技術，GWT框架將這兩種技術合二爲一，是我們能夠應用Java語言來開發Ajax，在保留Ajax技術的優點基礎上，解決了Ajax應用開發、調試困難的缺點。

本文中介紹了GWT的基本知識、主要特性，提供了"HelloWorld！"例子說明使用Java和GWT框架開發Ajax應用的開發、編譯、測試過程，並且通過對"HelloWorld！"例子中涉及文件的分析，講解了使用GWT框架開發Ajax應用的技術細節和約束條件。


 


 

學習

獲得產品和技術

討論


 

肖菁，唯 J 族創始人，開源項目BuildFileDesigner、V-Security 創始人，Open Source 推廣人，主要研究 J2EE 編程技術、Web Service 技術以及他們在 WebSphere、WebLogic、 Apache 平臺上的實現，擁有 IBM 的 Developing With Websphere Studio 證書。
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

WEB系統身份校驗

在web系統中，身份校驗是常用的方式。登錄頁面，是爲用戶提供登錄的入口。但是，有的時候，我們使用ajax操作的時候，由於得不到正確的數據信息，而使頁面停留不能跳轉到登錄頁面。其實，http協議的請求頭可以幫我們輕鬆解決這個問題。 在J

原創 2024-02-07 13:55:31

Objective-C爬蟲：實現動態網頁內容的抓取

在當今的互聯網時代，數據的獲取和分析變得日益重要。無論是進行市場研究、用戶行爲分析還是產品開發，獲取大量數據都是不可或缺的一環。然而，很多有價值的信息都隱藏在動態加載的網頁中，這些網頁通過JavaScript動態生成內容，傳統的爬蟲技術

原創 2024-05-29 00:07:51

阿里淘系自研編解碼器包攬兩項世界冠軍！

12月15日，2020 年 MSU 世界視頻編碼器大賽成績公佈，阿里巴巴淘系技術自研的奇點編碼器首次參賽就包攬圖像失真指標PSNR的兩項冠軍。 奇點編碼器可以在離線和在線場景下將視頻壓縮50-1000倍後，實現最好的畫質播放。在未來，奇

osc_hzf6peqc 2024-05-14 01:40:19

Redis開源社區持續壯大，華爲云爲Valkey項目注入新的活力

摘要：作爲Valkey社區的Technical Steering Committee member，華爲雲將持續參與社區建設。 一、背景 今年3月21日，Redis Labs宣佈從Redis 7.4版本開始，將原先比較寬鬆的BSD

原創 2024-05-06 22:32:57

瀏覽器輸入地址訪問網頁過程

瀏覽器輸入地址 當在瀏覽器中輸入網址的時候，瀏覽器其實就可能的匹配可能得 url 了，它會從歷史記錄，書籤等地方，找到已經輸入的字符串可能對應的 url，然後給出智能提示，讓你可以補全url地址。對於 google的chrome 的瀏覽

原創 2024-04-16 11:34:39

爲什麼我們的系統複雜度這麼高了?

我曾多次聽到靈魂拷問： 爲什麼你們程序員不能一個人負責所有服務呢？ 爲什麼開發這麼簡單的需求還需要這麼多人？ 爲什麼服務需要分給不同的人，不能一個人可以瞭解所有服務功能？ 一個項目爲什麼還需要這麼多人？ 答案在一個古老的傳說中，上帝在混

原創 2024-03-14 02:53:29

「Java開發指南」如何用MyEclipse搭建GWT 2.1和Spring？（二）

本教程將指導您如何生成一個可運行的Google Web Toolkit (GWT) 2.1和Spring應用程序，該應用程序爲域模型實現了CRUD應用程序模式。在本教程中，您將學習如何： 安裝Google Eclipse插件 爲GWT配置

原創 2024-05-17 12:21:26

「Java開發指南」如何用MyEclipse搭建GWT 2.1和Spring？（一）

本教程將指導您如何生成一個可運行的Google Web Toolkit (GWT) 2.1和Spring應用程序，該應用程序爲域模型實現了CRUD應用程序模式。在本教程中，您將學習如何： 安裝Google Eclipse插件 爲GWT配置

原創 2024-05-08 11:36:35

vue3 scss style scope 加了無法重寫

在Vue中，style scope是一個特性，它可以防止組件的樣式影響到其他組件，從而減少樣式衝突。這個特性通過在生成的CSS選擇器中自動添加一個屬性（通常是data-v-hash）來實現。 如果你遇到了style scope導致樣式無法被

原創 2024-06-02 02:09:05

界面控件DevExtreme v23.2亮點 - 標籤、表單、編輯器功能升級

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-05-28 12:19:08

Vue 學習筆記簡寫

一.Vue文件內容                <template>     </template>     <script>     </script>     <style>     </style>

原創 2024-05-13 21:42:40

一鍵自動化博客發佈工具,用過的人都說好(csdn篇)

CSDN應該是大家接觸到最多的博客平臺了，所以一款能夠發佈到CSDN的自動化工具還是非常有必要的。 今天給大家講講自動化CSDN博客發佈的思路和一些問題的解決辦法。 解決問題的思路一定是最重要的，知識是死的，問題是活的，如何在工作中解決遇

原創 2024-05-13 21:39:29

6個實例帶你解讀TinyVue 組件庫跨框架技術

本文分享自華爲雲社區《6個實例帶你解讀TinyVue 組件庫跨框架技術》，作者： 華爲雲社區精選。 在DTSE Tech Talk 《 手把手教你實現mini版TinyVue組件庫 》的主題直播中，華爲雲前端開發DTSE技術佈道師阿健老師給

原創 2024-04-26 10:33:20

如何使用 JavaScript 導入和導出 Excel

前言 在現代的Web應用開發中，與Excel文件的導入和導出成爲了一項常見而重要的任務。無論是數據交換、報告生成還是數據分析，與Excel文件的交互都扮演着至關重要的角色。本文小編將爲大家介紹如何在熟悉的電子表格 UI 中輕鬆導入 Exce

原創 2024-03-20 10:43:28

Top 10 SwiftUI Features Every App Developer Should Know

As an app developer, staying on top of the latest technologies and tools is essential to creating cutting-edge applicati

PixWorld 2024-03-19 22:16:15