В этом посте мы увидим, как создать пример загрузки AngularJS для Spring.

Мы будем использовать версию Spring boot 1.5.3 Release, она поставляется с hibernate 5. Мы создадим приложение AngularJS Spring boot, которое будет иметь AngularJS в качестве пользовательского интерфейса. Он предоставит пользовательский интерфейс, из которого вы можете добавлять, обновлять или удалять базу данных клиентов. Мы будем использовать контроллер, службы и классы DAO для реализации этих функций. Мы будем подключаться к базе данных MySQL, используя класс гибернации SessionFactory.

Исходный код на гитхабе:

"Скачать"

Пример Spring Boot AngularJS:

Вот шаги для создания примера AngularJS Spring boot.

Структура проекта:

Инструменты, используемые для создания ниже проекта:

  1. Весенняя загрузка 1.5.3.РЕЛИЗ
  2. Весна 4.3.8.РЕЛИЗ
  3. Встроить Томкэт 8
  4. Мавен 3
  5. Ява 8
  6. Затмение
  7. Спящий режим 5.3.5
  8. MySQL 5.7.18

Шаг 1. Создайте динамический веб-проект с использованием maven в eclipse с именем SpringBootAngularJSExample.
Шаг 2. Измените pom.xml, как показано ниже:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>org.arpit.java2blog</groupId>
	<artifactId>SpringBootHibernateExample</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>SpringBootHibernateExample Maven Webapp</name>
	<url>http://maven.apache.org</url>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.3.RELEASE</version>
	</parent>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>
		<!-- JSTL for JSP -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>
		<!-- For JSP compilation -->
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
			<scope>provided</scope>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.threeten/threetenbp -->
		<dependency>
			<groupId>org.threeten</groupId>
			<artifactId>threetenbp</artifactId>
			<version>0.7.2</version>
		</dependency>
	</dependencies>
	<build>
		<finalName>SpringBootHibernateExample</finalName>
	</build>
</project>

Spring-boot-starter-parent предоставляет вам все параметры maven по умолчанию, необходимые для любого весеннего проекта.
Поскольку мы разрабатываем веб-приложение, нам также нужно добавить зависимость spring-boot-starter-web, а также нам нужно включить pring-boot-starter-data-jpa для запуска этого приложения в режиме гибернации. Вам также необходимо установить mysql-connector-java для драйвера MySql JDBC. Если вы используете любую другую базу данных, вам нужно использовать другой коннектор базы данных.
Давайте сначала настроим спящий режим.

Спящий режим

Шаг 3.Создайте файл с именем «HibernateConfiguration.java» в пакете .org.arpit.java2blog.

package org.arpit.java2blog;	
import java.util.Properties;
import javax.sql.DataSource;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.orm.jpa.EntityManagerFactoryBuilder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.jdbc.datasource.DriverManagerDataSource;
import org.springframework.orm.hibernate5.HibernateTransactionManager;
import org.springframework.orm.hibernate5.LocalSessionFactoryBean;
import org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean;
import org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter;
import org.springframework.transaction.annotation.EnableTransactionManagement;
@Configuration
@EnableTransactionManagement
public class HibernateConfiguration {
	@Value("${db.driver}")
	private String DRIVER;
	@Value("${db.password}")
	private String PASSWORD;
	@Value("${db.url}")
	private String URL;
	@Value("${db.username}")
	private String USERNAME;
	@Value("${hibernate.dialect}")
	private String DIALECT;
	@Value("${hibernate.show_sql}")
	private String SHOW_SQL;
	@Value("${hibernate.hbm2ddl.auto}")
	private String HBM2DDL_AUTO;
	@Value("${entitymanager.packagesToScan}")
	private String PACKAGES_TO_SCAN;
	@Bean
	public DataSource dataSource() {
		DriverManagerDataSource dataSource = new DriverManagerDataSource();
		dataSource.setDriverClassName(DRIVER);
		dataSource.setUrl(URL);
		dataSource.setUsername(USERNAME);
		dataSource.setPassword(PASSWORD);
		return dataSource;
	}
	@Bean
	public LocalSessionFactoryBean sessionFactory() {
		LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
		sessionFactory.setDataSource(dataSource());
		sessionFactory.setPackagesToScan(PACKAGES_TO_SCAN);
		Properties hibernateProperties = new Properties();
		hibernateProperties.put("hibernate.dialect", DIALECT);
		hibernateProperties.put("hibernate.show_sql", SHOW_SQL);
		hibernateProperties.put("hibernate.hbm2ddl.auto", HBM2DDL_AUTO);
		sessionFactory.setHibernateProperties(hibernateProperties);
		return sessionFactory;
	}
	@Bean
	public HibernateTransactionManager transactionManager() {
		HibernateTransactionManager transactionManager = new HibernateTransactionManager();
		transactionManager.setSessionFactory(sessionFactory().getObject());
		return transactionManager;
	}	
}

