201907项目总结

最新推荐文章于 2019-12-23 16:25:41 发布

原创最新推荐文章于 2019-12-23 16:25:41 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

工作总结专栏收录该内容

2 篇文章

订阅专栏

项目问题小结

1.目录

1.Gson的使用
2.freemarker 关于默认值的处理
3.单元格合并后端处理方法（做一个不规则的表格）
4.弹窗页面的做法
5.html页面的id唯一原则
6.SQL中 ON DUPLICATEKEY UPDATE 的使用

1.Gson的使用

Gson可以通过toJson()方法和fromJson()方法方便的进行json 和 bean之间的转换
eg：

1.生成json

public class User{
			  public String name;
			  public int age;
			  public String emailAddress;
	 }
	Gson json = new Gson();
	String jsonNumber = gson.toJson(100);
	String jsonBoolean = gson.toJson(false);
	User user = new User("周杰伦"，18，"");
	String jsonObject = gson.toJson(user);

2.解析json

Gson gson = new Gson();
String jsonString  = "{\"name\":\"周杰伦\"，\"age\": 18, \"emailAdress\" : \"\"}";
User user = gson.fromJson(jsonString,User.class);

2.freemarker 关于默认值的处理

freemarker需要处理传入对象为空时的情况，否则会报错，这里主要使用两种方法：

1.<#if name??> </#if>

判断name是否为空来避免为空时引起的错误

2.${name!""}

给name属性赋一个默认值，当name为空时会赋值“”

3.单元格合并后端处理方法（做一个不规则的表格）

单元格合并主要依靠table里的rowspan 和colspan属性来做。
rowspan属性表示跨几个行合并单元格
colspan属性表示跨几个列合并单元格
示例代码如下（下面的表格里主要是gid pid 和 sku三者的关系，其中sku为基本单位，pid和sku为一对多关系，gid和pid为一对多关系）：

//根据gidList查询出许多条以sku为基本单位的数据 ，每一个数据对应的bean对象拥有gidRowSpan和pidRowSpan属性，分别对应gid对应pid的数量，pid对应sku的数量
        List<ShopGoodsPidBindSkuDto> shopGoodsSkuRelByGidList = shopGoodsPidBindSkuDao.findShopGoodsSkuRelByGidList(gidList);
        //做两个对应的数字列表  应用hashMap，只处理第一次出现的gid和pid，已经出现过的gidRowSpan和pidRowSpan属性赋默认值
        Map<Long, Integer> gidRowSpanMap = new HashMap<>();
        Map<Long, Integer> pidRowSpanMap = new HashMap<>()

		//对每一个第一次出现的gid和pid对应的条目计算rowSpan值
        for (ShopGoodsPidBindSkuDto shopGoodsPidBindSkuDto : shopGoodsSkuRelByGidList) {
            Long gid = shopGoodsPidBindSkuDto.getGid();
            Integer gidRowSpanCnt = gidRowSpanMap.get(gid);
            if (null == gidRowSpanCnt) {
                gidRowSpanCnt = 0;
            }
            gidRowSpanMap.put(gid, ++gidRowSpanCnt);

            Long pid = shopGoodsPidBindSkuDto.getPid();

            if (null != pid) {
                Integer pidRowSpanCnt = pidRowSpanMap.get(pid);
                if (null == pidRowSpanCnt) {
                    pidRowSpanCnt = 0;
                }
                pidRowSpanMap.put(pid, ++pidRowSpanCnt);
            }

        }

        //下面给每条记录的gidRowSpan,pidRowSpan属性赋值
        Map<Long, Object> gidExistMap = new HashMap<>();    //处理gid
        Map<Long, Object> pidExistMap = new HashMap<>();    //处理pid
        for (ShopGoodsPidBindSkuDto shopGoodsPidBindSkuDto : shopGoodsSkuRelByGidList) {
            Long gid = shopGoodsPidBindSkuDto.getGid();
            Long pid = shopGoodsPidBindSkuDto.getPid();

            if (gidExistMap.get(gid) == null) {        //没有出现过此gid 也就是给第一个gid赋值
                shopGoodsPidBindSkuDto.setGidRowSpan(gidRowSpanMap.get(gid));
            }
            gidExistMap.put(gid, 1);           //表示已经处理过这个gid

            if (null != pid) {                  //开始处理pid
                if (pidExistMap.get(pid) == null){
                    shopGoodsPidBindSkuDto.setPidRowSpan(pidRowSpanMap.get(pid));
                }
                pidExistMap.put(pid,1);
            }
        }

最终实现的效果如图：
在这里插入图片描述

4.弹窗页面的做法

这里所说的弹窗界面一般是指弹出一个窗口，同时背景网页需不可点击并变灰色，完成后效果如图所示：
点击按钮后弹窗弹出
要实现这样的效果，一般思路是要做一个div，未点击时处于隐藏状态，点击时显示，同时，这个div必须处于最高的层级（body的子元素），这样才能不会影响其他元素的显示。这里使用bootstrap的模态框来实现，首先需要再html页面中写一个普通的div，但是需要设置一些属性，以满足模态框要求

		<div class="modal fade" id="edit-div" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
        </div>

这就是之后弹出来的界面，在这个界面里我们可以协商弹框内的信息，如果是静态的页面，就可以直接写在其中，如下：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">  
    <div class="modal-dialog" role="document">  
        <div class="modal-content">  
            <div class="modal-header">  
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">  
                    <span aria-hidden="true">×</span>  
                </button>  
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>  
            </div>  
            <div class="modal-body">  
                <p>One fine body…</p>  
            </div>  
            <div class="modal-footer">  
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                <button type="button" class="btn btn-primary">Save</button>  
            </div>  
        </div> 
	</div>		
  
 </div>

如果是动态的页面，那就需要请求到后台数据后再填充这个div，如下（这里后台返回的是div里面的内容，所以可以直接将result放到这个div里面）：

 $.ajax({
                type: "POST",
                url: "/gms/skuBindPid/editSkuListBindPidAndSku",
                traditional: true,
                data: {
                    pid: pid,
                    type: type,
                    pidName: pidName,
                    saleMode:saleMode
                },
                success: function (result) {
                    $('#edit-div').html(result);
                    $('#edit-div').modal('show');
                } error: function () {
                    toastr.error("列表接口异常");
                }
            });

5.html页面的id唯一原则

在实际前端开发中，class用于CSS布局，id用于JS操作DOM节点对象。id如果重复，js只能获得第一个对象（所谓的“唯一性”，它是针对JS而言的，当文档存在多个相同ID时，通过getElementById方法获取到的是在文档中第一个出现该ID的标签(DOM节点对象)）。

6.SQL中 ON DUPLICATEKEY UPDATE 的使用

ON DUPLICATEKEY UPDATE 用例如下：

insert into player_count(player_id,count) value(1,1) on duplicate key update count=count+1;

如果在INSERT语句末尾指定了ON DUPLICATE KEY UPDATE，并且插入行后会导致在一个UNIQUE索引或PRIMARY KEY中出现重复值，则在出现重复值的行执行UPDATE；如果不会导致唯一值列重复的问题，则插入新行。
这个语句可以将以前的三步（是否存在？存在：更新；不存在:插入）简化为一条sql语句。