wicket_VueJS + Wicket = Vuecket

wicket

Vuecket - full-stack web framework, which integrates VueJS as front-end side and Apache Wicket as back-end side. It takes all the best from both frameworks and allows to develop full-stack applications fast and easy.

Vuecket-全栈Web框架，它集成了VueJS作为前端，而Apache Wicket作为后端。 它充分利用了这两个框架的优点，并允许快速，轻松地开发全栈应用程序。

Of course, you can say that these are unproofed statements and you will be right since Vuecket is a newborn web framework (August 2020) and hasn’t been seriously tested on production. But it was developed as a result of 6+ years of work on our key solution and flagman Open Source product Orienteer, a platform for quick and easy Business Applications development.

当然，您可以说这是未经证实的陈述，因为Vuecket是一个新生的Web框架(2020年8月)，并且尚未在生产中经过严格的测试，所以您是对的。 但是，它是在我们的关键解决方案和Flagman开源产品Orienteer (用于快速，轻松地进行业务应用程序开发的平台)上进行6年以上工作的结果而开发的。

We work hard to build this framework more valuable and helpful for the Open Source community, thus our team would appreciate your thoughts, feedbacks, and sharing your experience working with Vuecket (successful or not).

我们将努力为开放源码社区构建更有价值和有用的框架，因此我们的团队将很感谢您的想法，反馈以及与您分享使用Vuecket的经验(成功与否)。

Vuecket guiding principles:

Vuecket指导原则：

1. Be declarative, not imperative

   声明性的，不是命令性的

• You can use VueJS 3rd party libraries and get benefits out of Vuecket even without modifying them
  您可以使用VueJS 3rd party库并从Vuecket中受益，即使不修改它们

• In a similar way, you can use 3rd party Apache Wicket component and just by adding VueBehavior (Behavior provided by Vuecket) you enable Vuecket benefits

  以类似的方式，您可以使用第三方Apache Wicket组件，只需添加VueBehavior (由Vuecket提供的行为)即可启用Vuecket好处

2. Provide 80% of functionality Out Of the Box, but do have good extension points for the remaining 20%

2. 提供80％的功能，但对于其余20％的功能确实有很好的扩展点

It’s easy to spot that both VueJS and Apache Wicket follow these guiding principles.

很容易发现VueJS和Apache Wicket都遵循这些指导原则。

To get familiar with Vuecket, let’s develop together a Chat/Guest Book with Markdown support application in this article. You can find our final application here, and source code here.

为了熟悉Vuecket，让我们在本文中一起开发带有Markdown支持应用程序的聊天/来宾。 您可以在此处找到我们的最终应用程序 ，并在此处找到源代码 。

步骤0：项目创建 (Step 0: Project Creation)

Let’s use Apache Wicket Maven Archetype to generate our project. You can use the following command:

让我们使用Apache Wicket Maven原型来生成我们的项目。 您可以使用以下命令：

Vuecket doesn’t have yet its own Maven Archetype. Probably, in the future releases, we will add that.

Vuecket还没有自己的Maven原型。 可能会在将来的版本中添加它。

Now, let's add Vuecket. Add the following dependency topom.xml in your newly generated project. Please check the most recent Vuecket version on our GitHub page.

现在，让我们添加Vuecket。 将以下依赖项添加到新生成的项目中的pom.xml中。 请在我们的GitHub页面上查看最新的Vuecket版本。

步骤1：渲染降价 (Step 1: Render Markdown)

Your generated Wicket project already contains HomePage.java. Let’s add some code there to make sure that Vuecket has been enabled.

您生成的Wicket项目已经包含HomePage.java。 让我们在其中添加一些代码，以确保已启用Vuecket。

For example, let’s render Hello World from a text which will be provided by Apache Wicket component. We will use vue-markdown for rendering markdown on the client-side.

例如，让我们从Apache Wicket组件将提供的文本中渲染Hello World 。 我们将使用vue-markdown在客户端渲染markdown。

Instead of Wicket greetings please add the following code into HomePage.html:

代替Wicket问候，请将以下代码添加到HomePage.html中：

And to HomePage.java:

并转到HomePage.java：

But where is VueMarkdown? Let’s define it in the following way:

