Автор оригинала: Maria Yapryntseva.
Этот пост был вдохновлен статьей Пабло Альбелла в блоге Toptal Угловой 5 и ASP.NET Ядро . Действительно, Angular 2+ является одним из самых популярных, современных и мощных фреймворков для разработки интерфейсов. И интеграция его с серверной частью предприятия иногда может стать довольно сложной задачей. Пабло прекрасно описал, как это сделать для бэкенда .NET.
Но поскольку Java остается самым популярным в мире языком программирования с более чем 12 миллионами разработчиков и более чем 15 миллиардами установленных устройств ,
Если вы поищете тему в Google , вы найдете сотни сообщений о том, как интегрировать Spring Framework с Angular. Spring действительно очень полезный и мощный инструмент для корпоративных приложений. Это де-факто стандарт для корпоративной разработки на Java. Я разработал много проектов на этой платформе, и мне действительно нравится работать с ней.
Но что, если в вашей компании уже есть серверная часть Java EE без Spring, и ее повторная сборка с помощью Spring не является вариантом? Следует ли вам забыть об Angular, Vue, Node или любых других фреймворках Javascript? У меня для тебя хорошие новости! Вы все еще можете интегрировать интерфейс Javascript в стандартную Java EE. Итак, давайте создадим приложение с полным стеком с интерфейсом Angular 2+ и бэкендом Java EE.
Я не буду повторять шаги по разработке угловой части. Пабло подробно описал это в своей статье , я не мог бы сделать это лучше. Поэтому я просто отсылаю вас к его посту.
Итак, давайте сразу перейдем к интеграционной части. Для интеграции любой интерфейсной платформы Javascript с Java EE мы можем использовать технологию JAX-RS . JAX-RS-это стандартная библиотека в Java EE, представленная в Java SE 5 и разработанная для предоставления API для RESTful веб-сервисов. JAX-RS предоставляет аннотации для отображения класса ресурсов (a POJO ) в качестве веб-ресурса. Давайте создадим эти классы POJO с аннотациями JPA. Еще одна вещь: чтобы обеспечить сериализацию наших данных и возможность их предоставления с помощью веб-служб REST, нам необходимо добавить в наш проект библиотеки Jersey и вспомогательные библиотеки:
org.glassfish.jersey.core/jersey-client org.glassfish.jersey.core/jersey-server org.glassfish.jersey.containers/jersey-container-servlet org.glassfish.jersey.media/jersey-media-moxy
Чтобы объявить сервлет Джерси и соответствующее сопоставление URL-адресов, а также фильтр CORS, давайте изменим web.xml файл:
1:2: 10:JAX-RS Servlet 3:org.glassfish.jersey.servlet.ServletContainer 4:5: 8:jersey.config.server.provider.packages 6:com.example.angular-java-integration 7:1 9:11: 14:JAX-RS Servlet 12:/jaxrs/* 13:15: 26:CorsFilter 16:org.apache.catalina.filters.CorsFilter 17:18: 21:cors.allowed.origins 19:* 20:22: 25:cors.allowed.methods 23:GET,POST,HEAD,OPTIONS,PUT 24:27: CorsFilter 28:/* 29:
Почему, вы бы сказали, фильтр CORS? В зависимости от того, как и где вы развертываете свое серверное приложение и какой сервер вы используете, вам, скорее всего, потребуется изменить эти параметры, чтобы разрешить вашему интерфейсному приложению Angular доступ к службам, предоставляемым серверной частью. По сути, если ваше клиентское приложение работает в другом домене, современные браузеры ограничат вызов, выполняемый в домене, на котором работает ваш сервер, если только заголовки в серверной части не указывают, что этот вызов разрешен . Затем мы создаем классы сущностей (JPA). В нашем примере это будет просто простой пользователь класса с именем пользователя и паролем:
1: import javax.persistence.Column;
2: import javax.persistence.Entity;
3: import javax.persistence.Id;
4: import javax.persistence.Table;
5: import javax.xml.bind.annotation.XmlRootElement;
6:
7: @XmlRootElement
8: @Entity
9: @Table(name = "USER", schema = "TOPTAL")
10: public class User implements java.io.Serializable {
11: private static final long serialVersionUID = 1L;
12: private Integer id;
13: private String username;
14: private String password;
15:
16: public User() {
17: }
18:
19: @Id
20: @Column(name = "ID")
21: public Integer getId() {
22: return this.id;
23: }
24:
25: public void setId(Integer id) {
26: this.id = id;
27: }
28:
29: @Column(name = "NAME", length = 50)
30: public String getUsername() {
31: return this.username;
32: }
33:
34: public void setUsername(String username) {
35: this.username = username;
36: }
37:
38: @Column(name = "PASSWORD", length = 30)
39: public String getPassword() {
40: return this.password;
41: }
42:
43: public void setPassword(String password) {
44: this.password = password;
45: }
46: }
Наконец, мы подошли к тому, чтобы сделать наш класс пользователей доступным через службы REST. Вот класс, который предоставляет остальные сервисы через JAX-RS.
1: import java.util.List;
2:
3: import javax.persistence.EntityManager;
4: import javax.ws.rs.Consumes;
5: import javax.ws.rs.DELETE;
6: import javax.ws.rs.GET;
7: import javax.ws.rs.PUT;
8: import javax.ws.rs.Path;
9: import javax.ws.rs.PathParam;
10: import javax.ws.rs.Produces;
11: import javax.ws.rs.core.MediaType;
12: import javax.ws.rs.core.Response;
13: import javax.ws.rs.core.Response.Status;
14:
15: @javax.inject.Singleton
16: @Path("User")
17: public class UserFacade extends AbstractFacade {
18:
19: private EntityManager em;
20:
21: public UserFacade() {
22: super(User.class);
23: }
24:
25: @PUT
26: @Override
27: @Consumes({ "application/xml", "application/json" })
28: public Response edit(User entity) {
29: if (entity.getName().length() <= 3) {
30: return Response.status(Status.CONFLICT).entity("Username is too short").type(MediaType.TEXT_PLAIN).build();
31: }
32: return super.edit(entity);
33: }
34:
35: @DELETE
36: @Path("remove/{id}")
37: public Response remove(@PathParam("id") Integer id) {
38: return super.remove(super.find(id));
39: }
40:
41: @GET
42: @Path("{id}")
43: @Produces({ "application/json" })
44: public User find(@PathParam("id") Integer id) {
45: return super.find(id);
46: }
47:
48: @GET
49: @Override
50: @Produces({ "application/json" })
51: public List findAll() {
52: return super.findAll();
53: }
54:
55: @GET
56: @Path("count")
57: @Produces("text/plain")
58: public String countREST() {
59: return String.valueOf(super.count());
60: }
61:
62: @Override
63: protected EntityManager getEntityManager() {
64: em = EntityManagerHelper.getEntityManager();
65: return em;
66: }
67: }
И это в основном все. Убедитесь, что ваше серверное приложение развернуто и запущено в первую очередь. Вы можете проверить, что серверная часть возвращает данные JSON по URL http://localhost:8080/AngularJavaIntegration/jaxrs/User/1 . А затем запустите свой угловой интерфейс. Вот мы и пришли! Приложение с полным стеком с Angular 2+ на переднем конце и Java EE на заднем.
Оригинал: “https://www.codementor.io/@mariayapryntseva/full-stack-tutorial-angular-2-and-java-ee-n5yizx229”