Beispiel für eine Spring MVC + Moustache JS-Vorlage
In diesem Tutorial zeigen wir Ihnen ein Webanwendungsbeispiel für Spring MVC +Mustache JS template.
Verwendete Technologien:
Feder 4.2.4.FREIGABE
mustache.js
JDK 1.8.0_66
Jackson 2.7
Eclipse 4.3
Tomcat 8
Maven 3
Bootstrap 3
Note Diese Lösung funktioniert noch, empfiehlt jedoch diese einfacheSpring Boot + JMustache-Lösung.
Im Frühjahr können wirScriptTemplateConfigurer verwenden, um den größten Teil der JS-Vorlagenbibliothek zu integrieren, z. B. Moustache, Handlebars oder React. Weitere Informationen finden Sie in der Dokumentation dieses offiziellenSpring script template.
P.S ScriptTemplateConfigurer has been supported since Spring 4.2
Note In diesem Beispiel wird "Moustache JS" auf der Serverseite unter Verwendung der integrierten Java 8 Nashorn Javascript-Engine ausgeführt. Einisomorphic javascriptBeispiel.
1. Projektstruktur
Eine Standard-Maven-Ordnerstruktur.
2. pom.xml
Eine Mavenpom.xml-Datei zum Deklarieren von Abhängigkeiten und einigen nützlichen Plugins.
Konfigurieren Sie sowohlScriptTemplateConfigurer als auchViewResolver, um die Moustache-Skriptvorlage als Spring-Ansichtsvorlage zu integrieren. Siehe Kommentar für selbsterklärend.
SpringWebConfig.java
package com.example.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.script.ScriptTemplateConfigurer;
import org.springframework.web.servlet.view.script.ScriptTemplateViewResolver;
@EnableWebMvc
@Configuration
@ComponentScan({ "com.example.web.controller" })
public class SpringWebConfig extends WebMvcConfigurerAdapter {
@Bean
public ScriptTemplateConfigurer configurer() {
ScriptTemplateConfigurer configurer = new ScriptTemplateConfigurer();
//1. Nashorn jdk8 script engine.
configurer.setEngineName("nashorn");
//2. Add mustache.min.js and custom render.js to Nashorn
configurer.setScripts("/static/js/mustache.min.js", "/static/js/render.js");
//3. Ask Nashorn to run this function "render()"
configurer.setRenderFunction("render");
return configurer;
}
//Define where is Mustache template, in classpath level.
// If view "hello" is returned, Mustache temple will be '/static/templates/hello.html'
@Bean
public ViewResolver viewResolver() {
ScriptTemplateViewResolver viewResolver = new ScriptTemplateViewResolver();
viewResolver.setPrefix("/static/templates/");
viewResolver.setSuffix(".html");
return viewResolver;
}
//add static resources like js or css
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
}
}
4. Spring Controller + Schnurrbart-Vorlage
4.1 A Spring controller to pass data to the Mustache template.
HelloController.java
package com.example.web.controller;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.example.web.model.User;
@Controller
public class HelloController {
private static final Logger logger = LoggerFactory.getLogger(HelloController.class);
private static final ObjectMapper om = new ObjectMapper();
@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView printWelcome(HttpServletRequest request) {
ModelAndView result = new ModelAndView();
result.addObject("resources", request.getContextPath() + "/resources");
result.addObject("logo", "example.com");
result.addObject("title", "Spring MVC + Mustache template");
result.addObject("jumbo-title", "Spring MVC + Mustache template");
result.addObject("jumbo-desc", "Maven + Spring MVC + Mustache JS, ScriptTemplate example.");
//1. Test data type
result.addObject("id", 100);
result.addObject("username", "example");
//2. Test List
result.addObject("scriptTemplates", getScriptTemplate());
//3. Test Object
result.addObject("user", new User("[email protected]", 0));
//4. Test List
4.2 A Mustache template file to display the data from the above Spring controller.
/static/templates/hello.html
{{title}}
{{jumbo-title}}
{{jumbo-desc}}
1. Data Types
{{#id}}
Hello {{username}}, id : {{.}}
{{/id}}
2. List
{{scriptTemplates}}
{{#scriptTemplates}}
{{.}}
{{/scriptTemplates}}
3. User Object
{{user}}
{{#user}}
email- {{user.email}}
loginFailed- {{user.loginFailed}}
{{/user}}
4. List of User Objects (JSON)
{{user_json}}
{{#users_json}}
email- {{email}}
loginFailed- {{loginFailed}}
{{/users_json}}
5. List of User Objects (RAW)
No idea how to loop it...
{{users}}
{{#users}}
email- {{email}}
loginFailed- {{loginFailed}}
{{/users}}
5. Javascript "render.js"
Wenn eine Ansicht zurückgegeben wird, führt Spring diese Funktionrender(template, model, url) aus. Da jedoch nicht alle Java-Objekte oder Datentypen in Javascript unterstützt werden, ist eine Konvertierung erforderlich, insbesondere dieList<Object>.
Zusammenfassung :
Für den primitiven Datentyp ist keine Konvertierung erforderlich.
Konvertieren SieList<User> mitJackson in eine JSON-formatierte Zeichenfolge und konvertieren Sie sie überJSON.parse in ein JS-Objekt. Dieser Trick sollte bei jeder JavaScript-Konvertierung von Java-Objekten funktionieren.
/static/js/render.js
/**
* Bindings to use mustache.js with Nashorn.
*/
/**
* String templates: the Mustache template content. e.g hello.html
* Map model: the model in controller
* String url: the templates url (since 4.2.2)
*/
function render(template, model, url) {
return Mustache.render(template, toJsonObject(model));
}
// Some Java objects may not support in JS directly, need conversion.
function toJsonObject(model) {
var o = {};
for (var k in model) {
//Convert Object String to Javascript JSON
if (k.indexOf("_json") > -1) {
o[k] = JSON.parse(model[k]);
continue;
}
// Convert Iterable like List to real JSON array
if (model[k] instanceof Java.type("java.lang.Iterable")) {
o[k] = Java.from(model[k]);
}
else {
o[k] = model[k];
}
}
return o;
}
6. Verschiedene Klassen
6.1 Create a WebInitializer class to create a no web.xml web application.
package com.example.web.model;
public class User {
String email;
int loginFailed;
public User(String email, int loginFailed) {
this.email = email;
this.loginFailed = loginFailed;
}
//setters and getters
}