但是VueMarkdown在哪里？ 让我们以以下方式定义它：

Please pay attention to annotation @VueNpm . It’s needed to enable Vuecket on this Wicket component, which will load everything needed from NPM to allow Vue on the client-side to render markdown properly.

请注意注释@VueNpm 。 需要在此Wicket组件上启用Vuecket，该组件将加载NPM所需的所有内容，以允许客户端上的Vue正确呈现减价。

Use mvn jetty:run to run your project and, if no problems are there, you can observe the following on http://localhost:8080 :

使用mvn jetty:run运行您的项目，如果没有问题，则可以在http://localhost:8080上观察以下内容：

What did we build and why is it working?

我们建立了什么，为什么起作用？

• We added 2 Wicket components to our HomePage: for Vue application and for Markdown rendering
  我们在首页上添加了2个Wicket组件：用于Vue应用程序和Markdown渲染
• We linked Vue components with corresponding Wicket components on the server side (in HomePage.java)
  我们在服务器端将Vue组件与相应的Wicket组件链接在一起(在HomePage.java中)
• We defined what particular VueJS library needed for markdown rendering: where to get it and how to enable it on your page
  我们定义了Markdown呈现所需的特定VueJS库：在哪里获取以及如何在页面上启用它

• The rest is easy: Wicket provided unrendered text # Hellow World from Vuecket to the client’s browser which was defined during adding the Wicket component. Vuecket helped to load everything required on the client-side (including VueJS), ran required VueJS enablement code, and allowed the last one to do its job in rendering the text as markdown.

  其余的工作很简单：Wicket # Hellow World from Vuecket向客户端的浏览器提供了未渲染的文本# Hellow World from Vuecket ，该文本是在添加Wicket组件时定义的。 Vuecket帮助加载了客户端所需的所有内容(包括VueJS)，运行了所需的VueJS支持代码，并允许最后一个完成将文本呈现为markdown的工作。

Need help? Check this commit on GitHub

需要帮忙？ 在GitHub上检查此提交

步骤2：邮件输入和预览 (Step 2: Message Entering and Preview)

Here we will enhance our application by allowing to enter a message and its preview.

在这里，我们将通过允许输入消息及其预览来增强我们的应用程序。

Let’s use textarea to enter a message. For VueJS v-model use the field text and assign the same field to vue-markdown.

让我们使用textarea输入消息。 对于VueJS v-model使用字段text ，并将相同的字段分配给vue-markdown 。

We’ve just used the data field text, so we have to define it in data of the corresponding Vue component. There are multiple ways of how to do that in Vuecket, but let's use the longest one:

我们只是使用了数据字段text ，所以我们必须在相应的Vue组件的data中对其进行定义。 在Vuecket中，有多种方法可以做到这一点，但让我们使用最长的一种方法：

• Create your own VueComponent for Vue app
  为Vue应用创建自己的VueComponent

• Associate it with *.vue file

  将其与*.vue文件关联

• Define all required VueJS logic in this*.vue file: for this chapter, it will be a new data field text

  在此*.vue文件中定义所有必需的VueJS逻辑：对于本章，它将是一个新的数据字段text

And here is our newly created ChatApp.vue:

这是我们新创建的ChatApp.vue：

After running your application by mvn jetty:run you can see something like this:

通过mvn jetty:run运行应用程序后，您会看到类似以下内容：

All right, in this chapter, we learned how to create *.vue files and associate them with Apache Wicket components.

好的，在本章中，我们学习了如何创建*.vue文件并将其与Apache Wicket组件关联。

Need help? Check this commit on GitHub

需要帮忙？ 在GitHub上检查此提交

步骤3：显示消息并添加新消息 (Step 3: Display of Messages and Adding a New One)

We won’t use either Vuecket or Wicket in this chapter, “eternal sunshine of the spotless VueJS”. Let's decompose our task:

在本章“一尘不染的VueJS的永恒之光”中，我们不会使用Vuecket或Wicket。 让我们分解我们的任务：

• Add a new field to Vue app in order to hold the list of messages
  向Vue应用添加新字段以保留消息列表
• Add Vue method for adding a new message
  添加Vue方法以添加新消息