Вышеупомянутый класс аннотирован аннотациями @Configuration и @Bean. Эти аннотации используются для определения компонента в Spring.

@Configuration аналогичен тегу ‹beans› в Spring XML configuration, а @Bean аналогичен тегу ‹bean›.

Аннотация @Value используется для вставки переменных из файлов свойств. В этом случае он будет читать из application.properties, которые мы собираемся создать на следующем шаге.

Шаг 4.Создайте файл с именем «application.properties» в пакете /src/main/resources.

logging.level=DEBUG
# Database
db.driver: com.mysql.jdbc.Driver
db.url: jdbc:mysql://localhost:3306/CustomerData
db.username: root
db.password: admin
 
# Hibernate
hibernate.dialect: org.hibernate.dialect.MySQL5Dialect
hibernate.show_sql: true
hibernate.hbm2ddl.auto: create
entitymanager.packagesToScan: org
spring.jpa.properties.hibernate.enable_lazy_load_no_trans=true

Класс модели

Шаг 5. Создайте файл с именем «Customer.java» в пакете .org.arpit.java2blog.model.

package org.arpit.java2blog.model;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
/*
 * This is our model class and it corresponds to Customer table in database
 */
@Entity
@Table(name="CUSTOMER")
public class Customer{
	@Id
	@Column(name="id")
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	int id;
	@Column(name="customerName")
	String customerName; 
	@Column(name="email")
	String email;
	public Customer() {
		super();
	}
	public Customer(String customerName,String email) {
		super();
		this.customerName=customerName;
		this.email=email;
	}
	public String getCustomerName() {
		return customerName;
	}
	public void setCustomerName(String customerName) {
		this.customerName = customerName;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	
}

@Entity используется для создания постоянного класса pojo. Для этого класса Java у вас будет соответствующая таблица в базе данных. @Column используется для сопоставления аннотированного атрибута с соответствующим столбцом в таблице.

Создайте таблицу клиентов:

Создайте таблицу клиентов в базе данных со следующим DDL.

CREATE TABLE `CUSTOMER` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`customerName` varchar(255) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,< br /> ПЕРВИЧНЫЙ КЛЮЧ (`id`)
)

Класс контроллера

Шаг 6.Создайте файл с именем «CustomerController.java» в пакете .org.arpit.java2blog.controller.

package org.arpit.java2blog.controller;
import java.util.List;
import org.arpit.java2blog.model.Customer;
import org.arpit.java2blog.service.CustomerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class CustomerController {
	@Autowired
	CustomerService customerService;
	@RequestMapping(value = "/getAllCustomers", method = RequestMethod.GET, headers = "Accept=application/json")
	public List<Customer> getAllCustomers(Model model) {
		List<Customer> listOfCustomers = customerService.getAllCustomers();
		model.addAttribute("customer", new Customer());
		model.addAttribute("listOfCustomers", listOfCustomers);
		return listOfCustomers;
	}
	@RequestMapping(value = "/", method = RequestMethod.GET, headers = "Accept=application/json")
	public String goToHomePage() {
		return "redirect:/getAllCustomers";
	}
	@RequestMapping(value = "/getCustomer/{id}", method = RequestMethod.GET, headers = "Accept=application/json")
	public void getCustomerById(@PathVariable int id) {
		customerService.getCustomer(id);
	}
	@RequestMapping(value = "/addCustomer", method = RequestMethod.POST, headers = "Accept=application/json")
	public Customer addCustomer(@RequestBody Customer customer) {
		return customerService.addCustomer(customer);
	}
	@RequestMapping(value = "/addCustomer", method = RequestMethod.PUT, headers = "Accept=application/json")
	public Customer updateCustomer(@RequestBody Customer customer) {
		return customerService.updateCustomer(customer); 
	}	
	@RequestMapping(value = "/deleteCustomer/{id}", method = RequestMethod.DELETE, headers = "Accept=application/json")
	public void deleteCustomer(@PathVariable("id") int id) {
		customerService.deleteCustomer(id);

	}	
}

