介绍Vuecket:Vue.JS与Apache Wicket的魔法结合

20-08-18 banq

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

                   

猜你喜欢