• Display the list of messages using markdown
  使用markdown显示消息列表

First of all, let’s change ChatApp.vue and add required logic: new field messages for holding the list of messages and method addMessage. Don’t forget that after adding a new message it will be good to clean textarea. For future convenience let’s store a submission date along with the message’s text. It will allow future extension of the message by additional fields, for example: author, priority, highlighting , etc.

首先，让我们改变ChatApp.vue并添加所需的逻辑：新领域messages保持邮件和列表的方式addMessage 。 不要忘记，在添加新消息之后，清理textarea将是一件好事。 为了将来的方便，让我们将提交日期和消息文本一起存储。 它将允许将来通过其他字段来扩展消息，例如： author ， priority ， highlighting等。

Also, we have to change HomePage.html to render the list of messages and a handler for pressing Ctrl-Enter to add our new message through addMessage.

同样，我们必须更改HomePage.html来呈现消息列表，并更改用于按Ctrl-Enter通过addMessage添加新消息的处理程序。

After running mvn jetty:run and some test chat with yourself, you can see something like this:

运行mvn jetty:run并与您自己进行一些测试聊天后，您会看到类似以下内容：

In this chapter, we learned how to add a new message and display a list of them on the page just by using VueJS.

在本章中，我们学习了如何使用VueJS添加新消息并将其列表显示在页面上。

Need help? Check this commit on GitHub

需要帮忙？ 在GitHub上检查此提交

步骤4：启用协作 (Step 4: Enable Collaboration)

On the previous step, a content of our guest book was unique per visitor and not shared with a server.

在上一步中，我们的访客留言簿的内容对每个访问者而言都是唯一的，并且不会与服务器共享。

In this step, we will enable a connection with the server and synchronization with all visitors. To do that we would need to use Vuecket Data Fibers, a special solution, which allows data synchronization between client’s and server’s sides. Moreover, to do that it’s sufficient to change only the server-side! Nothing to do on the client-side. Sounds amazing? Let’s go to code! But, wait… There are only 2 new lines of code for ChatApp.java:

在此步骤中，我们将启用与服务器的连接并与所有访问者同步。 为此，我们需要使用Vuecket Data Fibers，这是一种特殊的解决方案，它允许客户端和服务器端之间进行数据同步。 此外，仅更改服务器端就足够了！ 在客户端无事可做。 听起来很棒吗？ 让我们去编码吧！ 但是，等等... ChatApp.java只有两行新代码：

All right, what’s just happened?

好吧，发生什么事了？

• We created Wicket IModel MESSAGES, which is accessible by everyone, because it’s defined as static final

  我们创建了Wicket IModel MESSAGES ，每个人都可以访问它，因为它被定义为static final

• We added data-fiber, which links together data in MESSAGES from server and messages field on the VueJS side.

  我们添加了数据光纤，该光纤将来自VueJS端的服务器和messages字段中MESSAGES数据链接在一起。

• We defined that data-fiber is needed for 3 things: load, observe, and refresh. Load — for the initial load of the messages list, observe — for letting the server-side know that messages was changed on the client-side, refresh — for updating messages on the client-side, if there are changes on the server one.

  我们定义了数据纤维是三件事所必需的： load ， observe和refresh 。 Load -对于消息列表的初始加载， observe -如果让服务器端知道messages在客户端已更改，请refresh -如果服务器上有更改，则在客户端更新messages 。

After running mvn jetty:run and sharing the link with your friends, you can observe something like this:

运行mvn jetty:run并与朋友共享链接后，您可以观察到以下内容：

Need help? Check this commit on GitHub

需要帮忙？ 在GitHub上检查此提交

步骤5：服务器端方法 (Step 5: Server-Side Methods)

I cheated a little bit in the previous chapter for a good purpose by providing full read-write access to MESSAGES to all site visitors. It’s highly not recommended to do because everybody can overwrite all messages on the server-side through data-fiber or even erase them. It’s recommended to use data-fibers synchronization from the client-side to the server-side only for objects which belong to the current visitor.

在上一章中，我为所有目的访问者提供了对MESSAGES完全读写访问权，以达到良好的目的。 强烈建议您不要这样做，因为每个人都可以通过数据光纤覆盖服务器端的所有消息，甚至可以擦除它们。 建议仅对属于当前访问者的对象使用从客户端到服务器端的数据纤维同步。