Сервисный уровень

Шаг 7.Создайте файл с именем «CustomerService.java» в пакете .org.arpit.java2blog.service.

package org.arpit.java2blog.service;
import java.util.List;
import javax.transaction.Transactional;
import org.arpit.java2blog.dao.CustomerDao;
import org.arpit.java2blog.model.Customer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service("customerService")
public class CustomerService {
	@Autowired
	CustomerDao customerDao;
	@Transactional
	public List<Customer> getAllCustomers() {
		return customerDao.getAllCustomers();
	}
	@Transactional
	public Customer getCustomer(int id) {
		return customerDao.getCustomer(id);
	}
	@Transactional
	public Customer addCustomer(Customer customer) {
		customerDao.addCustomer(customer);
		return customer;
	}
	@Transactional
	public Customer updateCustomer(Customer customer) {
		customerDao.updateCustomer(customer);
		return customer;
	}
	@Transactional
	public void deleteCustomer(int id) {
		customerDao.deleteCustomer(id);
	}
}

Слой ДАО

Шаг 8. Создайте интерфейс с именем «CustomerDao.java» в пакете .org.arpit.java2blog.dao.

package org.arpit.java2blog.dao;
import java.util.List;
import org.arpit.java2blog.springboot.Customer;
public interface CustomerDao {
	public List<Customer> getAllCustomers() ;
	public Customer getCustomer(int id) ;
	public Customer addCustomer(Customer customer);
	public void updateCustomer(Customer customer) ;
	public void deleteCustomer(int id) ;
}

Шаг 9. Создайте файл с именем «CustomerDaoImpl.java» в пакете .org.arpit.java2blog.dao.

package org.arpit.java2blog.dao;
import java.util.List;
import org.arpit.java2blog.model.Customer;
import org.hibernate.Hibernate;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
@Repository
public class CustomerDaoImpl implements CustomerDao{
	@Autowired
	private SessionFactory sessionFactory;
	public void setSessionFactory(SessionFactory sf) {
		this.sessionFactory = sf;
	}
	public List<Customer> getAllCustomers() {
		Session session = this.sessionFactory.getCurrentSession();
		List<Customer>  customerList = session.createQuery("from Customer").list();
		return customerList;
	}
	public Customer getCustomer(int id) {
		Session session = this.sessionFactory.getCurrentSession();
		Customer customer = (Customer) session.get(Customer.class, id);
		return customer;
	}
	public Customer addCustomer(Customer customer) {
		Session session = this.sessionFactory.getCurrentSession();
		session.save(customer);
		return customer;
	}
	public void updateCustomer(Customer customer) {
		Session session = this.sessionFactory.getCurrentSession();
		session.update(customer);
	}
	public void deleteCustomer(int id) {
		Session session = this.sessionFactory.getCurrentSession();
		Customer p = (Customer) session.load(Customer.class, new Integer(id));
		if (null != p) {
			session.delete(p);
		}
	} 
}

Представление AngularJS

Шаг 10. Создайте файл с именем «customerDataAngularJS.html» в пакете .src.main.webapp.

<html>
<head>
<script
	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<title>Spring Boot AngularJS example</title>
