SpringBoot集成ZK框架实现前后台无js代码交互

1. Spring Initializr 一个springboot项目
   2. 配置pom.xml引入Springboot和ZK的依赖。

4.0.0
spring.zk
zkspringboot-demo-test
jar
0.0.1-SNAPSHOT
zkspringboot-demo-test
http://www.zkoss.org

	<repositories>
		<repository>
			<id>ZK CE</id>
			<name>ZK CE Repository</name>
			<url>https://mavensync.zkoss.org/maven2</url>
		</repository>
		<repository>
			<id>ZK EVAL</id>
			<name>ZK Evaluation Repository</name>
			<url>https://mavensync.zkoss.org/eval</url>
		</repository>
	</repositories>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<maven.compiler.source>1.8</maven.compiler.source>
		<maven.compiler.target>1.8</maven.compiler.target>
		<zkspringboot.version>1.0.4</zkspringboot.version>
		<springboot.version>2.1.0.RELEASE</springboot.version>
		<zk.version>8.6.0.1-Eval</zk.version>
		<zats.version>2.0.0</zats.version>
		<junit.version>4.12</junit.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.zkoss.zkspringboot</groupId>
			<artifactId>zkspringboot-starter</artifactId>
			<version>${zkspringboot.version}</version>
			<type>pom</type>
		</dependency>
		<dependency>
			<groupId>org.zkoss.zk</groupId>
			<artifactId>zkmax</artifactId>
			<version>${zk.version}</version>
			<exclusions>
				<exclusion>
					<groupId>org.slf4j</groupId>
					<artifactId>slf4j-jdk14</artifactId>
				</exclusion>
			</exclusions>
		</dependency>

		<dependency>
			<groupId>org.zkoss.zk</groupId>
			<artifactId>zkbind</artifactId>
			<version>${zk.version}</version>
		</dependency>

		<dependency>
			<groupId>org.zkoss.zk</groupId>
			<artifactId>zuti</artifactId>
			<version>${zk.version}</version>
		</dependency>

		<dependency>
			<groupId>org.zkoss.zk</groupId>
			<artifactId>zkplus</artifactId>
			<version>${zk.version}</version>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<version>${springboot.version}</version>
				<executions>
					<execution>
						<goals>
							<goal>repackage</goal>
						</goals>
					</execution>
				</executions>
			</plugin>
		</plugins>
	</build>
</project>

3. 编写springboot入口类:

package spring.zk.test;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@SpringBootApplication
@Controller
public class TestApplication {

public static void main(String[] args) {
    SpringApplication.run(TestApplication.class);
}

@GetMapping("/mvvm")
public String mvvmExample() {
    return "mvvm";
}

}

4. 编写 TestService 类 获取当前时间:

package spring.zk.test.service;

import org.springframework.stereotype.Service;

import java.util.Date;

@Service
public class TestService {
public Date getTime() {
return new Date();
}
}

5. 编写 MainViewModel 类:

package spring.zk.test.viewmodel;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.select.annotation.VariableResolver;
import org.zkoss.zk.ui.select.annotation.WireVariable;
import org.zkoss.zkplus.spring.DelegatingVariableResolver;
import spring.zk.test.service.TestService;

import java.util.Date;

@VariableResolver(DelegatingVariableResolver.class)
public class MainViewModel {

@WireVariable
private TestService testService;

@Command
@NotifyChange("currentTime")
public void updateTime() {
	//只刷新变量 NotifyChange currentTime
}

public Date getCurrentTime() {
	return testService.getTime();
}

}

6. 编写前端界面mvvm.zul，@init引入后台MainViewModel类， 实现前后台变量的绑定，onClick="@command(‘updateTime’)" 绑定后台updateTime方法，实现前后台交互:

Current Time (from Spring Service):

	<hlayout valign="middle">
		<label value="@load(vm.currentTime)"/>
		<button iconSclass="z-icon-refresh" onClick="@command('updateTime')"/>
	</hlayout>
</window>

7. 编写springboot 的配置文件application.properties:

server.port=8888

Enable zul

zk.zul-view-resolver-prefix=/zul

8. 运行SpringBoot项目:
   

9. 访问项目：
   
   10.刷新时间