Двусторонняя привязка данных в Spring MVC с примером
Связывание данных, как и само название, говорит само за себя. При привязке данных нам нужно собирать или хранить данные, чтобы мы могли связать эти данные с другим ресурсом (например, отображая данные во внешней части) в соответствии с нашими потребностями, или мы также можем читать данные из переменную и отобразить ее в соответствии с нашими требованиями. Например, есть форма Google, и пользователь вводит все данные в эту форму, и мы должны собирать/сохранять данные и связывать их с частью внешнего интерфейса в соответствии с нашими требованиями. В Spring, используя концепцию привязки данных, мы можем выполнить следующие две задачи.
- Мы можем читать из переменной
- Мы можем записать в переменную
Таким образом, двусторонняя привязка данных означает, что мы можем выполнять как операции чтения, так и записи. В нашей предыдущей статье «Привязка данных в Spring MVC с примером» мы обсудили, как выполнить задачу записи в переменную, а в этой статье мы в основном сосредоточимся на задаче чтения из переменной.
Пример проекта
Настройка проекта
Мы собираемся использовать Spring Tool Suite 4 IDE для этого проекта. Пожалуйста, обратитесь к этой статье, чтобы установить STS на свой локальный компьютер. Как загрузить и установить среду IDE Spring Tool Suite (Spring Tools 4 для Eclipse)? Перейдите в среду IDE STS, затем создайте новый проект maven, выберите «Файл» > «Создать» > «Проект Maven» и выберите следующий архетип, как показано на изображении ниже, следующим образом:
Добавьте следующие зависимости maven и подключаемый модуль в файл yourpom.xml.
<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.3.18</version> </dependency> <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency> <!-- plugin --> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.6</version> <configuration> <failOnMissingWebXml>false</failOnMissingWebXml> </configuration> </plugin> </plugins> </build>
Ниже приведен полный код файла pom.xml после добавления этих зависимостей.
Файл: pom.xml
XML
< modelVersion >4.0.0</ modelVersion > < groupId >com.geeksforgeeks</ groupId > < artifactId >simple-calculator</ artifactId > < packaging >war</ packaging > < version >0.0.1-SNAPSHOT</ version > < name >simple-calculator Maven Webapp</ name > < dependencies > < dependency > < groupId >junit</ groupId > < artifactId >junit</ artifactId > < version >3.8.1</ version > < scope >test</ scope > </ dependency > < dependency > < groupId >org.springframework</ groupId > < artifactId >spring-webmvc</ artifactId > < version >5.3.18</ version > </ dependency > < dependency > < groupId >javax.servlet</ groupId > < artifactId >javax.servlet-api</ artifactId > < version >4.0.1</ version > < scope >provided</ scope > </ dependency > </ dependencies > < build > < finalName >simple-calculator</ finalName > < plugins > < plugin > < groupId >org.apache.maven.plugins</ groupId > < artifactId >maven-war-plugin</ artifactId > < version >2.6</ version > < configuration > < failOnMissingWebXml >false</ failOnMissingWebXml > </ configuration > </ plugin > </ plugins > </ build > </ project > |
Настройка диспетчерского сервлета
Прежде чем перейти к части кодирования, давайте посмотрим на структуру файла на изображении ниже.
Итак, сначала создайте папку src/main/java и внутри этой папки создайте класс с именем CalculatorAppIntilizer и поместите его в пакет com.geeksforgeeks.calculator.config и расширите класс AbstractAnnotationConfigDispatcherServletInitializer . Обратитесь к изображению ниже.
И всякий раз, когда вы расширяете этот класс, у него есть некоторые предабстрактные методы, которые нам нужны для реализации. Теперь внутри этого класса нам нужно просто написать две строки кода для настройки сервлета Dispatcher. Перед этим мы должны создать еще один класс для файла конфигурации Spring. Итак, перейдите в папку src/main/java и внутри этой папки создайте класс с именем CalculatorAppConfig и поместите его в пакет com.geeksforgeeks.calculator.config . Ниже приведен код файла CalculatorAppConfig.java .
Файл: CalculatorAppConfig.java
Java
package com.geeksforgeeks.calculator.config; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; @Configuration @ComponentScan (basePackages = "com.geeksforgeeks.calculator.controllers" ) public class CalculatorAppConfig { } |
Ниже приведен полный код файла CalculatorAppIntilizer.java . Комментарии добавляются внутри кода, чтобы понять код более подробно.
Файл: CalculatorAppIntilizer.java
Java
package com.geeksforgeeks.calculator.config; import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer; public class CalculatorAppIntilizer extends AbstractAnnotationConfigDispatcherServletInitializer { @Override protected Class<?>[] getRootConfigClasses() { // TODO Auto-generated method stub return null ; } // Registering the Spring config file @Override protected Class<?>[] getServletConfigClasses() { Class aClass[] = { CalculatorAppConfig. class }; return aClass; } // Add mapping url @Override protected String[] getServletMappings() { String arr[] = { "/geeksforgeeks.org/*" }; return arr; } } |
Настройка ViewResolver
Spring MVC — это Web MVC Framework для создания веб-приложений. В общем, все фреймворки MVC предоставляют способ работы с представлениями. Spring делает это с помощью ViewResolvers, что позволяет отображать модели в браузере, не привязывая реализацию к конкретной технологии представления. Подробнее читайте здесь: ViewResolver в Spring MVC. Итак, для настройки ViewResolver перейдите в файл CalculatorAppConfig.java и запишите код следующим образом.
@Bean public InternalResourceViewResolver viewResolver() { InternalResourceViewResolver viewResolver = new InternalResourceViewResolver(); viewResolver.setPrefix("/WEB-INF/view/"); viewResolver.setSuffix(".jsp"); return viewResolver; }
А ниже обновленный код файла CalculatorAppConfig.java после написания кода для настройки ViewResolver.
Файл: Обновленный CalculatorAppConfig.java
Java
package com.geeksforgeeks.calculator.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.view.InternalResourceViewResolver; @EnableWebMvc @Configuration @ComponentScan (basePackages = "com.geeksforgeeks.calculator.controllers" ) public class CalculatorAppConfig { // setup ViewResolver @Bean public InternalResourceViewResolver viewResolver() { InternalResourceViewResolver viewResolver = new InternalResourceViewResolver(); viewResolver.setPrefix( "/WEB-INF/view/" ); viewResolver.setSuffix( ".jsp" ); return viewResolver; } } |
Двусторонняя привязка данных (чтение из переменной)
Сначала нам нужно создать класс DTO. Итак, перейдите в папку src/main/java и внутри этой папки создайте класс с именем NameInfoDTO и поместите его в пакет com.geeksforgeeks.calculator.dto . Ниже приведен код файла NameInfoDTO.java . Комментарии добавляются внутри кода, чтобы понять код более подробно.
Файл: NameInfoDTO.java
Java
package com.geeksforgeeks.calculator.dto; public class NameInfoDTO { // Provided some static values // inside the variable // And we are going to read these values private String firstName = "Anshul" ; private String lastName = "Aggarwal" ; public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this .firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this .lastName = lastName; } @Override public String toString() { return "NameInfoDTO [firstName=" + firstName + ", lastName=" + lastName + "]" ; } } |
Создать контроллер
Перейдите в папку src/main/java и внутри этой папки создайте класс с именем AppController и поместите его в пакет com.geeksforgeeks.calculator.controllers . Ниже приведен код файла AppController.java .
Файл: Файл AppController.java
Java
package com.geeksforgeeks.calculator.controllers; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class AppController { @RequestMapping ( "/home" ) public String showHomePage() { return "welcome-page" ; } } |
Итак, здесь, в этом файле, мы должны написать код для чтения существующего свойства, извлекая его из DTO. И мы можем написать код примерно так
@RequestMapping("/home") public String showHomePage(Model model) { // Read the existing property by // fetching it from the DTO NameInfoDTO nameInfoDTO = new NameInfoDTO(); model.addAttribute("nameInfo", nameInfoDTO); return "welcome-page"; }
Related Article Link: How to Create Your First Model in Spring MVC
Ниже приведен обновленный код файла AppController.java .
Файл: обновленный файл AppController.java
Java
package com.geeksforgeeks.calculator.controllers; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import com.geeksforgeeks.calculator.dto.NameInfoDTO; @Controller public class AppController { @RequestMapping ( "/home" ) public String showHomePage(Model model) { // Read the existing property by // fetching it from the DTO NameInfoDTO nameInfoDTO = new NameInfoDTO(); model.addAttribute( "nameInfo" , nameInfoDTO); return "welcome-page" ; } } |
Создать вид
Теперь нам нужно создать представление с именем « welcome-page » внутри папки WEB-INF/view с расширением .jsp . Итак, перейдите в src > main > webapp > WEB-INF и создайте представление папки, а внутри этой папки создайте файл jsp с именем welcome-page . Итак, ниже приведен код файла welcome-page.jsp . В этом файле мы использовали концепцию библиотеки тегов форм Spring MVC, поэтому вы должны обратиться к статье, чтобы понять код.
Файл: welcome-page.jsp
HTML
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> < html > < head > </ head > < body > < h1 align = "center" >Two-Way Data Binding in Spring MVC with Example</ h1 > < hr /> < form:form action = "process-homepage" method = "get" modelAttribute = "nameInfo" > < div align = "center" > < p > < label for = "name1" >Enter First Name : </ label > < form:input id = "name1" path = "firstName" /> </ p > < p > < label for = "name2" >Enter Last Name : </ label > < form:input id = "name2" path = "lastName" /> </ p > < input type = "submit" value = "Bind Data" /> </ div > </ form:form > РЕКОМЕНДУЕМЫЕ СТАТЬИ |