<script type="text/javascript">
            var app = angular.module("CustomerManagement", []);
         
            //Controller Part
            app.controller("CustomerController", function($scope, $http) {
         
               
                $scope.customers = [];
                $scope.customerForm = {
                    id : -1,
                    customerName : "",
                    email : ""
                };
         
                //Now load the data from server
                _refreshCustomerData();
         
                //HTTP POST/PUT methods for add/edit customer 
                // with the help of id, we are going to find out whether it is put or post operation
                
                $scope.submitCustomer = function() {
         
                    var method = "";
                    var url = "";
                    if ($scope.customerForm.id == -1) {
                        //Id is absent in form data, it is create new customer operation
                        method = "POST";
                        url = '/addCustomer';
                    } else {
                        //Id is present in form data, it is edit customer operation
                        method = "PUT";
                        url = '/addCustomer';
                    }
         
                    $http({
                        method : method,
                        url : url,
                        data : angular.toJson($scope.customerForm),
                        headers : {
                            'Content-Type' : 'application/json'
                        }
                    }).then( _success, _error );
                };
         
                //HTTP DELETE- delete customer by Id
                $scope.deleteCustomer = function(customer) {
                    $http({
                        method : 'DELETE',
                        url : '/deleteCustomer/' + customer.id
                    }).then(_success, _error);
                };
 
             // In case of edit, populate form fields and assign form.id with customer id
                $scope.editCustomer = function(customer) {
                  
                    $scope.customerForm.customerName = customer.customerName;
                    $scope.customerForm.email = customer.email;
                    $scope.customerForm.id = customer.id;
                };
         
                /* Private Methods */
                //HTTP GET- get all customers collection
                function _refreshCustomerData() {
                    $http({
                        method : 'GET',
                        url : 'http://localhost:8080/getAllCustomers'
                    }).then(function successCallback(response) {
                        $scope.customers = response.data;
                    }, function errorCallback(response) {
                        console.log(response.statusText);
                    });
                }
         
                function _success(response) {
                    _refreshCustomerData();
                    _clearFormData()
                }
         
                function _error(response) {
                    console.log(response.statusText);
                }
         
                //Clear the form
                function _clearFormData() {
                    $scope.customerForm.id = -1;
                    $scope.customerForm.customerName = "";
                    $scope.customerForm.email = "";
                
                };
            });
        </script>
<style>
.blue-button {
	background: #25A6E1;
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',
		endColorstr='#188BC0', GradientType=0);
	padding: 3px 5px;
	color: #fff;
	font-family: 'Helvetica Neue', sans-serif;
	font-size: 12px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 4px;
	border: 1px solid #1A87B9
}
.red-button {
	background: #CD5C5C;
	padding: 3px 5px;
	color: #fff;
	font-family: 'Helvetica Neue', sans-serif;
	font-size: 12px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 4px;
	border: 1px solid #CD5C5C
}
table {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	width: 50%;
}
caption {
	text-align: left;
	color: silver;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px;
}
th {
	background: SteelBlue;
	color: white;
}
tbody tr:nth-child(even) {
	background: WhiteSmoke;
}
tbody tr td:nth-child(2) {
	text-align: center;
}
tbody tr td:nth-child(3), tbody tr td:nth-child(4) {
	text-align: center;
	font-family: monospace;
}
tfoot {
	background: SeaGreen;
	color: white;
	text-align: right;
}
tfoot tr th:last-child {
	font-family: monospace;
}
td, th {
	border: 1px solid gray;
	width: 25%;
	text-align: left;
	padding: 5px 10px;
}
</style>
<head>
<body ng-app="CustomerManagement" ng-controller="CustomerController">
	<h1>Customer Mart</h1>
	<form ng-submit="submitCustomer()">
		<table>
			<tr>
				<th colspan="2">Add/Edit customer</th>
			</tr>
			<tr>
				<td>Customer Name</td>
				<td><input type="text" ng-model="customerForm.customerName" /></td>
			</tr>
			<tr>
				<td>Email</td>
				<td><input type="text" ng-model="customerForm.email" /></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="Submit"
					class="blue-button" /></td>
			</tr>
		</table>
	</form>
	<table>
		<tr>
			<th>Customer Name</th>
			<th>Email</th>
			<th>Operations</th>
		</tr>
		<tr ng-repeat="customer in customers">
			<td>{{ customer.customerName }}</td>
			<td>{{ customer.email }}</td>
			<td><a ng-click="editCustomer(customer)" class="blue-button">Edit</a>
				| <a ng-click="deleteCustomer(customer)" class="red-button">Delete</a></td>
		</tr>
	</table>
