Springboot learning series: la page JSP appelle JS, la page affiche des caractères déformés

Scénario de problème

Récemment, l'ancien projet est en cours de migration et de transformation, le cadre technique est SSH3（Spring+Struts2+Hibernate）, et le codage du projet est GBK, JSPet JStout est GBKcodé. Et nous utilisons maintenant généralement le UTF-8codage pour le développement, et de nombreuses technologies sont utilisées par défaut UTF-8. Donc, le problème est ici. springbootDémarrez le programme et ouvrez la JSPpage de connexion . Après la connexion, la page d'origine s'affiche normalement, mais JScertains caractères déformés sont affichés. Ce billet de blog explique principalement cette situation.

Environnement problématique

Logiciel	version
printemps	2.1.1.LIBÉRATION

causes du problème

Problème d'encodage de fichier généré par la cible

JSSi des caractères déformés sont affichés, la première idée est JSqu'il y a un problème avec l'encodage. Ensuite, j'ai vérifié le code déformé JSet le code du projet est GBKcomme indiqué ci-dessous:

Ensuite, j'ai vérifié le targetfichier généré à l'intérieur et j'ai trouvé que le fichier est encodé au format UTF-8. Étant donné que le projet est utilisé mavenpour le développement, il est nécessaire de coder les paramètres de ressource, comme indiqué dans la figure ci-dessous:

<properties>
   <project.build.sourceEncoding>GBK</project.build.sourceEncoding>
</properties>

<!-- 忽略无web.xml警告 -->
<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <configuration>
        <failOnMissingWebXml>false</failOnMissingWebXml>
        <resourceEncoding>GBK</resourceEncoding>
    </configuration>
</plugin>

Ici , il maven-war-pluginest 3.2.2. De plus, spécifiez quand le package est généré -Dfile.encoding=GBK. Après le reconditionnement, vous pouvez voir que le codage du fichier est GBK. Cependant, si tout le monde pense que c'est fini, alors c'est trop naïf.

Après la mise à niveau, je l'ai testé, mais cela ne fonctionnait toujours pas et l'interface montrait toujours des caractères déformés. Puis, je me suis demandé si c'était parce que la conversion a été effectuée lorsque le fichier tomcata été retourné JS. Selon cette idée, j'ai ouvert la console de Google Chrome, vérifié l'en- JStête déformé et vu que le paramètre de réponse était Content-Typeaffiché application/javascript;charset=UTF-8. Et JSPle paramètre Content-Typede réponse de l'en-tête est text/html;charset=GBK. Par conséquent, la correspondance JSou le CSScodage peut être converti en fonction du filtre .

Définir un filtre pour la conversion d'encodage

Comme il s'agit d'un ancien projet et que le code du projet est défini GBK, ajustez donc directement la JSsomme impliquée CSSà GBK, laissez-moi vous montrer le code!

@WebFilter(urlPatterns = {
    
     "*.js", "*.css" }, filterName = "ResourceCharacterEncodingFilter")
public class ResourceCharacterEncodingFilter implements Filter {
    
    
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
    
    
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        String uri = request.getRequestURI().split("\\?")[0];
        // 非JS、CSS不必做转换
        if (!(uri.endsWith(".js") || uri.endsWith(".css"))) {
    
    
            defaultDo(request, response, filterChain);
            return;
        }
		// 设置为GBK
        request.setCharacterEncoding("GBK");
        response.setCharacterEncoding("GBK");

        filterChain.doFilter(request, response);
    }

    private void defaultDo(ServletRequest request, ServletResponse response, FilterChain filterChain)
            throws IOException, ServletException {
    
    
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");

        filterChain.doFilter(request, response);
    }
}

Ce filtre est principalement destiné au transcodage JSet au CSStranscodage! ! !

résultat

Après avoir ajouté ce filtre, après le redémarrage, l'accès au projet est normal et il n'y a pas de code déformé.

Pour résumer

De nombreux éléments doivent être pris en compte pour la migration et la transformation d'anciens projets. Cet article présente principalement les problèmes rencontrés dans le processus de migration et de transformation et leurs solutions.

Demander des éloges

Si mon article est utile à tout le monde, vous pouvez cliquer sur J'aime ou comme favori en bas de l'article;
s'il y a une bonne discussion, vous pouvez laisser un message;
si vous souhaitez continuer à consulter mes futurs articles, vous pouvez cliquer sur Suivez-
vous peut scanner le code QR suivant pour suivre mon compte public: Fengye Zhixuege, découvrez ma dernière part!