介紹Vuecket：Vue.JS與Apache Wicket的魔法結合

banq發表於2020-08-18
Vue.jsApache

Vuecket是一個Web框架，在客戶端整合了VueJS，在伺服器端整合了Apache Wicket。它兼具了兩者的優點，使開發全棧應用程式變得更快，更輕鬆。
 
案例步驟：
透過`mvn archetype：generate`生成我們的專案：

mvn archetype:generate -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=8.9.0 -DgroupId=com.mycompany -DartifactId=mychat -DarchetypeRepository=https://repository.apache.org/ -DinteractiveMode=false


Vuecket尚未擁有自己的Maven專案模板。也許將來我們也會新增它。現在，讓我們連線Vuecket本身。將以下依賴項新增到專案`pom.xml`中：

<dependency>
    <groupId>org.orienteer.vuecket</groupId>
    <artifactId>vuecket</artifactId>
    <version>1.0-SNAPSHOT</version>
</dependency>


預設情況下，Wicket專案已經包含一個Wicket歡迎頁面。讓我們新增一些程式碼以確保Vuecket已經在執行。例如，讓我們在Markdown中顯示Hello World，我們將使用vue-markdown庫渲染Markdown 。
在HomePage.html中，新增：

<div wicket:id="app">
    <vue-markdown wicket:id="markdown">This will be replaced</vue-markdown>
</div>


在HomePage.java中，以下程式碼：

public HomePage(final PageParameters parameters) {
    super(parameters);
    add(new VueComponent<String>("app")
            .add(new VueMarkdown("markdown", "# Hello World from Vuecket")));
}


但是VueMarkdown類在哪裡？我們將其定義如下：

@VueNpm(packageName = "vue-markdown", path = "dist/vue-markdown.js", enablement = "Vue.use(VueMarkdown)")
public class VueMarkdown extends Label {
    public VueMarkdown(String id) {
        super(id);
    }
    public VueMarkdown(String id, Serializable label) {
        super(id, label);
    }
}

注意@VueNpm批註。需要在此Wicket元件上啟用Vuecket，這將從NPM載入所需的所有內容，以幫助瀏覽器正確呈現Markdown的已經存在的Vue元件。

如果一切正確，那麼透過`mvn jetty：run`啟動專案後，您應該在http：// localhost：8080上看到內容：Hello World from Vuecket

 

原理：
  • 我們向頁面新增2個Vue元件來標記頁面：用於應用程式和Markdown輸出
  • 我們在伺服器端將Vue元件與Wicket元件捆綁在一起（在HomePage.java中）
  • 我們告訴Vuecket它需要哪個Vue.JS庫來呈現“ vue-markdown”
  • 然後，一切都變得很簡單：Wicket，當將頁面呈現給瀏覽器時，使用了“＃Vuecket中的Hello World”行，這是我們在新增Wicket元件時設定的，Vuecket幫助瀏覽器載入了必要的VueJS庫，啟動了VueJS應用程式並將問候語呈現為渲染的Markdown

相關文章