</body>
</html>

Пояснение:

  • Мы ввели $http, как в примере с ajax, через конструктор контроллера.
app.controller("CustomerController", function($scope, $http) {
         
               
                $scope.customers = [];
...
  • Мы определили различные методы в зависимости от таких операций, как editCustomer, deleteCustomer, submitCustomer.
  • Когда вы нажимаете кнопку отправки в форме, она фактически вызывает POST или PUT в зависимости от операции. Если вы нажмете «Редактировать и отправить данные», они будут запущены, так как будут обновлены на существующем ресурсе. Если вы напрямую отправляете данные, то это будет операция POST для создания нового ресурса,
  • Каждый раз, когда вы отправляете данные, он вызывает refereshCustomerData() для обновления таблицы Customer ниже.
  • Когда вы вызываете $http, вам нужно передать тип метода и URL-адрес, он будет вызывать его в соответствии с ним. Вы можете указать абсолютный URL-адрес или относительный URL-адрес относительно корня контекста веб-приложения.
//HTTP GET- get all customers collection
                function _refreshCustomerData() {
                    $http({
                        method : 'GET',
                        url : 'http://localhost:8080/getAllCustomers'
                    }).then(function successCallback(response) {
                        $scope.customers = response.data;
                    }, function errorCallback(response) {
                        console.log(response.statusText);
                    });
                }
                }

Основной файл весенней загрузки

Шаг 11. Создайте файл с именем SpringBootAngularJSApplication.java в пакете .org.arpit.java2blog.

package org.arpit.java2blog;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class SpringBootAngularJSApplication {
	public static void main(String[] args) 
	{
		SpringApplication.run(SpringBootAngularJSApplication.class, args);   
	}
}

Мы только что добавили @SpringBootApplication, и он выполняет всю работу.
Давайте разберемся с этой аннотацией подробнее.
@SpringBootApplication — это аннотация, которая добавляет все следующее:

@Configuration делает класс источником определений bean-компонентов для контекста приложения.
@EnableAutoConfiguration позволяет Spring boot добавлять bean-компоненты, представленные в настройках пути к классам и различных настройках свойств.
Обычно вы добавляете @EnableWebMvc для Spring MVC, но Spring Boot добавляет его автоматически, когда видит spring-webmvc в пути к классам.
Это помечает приложение как веб-приложение и активирует ключевые функции, такие как настройка DispatcherServlet.
@ComponentScan сообщает Spring для поиска других компонентов, конфигураций и служб в пакете по умолчанию, что позволяет ему находить контроллеры.
Если конкретные пакеты не определены, сканирование будет происходить из пакета класса, объявляющего эту аннотацию.

Запустите приложение

Шаг 12. Пришло время выполнить сборку maven.

Щелкните правой кнопкой мыши проект -> Запустить от имени -> Сборка Maven.

Шаг 13. Укажите цели чистой установки spring-boot:run (указанные ниже) и нажмите «Выполнить».

Шаг 14.После того, как вы закончите сборку Maven, давайте перейдем в браузер и введем следующий URL.

http://localhost:8080/customerDataAngularJS.html

Вы увидите ниже экран.

Добавьте следующую информацию к имени клиента: как «Джон» и отправьте электронное письмо как «[email protected]» и нажмите «Отправить».

Теперь я добавляю больше клиентов, используя описанный выше метод.

Давайте нажмем на ссылку редактирования, соответствующую идентификатору клиента: 3, которого зовут Дэвид.

Я меняю адрес электронной почты с «[email protected]» на «[email protected]».

Когда вы нажмете «Отправить», вы увидите экран ниже.

Как видите, адрес электронной почты Дэвида изменился на «[email protected]».

Нажмите на ссылку удаления, соответствующую идентификатору клиента: 2, которого зовут Мартин, и вы увидите экран ниже.

Как видите, Мартина вычеркнули из списка.

Первоначально опубликовано в блоге Java2 под заголовком Пример Spring Boot AngularJS

Это все о примере Spring Boot AngularJS.

Вам также может понравиться: