springmvc学习之路（三）功能实现 bug记录

1.导入网页模板改为jsp后css样式图片等静态资源丢失

web项目配置文件中：

由于之前在web配置文件中配置了拦截所有路径，网页中的对于静态资源的请求也会被拦截，但无相应控制器对应，因此无法得到样式和图片等。

解决：配置文件中进行静态资源映射，在spring配置文件中添加

2.实现用户登录验证功能

实现用户登录验证功能，未检测到用户登录则只开放部分网页。

使用拦截器，拦截我们没开放的网页，当访问这些网页时，检查seesion中是否存在用户信息，不存在则跳转至登录页面

a.在spring配置文件中配置拦截器

<mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <mvc:exclude-mapping path="/login"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/userregister"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/userlogin"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/*.do"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/index"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/signup"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/hint"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/css/**"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/about"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/users"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/images/**"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/fonts/**"></mvc:exclude-mapping>
            <mvc:exclude-mapping path="/js/**"></mvc:exclude-mapping>
            <bean class="com.interceptor.LoginCommit"></bean>
        </mvc:interceptor>
    </mvc:interceptors>

mapping path为拦截路径，在这里设为拦截所有，开放网页标签为exclude-mapping path，注意在这里开放静态资源访问，不然又会丢失，bean class设置拦截器类，在这个类写拦截器逻辑

b.编写拦截器类，该类需继承HandlerInterceptor接口，实现三个方法，preHandle，postHandle，afterCompletion，在这里只需要在请求前验证，只写preHandle逻辑。（参考：https://www.cnblogs.com/zhaopengcheng/p/6890282.html）

但开发前期不推荐先写拦截器，不然当你增加其他功能或网页出错会兜兜转转才发现是拦截器的问题。

3.ajax实现动态下拉框

项目中有一个类别信息，实现动态下拉框加载这些类别信息

a.前后端传输数据使用json格式，需要添加相关json依赖，在maven项目的pom.xml中添加

<!--json-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.28</version>
    </dependency>
    <!-- JSONObject对象依赖的jar包 -->
    <dependency>
      <groupId>commons-beanutils</groupId>
      <artifactId>commons-beanutils</artifactId>
      <version>1.9.3</version>
    </dependency>
    <dependency>
      <groupId>commons-collections</groupId>
      <artifactId>commons-collections</artifactId>
      <version>3.2.1</version>
    </dependency>
    <dependency>
      <groupId>commons-lang</groupId>
      <artifactId>commons-lang</artifactId>
      <version>2.6</version>
    </dependency>
    <dependency>
      <groupId>commons-logging</groupId>
      <artifactId>commons-logging</artifactId>
      <version>1.1.1</version>
    </dependency>
    <dependency>
      <groupId>net.sf.ezmorph</groupId>
      <artifactId>ezmorph</artifactId>
      <version>1.0.6</version>
    </dependency>
    <dependency>
      <groupId>net.sf.json-lib</groupId>
      <artifactId>json-lib</artifactId>
      <version>2.2.3</version>
    </dependency>

b.编写接口

编写接口/getindex，获取类别数据存储在list中，再将list转化为json字符串传给前段

@Autowired
    private ProindexDao indexdao; 
@RequestMapping(value = "/getindex",produces = "application/json; charset=utf-8")
//Reponsebody注解别忘了加上
    @ResponseBody
    public String getindex(){
       //获取类别bean
        ArrayList<ProIndex> index=indexdao.findall();
        List<String> list=new ArrayList<String>();
       //将类别信息存储到list中
         for(int i=0;i<index.size();i++){
            list.add(index.get(i).getDes());
        }
       //list转为json对象再转化为字符串返回
        JSONObject jsonObject=new JSONObject();
        jsonObject.put("data",list);
        return jsonObject.toString();
    }
}

c.前端实现

编写下拉框

<select id="select" ></select>

使用异步请求写好的接口，获取json数据，将数据加到下拉框即可

<script type="text/javascript">
    $(document).ready(function () {

        $.ajax({
            type:"POST",
            url:"/getindex",
            dataType:"json",
            data:{},
            success:function (jsondata) {
                $("#select").prepend("<option value='0'>请选择</option>");

                for (var i = 0; i < jsondata.data.length; i++) {
                    $("#select").append("<option>"+jsondata.data[i]+"</option>");
                    }
            }, error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }

        });
    });
</script>

4.中文变问号问题（并非中文变乱码问题）

（数据库中文是问号的话就看看数据库引擎是否支持中文字符，再看看是否有设置编码为utf-8）

a.数据库中文正常显示，但后台控制器获取数据为问号

在数据库连接配置文件中加上参数characterEncoding=utf-8

b.后台获取中文数据正常，传到前端为问号

在springmvc配置文件中加入配置

<mvc:annotation-driven >
        <!-- 消息转换器 -->
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <property name="supportedMediaTypes" value="text/html;charset=UTF-8"/>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

c.前后端中文正常显示，但使用异步ajax传输中文json变成问号

解决：在@RequestMapping注解中加入produces = "application/json; charset=utf-8"

@RequestMapping(value = "/getindex",produces = "application/json; charset=utf-8")