Com crear una aplicació web senzilla amb Java 8, Spring Boot i Angular

Bloc

Com crear una aplicació web senzilla amb Java 8, Spring Boot i Angular

Prerequisits per començar

  • Java 8 està instal·lat.
  • Qualsevol IDE de Java (preferiblement STS o IntelliJ IDEA).
  • Comprensió bàsica del desenvolupament web i la interfície d’usuari basats en Java i Spring mitjançant HTML, CSS i JavaScript.

Teló de fons

En aquest article, intentaré crear una petita aplicació web de punta a punta mitjançant Java 8 i Arrencada de primavera .

He escollit SpringBoot perquè és molt més fàcil de configurar i funciona bé amb altres piles tecnològiques. També he utilitzat una API REST i SpringData JPA amb una base de dades H2.

jo solia Inicialitzador de primavera per afegir totes les dependències i crear un projecte de treball en blanc amb totes les meves configuracions.

He utilitzat Maven com a eina de construcció, tot i que també es pot utilitzar Gradle.

pom.xml

4.0.0 com.example bootdemo 0.0.1-SNAPSHOT jar bootDemo Demo project for Spring Boot org.springframework.boot spring-boot-starter-parent 1.5.3.RELEASE UTF-8 UTF-8 1.8 org.springframework.boot spring-boot-starter-data-jpa org.springframework.boot spring-boot-devtools org.springframework.boot spring-boot-starter-data-rest org.springframework.boot spring-boot-starter-web com.h2database h2 runtime org.springframework.boot spring-boot-starter-test test org.springframework.restdocs spring-restdocs-mockmvc test org.springframework.boot spring-boot-maven-plugin

A la part de la IU, he utilitzat AngularJS i BootStrap CSS juntament amb JS, CSS i HTML bàsics.

He intentat seguir les directrius de codificació tant com he pogut, però tots els suggeriments són benvinguts.

Es tracta d’un projecte molt senzill que pot ser útil per crear una aplicació web de punta a punta.

Estructura del paquet

Implementació

Comencem amb la classe SpringBootApplication.

@SpringBootApplication public class BootDemoApplication { @Autowired UserRepository userRepository; public static void main(String[] args) { SpringApplication.run(BootDemoApplication.class, args); } }

Creem ara controladors.

@Controller public class HomeController { @RequestMapping('/home') public String home() { return 'index'; } }

Aquesta actuarà com la pàgina principal del nostre SPA. Ara creem un controlador per gestionar algunes trucades REST.

@RequestMapping('/user') @RestController public class UserController { @Autowired UserService userService; @RequestMapping(Constants.GET_USER_BY_ID) public UserDto getUserById(@PathVariable Integer userId) { return userService.getUserById(userId); } @RequestMapping(Constants.GET_ALL_USERS) public List getAllUsers() { return userService.getAllUsers(); } @RequestMapping(value = Constants.SAVE_USER, method = RequestMethod.POST) public void saveUser(@RequestBody UserDto userDto) { userService.saveUser(userDto); } }

Aquí tenim diferents mètodes per gestionar diferents trucades de prova des del costat del client.

He connectat automàticament una classe de servei, UserService , al controlador.

public interface UserService { UserDto getUserById(Integer userId); void saveUser(UserDto userDto); List getAllUsers(); } @Service public class UserServiceimpl implements UserService { @Autowired UserRepository userRepository; @Override public UserDto getUserById(Integer userId) { return UserConverter.entityToDto(userRepository.getOne(userId)); } @Override public void saveUser(UserDto userDto) { userRepository.save(UserConverter.dtoToEntity(userDto)); } @Override public List getAllUsers() { return userRepository.findAll().stream().map(UserConverter::entityToDto).collect(Collectors.toList()); } }

En una aplicació web típica, generalment hi ha dos tipus d’objectes de dades: DTO (per comunicar-se a través del client) i Entity (per comunicar-se a través de la base de dades).

DTE

public class UserDto { Integer userId; String userName; List skillDtos= new ArrayList(); public UserDto(Integer userId, String userName, List skillDtos) { this.userId = userId; this.userName = userName; this.skillDtos = skillDtos; } public UserDto() { } public Integer getUserId() { return userId; } public void setUserId(Integer userId) { this.userId = userId; } public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } public List getSkillDtos() { return skillDtos; } public void setSkillDtos(List skillDtos) { this.skillDtos = skillDtos; } } public class SkillDto { Integer skillId; String SkillName; public SkillDto(Integer skillId, String skillName) { this.skillId = skillId; SkillName = skillName; } public SkillDto() { } public Integer getSkillId() { return skillId; } public void setSkillId(Integer skillId) { this.skillId = skillId; } public String getSkillName() { return SkillName; } public void setSkillName(String skillName) { SkillName = skillName; } }

Entitat

@Entity public class User implements Serializable{ private static final long serialVersionUID = 0x62A6DA99AABDA8A8L; @Column @GeneratedValue(strategy = GenerationType.AUTO) @Id private Integer userId; @Column private String userName; @OneToMany(cascade = CascadeType.ALL, fetch = FetchType.EAGER) private List skills= new LinkedList(); public Integer getUserId() { return userId; } public void setUserId(Integer userId) { this.userId = userId; } public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } public List getSkills() { return skills; } public void setSkills(List skills) { this.skills = skills; } public User() { } public User(String userName, List skills) { this.userName = userName; this.skills = skills; } } @Entity public class Skill { @Column @GeneratedValue(strategy = GenerationType.AUTO) @Id private Integer skillId; @Column private String skillName; @ManyToOne private User user; public Skill(String skillName) { this.skillName = skillName; } public Integer getSkillId() { return skillId; } public void setSkillId(Integer skillId) { this.skillId = skillId; } public String getSkillName() { return skillName; } public void setSkillName(String skillName) { this.skillName = skillName; } public User getUser() { return user; } public void setUser(User user) { this.user = user; } public Skill() { } public Skill(String skillName, User user) { this.skillName = skillName; this.user = user; } }