How can we fix that?

我们该如何解决？

• Use our data-fiber only for the initial load of messages
  仅将我们的数据光纤用于消息的初始加载
• User server-side method for adding a new message
  用户服务器端添加新消息的方法

After these sub-steps, visitors will be able to add new messages to the list and will NOT be able to remove or change the existing ones. Also, let's make the server-side a little bit more complex by adding a new class Message to store the actual message instead of just a pure JSON object. Btw, this class can be JPA enabled to allow to store/retrieve it from a database.

经过这些子步骤，访问者将能够将新消息添加到列表中，并且将无法删除或更改现有消息。 另外，让我们通过添加新的Message类来存储实际消息，而不只是纯JSON对象，使服务器端稍微复杂一点。 顺便说一句，此类可以启用JPA，以允许从数据库存储/检索它。

Please pay attention to annotation @JsonProperty. By defining it we can retarget JSON field message to Java field text.

请注意注释@JsonProperty 。 通过定义它，我们可以将JSON字段message重新定位为Java字段text 。

Let’s change ChatApp.java as well: add the Vuecket method for adding a new message. Also, you can find out in the code below the trimming of the list of messages. It was done to keep the list relatively short.

让我们也更改ChatApp.java：添加Vuecket方法以添加新消息。 此外，您还可以在修剪邮件列表下方的代码中找到。 这样做是为了使列表相对简短。

Do you see method annotated by @VueMethod? Here we are obtaining our new message as an instance of the class Message, adding to the list and trimming the last one. Finally, we are sending an updated list back to the client-side. Also, please pay attention that the data-fiber was reconfigured to do only the initial load of the messages.

您看到@VueMethod注释的方法了吗？ 在这里，我们获取新消息作为Message类的实例，将其添加到列表中并修剪最后一个。 最后，我们将更新的列表发送回客户端。 另外，请注意，数据光纤已重新配置为仅执行消息的初始加载。

Also, we need to change the logic in ChatApp.vue to send a new message to the server in asynchronous mode (vcInvoke) instead of adding it just locally.

另外，我们需要更改ChatApp.vue中的逻辑，以便以异步模式(vcInvoke)向服务器发送新消息，而不是仅在本地添加它。

What we have just learned:

我们刚学到的东西：

• How to create Vuecket server-side methods
  如何创建Vuecket服务器端方法
• How to invoke server-side methods
  如何调用服务器端方法
• How to send back changes on server-side
  如何在服务器端发回更改

For common users, nothing will change, but hackers will not be able to change/erase messages on the server-side.

对于普通用户，什么也不会改变，但是黑客将无法在服务器端更改/擦除消息。

Need help? Check this commit on GitHub

需要帮忙？ 在GitHub上检查此提交

摘要 (Summary)

There are multiple other enhancements that you can do for this application, but let us keep it up to you, dear reader. If you will need any help you know where to find us!Do you like Vuecket? Please share your feedback. Community opinion is the main driver for any Open Source project as Vuecket.

亲爱的读者，您可以为此应用程序进行其他多种增强，但是请让我们自行决定。 如果您需要任何帮助，您就知道在哪里可以找到我们 ！您喜欢Vuecket吗？ 请分享您的反馈。 社区意见是任何开源项目(如Vuecket)的主要驱动力。

PS近期Vuecket路线图 (P.S. Near-term Vuecket Road Map)

• Support of WebSockets for even more reactive connection between server-side and client-side
  支持WebSocket，以实现服务器端和客户端之间的更多React式连接
• Ability to send the only delta between browser and server
  能够在浏览器和服务器之间发送唯一的增量
• More configuration abilities for data-fibers
  数据光纤的更多配置功能

• Set of Vuecket/Wicket components which prewired with most interesting and used VueJS libraries, for example, vue-markdown (which we used in this tutorial)

  Vuecket / Wicket组件集，这些组件预先连接了最有趣和使用过的VueJS库，例如vue-markdown (我们在本教程中使用了)

翻译自: https://medium.com/orienteer/vuejs-wicket-vuecket-ee7bd5534fee

wicket