Problema de Encoding UTF-8 en Spring MVC

CharacterEncodingFilter es un filtro que nos ayuda a especificar un tipo de codificación de caracteres concreto tanto para solicitudes y como para las respuestas.

Se puede configurar en el fichero web.xml de tu aplicación. De la siguiente forma:

 

   encodingFilter
   org.springframework.web.filter.CharacterEncodingFilter
   
       encoding
       UTF-8
   
   
       forceEncoding
       true
   


   encodingFilter
   /*

En el caso de que estés usando Spring Security, en lugar de configurar el CharacterEncodingFilter en el web.xml necesitas crear un filtro personalizado y añadirlo a la cadena de filtros en primer lugar. Puedes asegurarte que el filtro esté el primero si lo añades con el addFilterBefore en tu clase WebSecurityConfigurerAdapter. Ejemplo:

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
   ...
   @Override
   protected void configure(HttpSecurity http) throws Exception {
      http.addFilterBefore(new EncodingFilter(), ChannelProcessingFilter.class);
      ...
   }
}
public class EncodingFilter extends GenericFilterBean {
@Override
public void doFilter(
   ServletRequest request,
   ServletResponse response,
   FilterChain chain) throws IOException, ServletException {
      request.setCharacterEncoding("UTF-8");
      response.setCharacterEncoding("UTF-8");
      chain.doFilter(request, response);
   }
}

Además, para que funcione el encoding, se debe tener en cuenta lo siguiente:
1 – Es necesario añadir en las jsps la siguiente definición.

< %@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" % >

2 – En caso de estar utilizando Tomcat puede se sea necesario setear el valor URIEncoding en el fichero server.xml.

Obtener la IP de un contenedor de Docker

La forma más rápida de saber la ip asignada a un contenedor de docker es utilizar el comando docker inspect. Un ejemplo sería el siguiente:

Exportar e Importar claves GPG

Si tienes en tu equipo creadas claves GPG y quieres poder pasarlas a otro equipo. Puedes hacer los siguiente:

A la hora de importar la clave privada te saltará un popup que te pide la frase secreta con la que fue creada inicialmente.

Utilizar GPG para encriptación de ficheros

GNU Privacy Guard (GnuPG ) o GPG permite: cifrar y firmar sus datos/comunicaciones. Utilizando para ello sistema de gestión de claves.

A continuación expongo un ejemplo de como encriptar un fichero y luego desencriptarlo usando para ello GPG.

Paso 1/ Generamos una clave privada y pública.

Paso 2/ Encriptamos un fichero Prueba.txt

Paso 2/ Desencriptamos el fichero Prueba.txt.gpg que se nos había creado anteriormente.

Uso de Profiles en Spring-boot

Distintas formas de manejar de los profiles con spring-boot para personalizar las ejecuciones:

1 – Establecer el profile en la property spring.profiles.active. Esto lo que hace es que si por ejemplo le establecemos el profile prof1 la aplicación irá a buscar la configuración al application-prof1.properties.

//file: application.properties
spring.profiles.active = prof1

2 – Podemos en ejecución decirle a una clase que utilice un profile distinto al marcado. Utilizando para ello la anotación @ActiveProfiles

@SpringBootTest
@ActiveProfiles("prof2")
class Example2ProfileTest {
...
}

3 – Puedes definir beans en función de un profile utilizando la anotacion @Profile en la clase que vas a definirlos.
A continuación, un ejemplo de como se genera un bean en función de si el profile es prof3 u otro con un test de prueba.

@Profile("prof3")
@Configuration
public class Prof3Configuration {
	@Bean
	public String helloWorld() {
		return "Hello World prof3";
	}
}

@SpringBootTest
@ActiveProfiles("prof3")
class Example3ProfileTest {
	@Resource(name = "helloWorld")
	private String helloWorld;
	@Test
	void dummyTest() {
		Assertions.assertEquals(helloWorld, "Hello World prof3");
	}
}

@Profile("!prof3")
@Configuration
public class NotProf3Configuration {
	@Bean
	public String helloWorld() {
		return "Hello World other not prof3";
	}
}

@SpringBootTest
@ActiveProfiles("other")
class ExampleNot3ProfileTest {
	@Autowired
	private String helloWorld;
	@Test
	void dummyTest() {
		Assertions.assertEquals(helloWorld, "Hello World other not prof3");
	}
}

4 – Se puede utilizar la property spring.profile.include para incluir profiles adicionales a la ejecución:

//application.properties
spring.profiles.include=prof4a,prof4b

//application-prof4a.properties
custom.hello.world.4a=Hello World prof4a
custom.hello.world.4b=x

//application-prof4b.properties
custom.hello.world.4b=Hello World prof4b

@SpringBootTest
class Example4ProfileTest {
	@Value("${custom.hello.world.4a}")
	private String customHelloWorld4a;
	@Value("${custom.hello.world.4b}")
	private String customHelloWorld4b;
	@Test
	void dummyTest() {
		Assertions.assertEquals(customHelloWorld4a, "Hello World prof4a");
		Assertions.assertEquals(customHelloWorld4b, "Hello World prof4b");
	}
}

5 – Uso de profiles de maven junto con los de Spring-Boot

	
		
			prof1
	        
	            true
	        
			
				prof1
			
		
		
			prof5
			
				prof5
			
		
	



	    
	        
	            src/main/resources
	            true
	        
	    
...

//application.properties
spring.profiles.active=@spring.profiles.active@

@SpringBootTest
class Example5ProfileTest {

	@Value("${custom.hello.world}")
	private String customHelloWorld;
	
	@Value("${spring.profiles.active}")
	private String profileActive;
	
	 @BeforeEach
	 public void beforeMethod() {
		 assumeTrue( profileActive.equals("prof5"));
	 }
	 
	@Test
	void dummyTest() {
		Assertions.assertEquals(customHelloWorld, "Hello World prof5");
	}

}

Al contruir con maven podemos indicar un profile definido en el pom.xml o bien no poner ninguno y que coje el indicado como default «prof1»

mvn clean test -Pprof5

Ejemplos

Gestión de múltiples versiones de pyton en Ubuntu

– Paso previo, añadir software-properties-common y repositorio.

sudo apt install software-properties-common
sudo add-apt-repository ppa:deadsnakes/ppa

– Instalación de las versiones de python: 3.10 y 2.7.

sudo apt install python3.10
python3.10 --version

sudo apt install python2.7
python3.7 --version

– Configuración de ubuntu para facilitar el cambio de una version a otra.

//Creas enlaces simbolicos con update-alternatives
sudo update-alternatives --install /usr/bin/python python /usr/bin/python2.7 1
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3.10 2

//Menu para seleccionar la version elegida
sudo update-alternatives --config python

//comprobar la versión activa
python --version

https://www.python.org/downloads/

Url dinámicas con react

Podemos parametrizar las urls en React. Esto nos va a permitir tener url dinámicas en función a unos parametros. Para ver su funcionamiento se muestra un ejemplo:

1 – Definición de parámetros en la url
Dado un route, podemos indicar los parámetros como en el ejemplo :category y :type

Fuente

2 – Utilización de esos parámetros en el componente invocado
La forma de recoger luego esos párametros seria con useParams.

import { useParams } from "react-router-dom"
...
const { category } = useParams()
...

Fuente

Hooks de React: useState y useEffect

Para poder utilizar estos hooks lo primero es importarlos.

import React, { useState, useEffect } from 'react';

– useState: se trata de una función que crea una variable donde se puede almacenar el estado del componente. Acepta un valor inicial para esa variable y devuelve un array con dos elementos, el valor de la variable y la función para modificarla.

const [isLoading, setIsLoading] = useState(false);

– useEffect: se usa para la inicialización o modificación de variables, llamadas a APIs, etc. La llamada a useEffect acepta una función como argumento que se ejecuta por defecto cuando el componente se renderiza por primera vez, y después cada vez que el componente se actualice o cuando se modifique alguno de los argumentos pasados como parámetros (en el ejemplo category y type).

  useEffect(() => {
    const fetchDataTxt = async () => {
      setIsLoading(true);
      try {
        const result = await axios("http://" + window.location.host + "/" + category + "/" + type + "/description.txt");
        setData(result.data);
      }catch(err){
        console.log("error http://" + window.location.host + "/" + category + "/" + type + "/description.txt");
      }
      setIsLoading(false);
    };
    fetchDataTxt();
  }, [category, type]);

Ejemplos

React tips and tricks

– React Developer Tools: Herramienta para depurar el código. Es un plugin que se instala en el navegador: Chrome, Firefox.

– Simple React Snippets: Plugin para el VSCode que te facilita mucho el desarrollo.

– Fragmentos: Es muy común que un componente devuelva múltiples elementos. La forma más cómoda de hacerlo es con los tag <> </>

class Columns extends React.Component {
  render() {
    return (
      <>        
        <td>Hello</td>
        <td>World</td>
      </>
          );
  }
}

– React Bootstrap: Framework de bootstrap adaptado a React. https://react-bootstrap.github.io/

npm install react-bootstrap bootstrap@5.1.3

– Axios: Axios es un cliente HTTP ligero basado en el servicio $http que se puede utilizar con react. Documentación 1 – Documentación 2

npm install axios

Uso de dangerouslySetInnerHTML en React

Esta función te permite incrustar html directamente con React. Se utiliza en lugar de innerHTML.

const App = () => {
  const data = 'lorem ipsum';
  return (
dangerouslysetinnerhtml={{__html: data}}
  );
}
export default App;

Fuente