Per a operacions de base de dades, fem servir SpringData JPA:

@Repository public interface UserRepository extends JpaRepository{ } @Repository public interface SkillRepository extends JpaRepository{ }

S'estén JpaRepository proporciona moltes operacions CRUD per defecte, i també es pot utilitzar per crear els seus propis mètodes de consulta. Llegiu més informació sobre això aquí .

Per convertir DTO -> Entity and Entity -> DTO, he creat algunes classes bàsiques de convertidors.

public class UserConverter { public static User dtoToEntity(UserDto userDto) { User user = new User(userDto.getUserName(), null); user.setUserId(userDto.getUserId()); user.setSkills(userDto.getSkillDtos().stream().map(SkillConverter::dtoToEntity).collect(Collectors.toList())); return user; } public static UserDto entityToDto(User user) { UserDto userDto = new UserDto(user.getUserId(), user.getUserName(), null); userDto.setSkillDtos(user.getSkills().stream().map(SkillConverter::entityToDto).collect(Collectors.toList())); return userDto; } } public class SkillConverter { public static Skill dtoToEntity(SkillDto SkillDto) { Skill Skill = new Skill(SkillDto.getSkillName(), null); Skill.setSkillId(SkillDto.getSkillId()); return Skill; } public static SkillDto entityToDto(Skill skill) { return new SkillDto(skill.getSkillId(), skill.getSkillName()); } }

Centrem-nos ara en la part de la IU.

Mentre s’utilitza angular , hi ha certes pautes que hem de seguir.

index.html

Main Page
User Skills Save User

{allUsers }


{{user.userName}}

{{skill.skillName}}

Mentre creeu l’HTML, no oblideu importar els fitxers JS i CSS necessaris.

app.js

'use strict' var demoApp = angular.module('demo', ['ui.bootstrap', 'demo.controllers', 'demo.services' ]); demoApp.constant('CONSTANTS', { getUserByIdUrl: '/user/getUser/', getAllUsers: '/user/getAllUsers', saveUser: '/user/saveUser' });

UserController.js

'use strict' var module = angular.module('demo.controllers', []); module.controller('UserController', ['$scope', 'UserService', function($scope, UserService) { $scope.userDto = { userId: null, userName: null, skillDtos: [] }; $scope.skills = []; UserService.getUserById(1).then(function(value) { console.log(value.data); }, function(reason) { console.log('error occured'); }, function(value) { console.log('no callback'); }); $scope.saveUser = function() { $scope.userDto.skillDtos = $scope.skills.map(skill => { return { skillId: null, skillName: skill }; }); UserService.saveUser($scope.userDto).then(function() { console.log('works'); UserService.getAllUsers().then(function(value) { $scope.allUsers = value.data; }, function(reason) { console.log('error occured'); }, function(value) { console.log('no callback'); }); $scope.skills = []; $scope.userDto = { userId: null, userName: null, skillDtos: [] }; }, function(reason) { console.log('error occured'); }, function(value) { console.log('no callback'); }); } } ]);

UserService.js

use strict' angular.module('demo.services', []).factory('UserService', ['$http', 'CONSTANTS', function($http, CONSTANTS) { var service = {}; service.getUserById = function(userId) { var url = CONSTANTS.getUserByIdUrl + userId; return $http.get(url); } service.getAllUsers = function() { return $http.get(CONSTANTS.getAllUsers); } service.saveUser = function(userDto) { return $http.post(CONSTANTS.saveUser, userDto); } return service; }]);

app.css

body{ background-color: #efefef; } span.spacing{ margin-right: 10px; } input.custom-width{ width: 200px; } input.spacing{ margin-right: 5px; }

L'aplicació es pot construir utilitzant:

mvn clean install després executeu com a fitxer jar executable mitjançant

java -jar bootdemo-0.0.1-SNAPSHOT.jar o executant directament el fitxer principal.

Obriu el navegador i premeu http: // localhost: 8080 / home

S'obrirà una pàgina senzilla. Introduïu el nom i les habilitats i les dades introduïdes es mantindran a la base de dades.

bloc de visualització css vs en línia

Als fitxers application.properties, s’han d’afegir dues configuracions.

spring.mvc.view.prefix = /views/ spring.mvc.view.suffix = .html

El codi font es pot clonar o descarregar des de aquí .

Publicat originalment per Ashish Lohia a dzone.com

================================================

Gràcies per llegir: heart: Si t’ha agradat aquesta publicació, comparteix-la amb tots els teus amics de programació. Segueix-me Facebook | Twitter

Aneu completament amb arrencada de primavera i angular

Angular7 CRUD amb exemple de nodejs i mysql

Desenvolupament web Full Stack amb MVC Angular i Spring

Creació d’una aplicació web mitjançant Spring Boot, Angular i Maven

Angular 7 + Spring Boot CRUD Exemple

#java # spring-boot #angular # desenvolupament web

dzone.com

Com crear una aplicació web senzilla amb Java 8, Spring Boot i Angular

En aquest tutorial, veurem com els desenvolupadors poden combinar diverses tecnologies per crear una aplicació web. Seguiu llegint per començar.