暑假学习16(7.31 周五)

           今天的工程学习主要是将之前静态的商品类型改为动态的商品类型，也就是说这部分的数据源要来自于数据库，不再是之前写好的一个无序列表，对比之前的菜单栏更具灵活性。之前的菜单每一项是这样写的：

<li th:class="${goodsForm.type == '粮食'}?'active':''"><a href="initGoods?type=liangshi">粮食</a></li>

         注意使用的是th:class这个属性，这个属性可以用来判断当前项是否是要被选中的，这里可以是一个动态的判断，就是将后台传过来的两个值判断然后选择要呈现的状态，如 改过之后的写法是：

<li th:class="${goodsForm.type}==${typeinfo.type}?'active':''"><a href="initGoods?type=typeinfo.type"><span th:text="${typeinfo.type}" th:each="typeinfo,status:${typelist}"></span></a></li>   

      这个是一个循环的无序列表项，它将选择的商品类型列出来出现在标签上。要是想默认选中的话，只要第一次默认时选中商品类型的第一项就可以了，我们可以通过列表的get方法来取得第一项。不过我们查询也可以通过sql语句的最小最大查询，使用min与max函数，写法如下：

select max(age) from sturent（这样可以找到学生表中的年最大的年龄）              

        然后通过嵌套查询找到相应的结果。另外，在使用查询时，我们也可以通过order  by（对应的列名）子句来选择相应的大小。其中，asc是升序，desc为降序。

        注意下面这句代码的使用，这个代码的使用时为了使前台的汉字传过来能在后台接收到而且成为utf-8的格式，也就是说实现了一个汉字格式的转换

        String type = new String(goodsForm.getType().getBytes("iso8859-1"),"utf-8");  

         对于ISO8859-1，通常叫做Latin-1。Latin-1包括了书写所有西方欧洲语言不可缺少的附加字符。而gb2312是标准中文字符集。UTF-8是UNICODE的一种变长字符编码，即RFC3629。简单的说——大字符集。可以解决多种语言文本显示问题，从而实现应用国际化和本地化。对系统来讲，UTF-8编码可以通过屏蔽位和移位操作快速读写，排序更加容易。UTF-8是字节顺序无关的，它的字节顺序在所有系统中都是一样的。因此UTF-8具有更高的性能。

        css中的一些属性设置：letter-spacing: -1px;（字间距）font-size:2em;（字体大小）font-weight : normal;（字体权重：常有的值有normal: 正常的字体。 bold: 粗体。 bolder: 特粗体。 lighter: 细体）.span_2_of_3  h3，span_2_of_3  p（这两个是名称一样的样式表，引用时都是用class="span2_of_3",但是二者是用来定义两个不同的部分，前者是标题，后者是段落内容）line-height: 1.6em; （这个是定义行间距）。align是对齐格式：align=left,center,right，分别是左对齐，居中，右对齐，默认是左对齐还有就是<div class="clear"></div>这个是用来清除浮动的。在shop/css中定义：.clear{clear:both;}/* clear float */

       HTML中下拉列表写法：

    <select name="">
        <option value="0">divcss5</option>
        <option value="1">DIVCSS5</option>

    </select>

      下面使用的spring框架中的<form:select>标签写的下拉列表框：

<form:select path="expressId">

<form:options id="expressId" items="${expressList}" itemLabel="label" itemValue="value" />

</form:select>

       区别是item项，这个是一个循环的显示多个可选项，每一项都有一个itemLable与itemValue属性，前面的是显示在页面上的文字，后面是该项的传入值，这里的path是expressId，所以选中一项会将该项的value值给expressId。

<a class="btn btn-danger" οnclick="showDialog('delBrand?supplierId=${brandsInfo.supplierId}&brandId=${brandsInfo.brandId}')" href="#" data-toggle="modal" data-target="#myModal"> <i  class="glyphicon glyphicon-trash icon-white"></i> 删除</a>

     为HTML文档的创作者定义他们自己的属性，须以 "data-" 开头。这里的dialog在下边出现了，data_target属性和下边的id的值相同，通过这个来联系到下边的dialog部分，注意出现了role属性（这个？？）：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"

aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">×</button>

<h3>确认删除</h3>

</div>

<div class="modal-body">

<p>该内容删除后不可恢复，请确认是否删除！</p>

</div>

<div class="modal-footer">

<a href="#" class="btn btn-default" data-dismiss="modal">取消</a>

<a id="modalLink" href="delCar" class="btn btn-primary">删除</a>

</div>

         这里的showDialog是一个javascript的脚本文件，代码如下：

<script src="js/bootstrap-datepicker.js"></script>

<script type="text/javascript">

function showDialog(url) {

$("#modalLink").attr("href", url);         //这里是点击删除时对应的链接传值，将对应的值传到后台执行删除操作。

}

</script>

           改变一个按钮的功能成为一个下拉列表：

 <button class="btn btn-default dropdown-toggle"

                    data-toggle="dropdown">         //自定义的下拉列表

                    <i class="glyphicon glyphicon-tint"></i><span

                        class="hidden-sm hidden-xs"> Change Theme / Skin</span> <span

                        class="caret"></span>

                </button>

                <ul class="dropdown-menu" id="themes">     //用一个无序列表来定义下拉菜单

                    <li><a data-value="classic" href="#"><i class="whitespace"></i>   //data-value这个值用来改变当前属性（当前的修改页面主题的，这个会导致一系列的class变化）

                            Classic</a></li>

                    <li><a data-value="cerulean" href="#"><i

                            class="whitespace"></i> Cerulean</a></li>

                    <li><a data-value="cyborg" href="#"><i class="whitespace"></i>

                            Cyborg</a></li>

                    <li><a data-value="simplex" href="#"><i class="whitespace"></i>

                            Simplex</a></li>

                    <li><a data-value="darkly" href="#"><i class="whitespace"></i>

                            Darkly</a></li>

                    <li><a data-value="lumen" href="#"><i class="whitespace"></i>

                            Lumen</a></li>

                    <li><a data-value="slate" href="#"><i class="whitespace"></i>

                            Slate</a></li>

                    <li><a data-value="spacelab" href="#"><i

                            class="whitespace"></i> Spacelab</a></li>

                    <li><a data-value="united" href="#"><i class="whitespace"></i>

                            United</a></li>

                </ul>

            </div>

             在web.xml文件中，那个filter过滤器设置了后台传入数据的类型是utf-8，具体代码如下：

<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>

</filter>

            但是，在这个过滤中仅针对post方法传值起到了作用，而对于get方法的传值并没有，所以通过get方法传入的汉字在后台显示的仍然是乱码，所以，我们需要将得到的乱码就是改变格式，通过 new String()方法，即：

String type = new String(goodsForm.getType().getBytes("iso8859-1"),"utf-8"); 

            

转载于:https://my.oschina.net/u/2411765/blog/487256