为什么通过controller来访问web-inf文件夹下的html页面会出现乱码?

最近在学springmvc,情况是这样:我用maven创建了web项目,首先在webapp目录下创建了一个html页面,设置了字符集编码为utf-8,此时访问这个html页面是正常的,没有乱码。当我把这个html移动到web-inf路径下然后通过controller来访问则出现乱码了。此外,在这种情况下使用不同的浏览器访问这个页面也可能显示正常,我用电脑上的edge浏览器和手机上的魅族浏览器访问没有出现乱码。
controller代码如下

package com.o2o.web.shopadmin;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
@RequestMapping(value = "shopadmin", method = { RequestMethod.GET })
public class ShopAdminController {
    @RequestMapping(value = "/shopoperation")
    public String shopOperation() {
        return "shop/shopoperation";
    }

}

这是html页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>商铺注册</title>
<meta http-equiv="content-language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description"
    content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="阿里巴巴国际UED前端">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<!-- Google Web Fonts -->

<link rel="stylesheet"
    href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
    href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

<link rel="apple-touch-icon-precomposed"
    href="/assets/img/apple-touch-icon-114x114.png">

<script>
    //ga
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?ba76f8230db5f616edc89ce066670710";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</head>
<body>
    <div class="page-group">
        <div id="page-layout" class="page">
            <header class="bar bar-nav">
                <a class="button button-link button-nav pull-left back"
                    href="/demos/form"> <span class="icon icon-left"></span> 返回
                </a>
                <h1 class="title">商铺信息</h1>
            </header>
            <div class="content">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商店名称</div>
                                    <div class="item-input">
                                        <input type="text" id="shop-name">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 商铺分类下拉列表 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">商铺分类</div>
                                    <div class="item-input">
                                        <select id="shop-category">
                                            
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 地区分类下拉列表 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">所在区域</div>
                                    <div class="item-input">
                                        <select id="area">
                                            
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 详细地址 text-->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">详细地址</div>
                                    <div class="item-input">
                                        <input type="text" id="shop-addr" >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 联系电话 text -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">联系电话</div>
                                    <div class="item-input">
                                        <input type="text" id="shop-phone">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 缩略图 上传控件 -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">缩略图</div>
                                    <div class="item-input">
                                        <input type="file" id="shop-img">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 店铺简介 textarea -->
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">店铺简介</div>
                                    <div class="item-input">
                                        <textarea id="shop-desc"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- 验证码 capture控件-->
                        
                    </ul>
                </div>
                <div class="content-block">
                    <div class="row">
                        <div class="col-50">
                            <a href="#" class="button button-big button-fill button-danger">返回</a>
                        </div>
                        <div class="col-50">
                            <a href="#" id = "submit" class="button button-big button-fill button-success">提交</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../resources/js/shop/shopoperation.js' charset='utf-8'></script>
</body>
</html>
阅读 3.7k
1 个回答

你的xx.html文件有没有设置编码<meta charset="utf-8">

<html>
<head>
  <meta charset="utf-8">
</html>
</head>

补充:
web.xml中添加

要配置在所有过滤器的前面
    <filter>
        <filter-name>characterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    
    <filter-mapping>
        <filter-name>characterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
      </filter-mapping>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题