180919总结这几天学到的内容

如何让python的json包序列化datetime

  1. 使用场景:通过pymysql获得的数据库中的datetime类型数据(在我们的开发中,一般是由models的DateTimeField创建的),会转换为python的datetime.datetime类型并存放在元组中。我们需要对这个元组序列化,并发送到前端。
  2. 遇到问题:json.dumps不能序列化datetime类型,这这主要是因为JSON本来就没有时间类型。关于JSON的数据类型说明请看
    []https://blog.csdn.net/u012843873/article/details/79699955
  3. 分析json.dumps的原理:分两步。首先它使用一个编码器JSONEncoder的default方法将数据的原始数据类型转换成python中可以直接jsonfy的数据类型。然后再使用底层方法转换成JSON字符串。
  4. 解决问题:json.dumps支持使用一个自定义编码,对原编码器JSONEncoder进行扩展。我们只需要重写default方法将datetime转成string类型即可。代码如下:
import datetime
import json

class CustomEncoder(json.JSONEncoder):
    """自定义编码器,对原编码器进行扩展"""
    def default(self, obj):
        if isinstance(obj, datetime.datetime):
            return obj.strftime('%Y-%m-%d %H:%M:%S')
        elif isinstance(obj, datetime.date):
            return obj.strftime('%Y-%m-%d')
        else:
            return super().default(self, obj)

dt1 = datetime.datetime(2018, 8, 1, 10, 6, 1)
tup1 = (1, '666', dt1)
tup1_json = json.dumps(tup1, cls=CustomEncoder)
print(tup1_json)

打印结果为:[1, "666", "2018-08-01 10:06:01"]
我们可以看到,时间被顺利序列化了。

如何解决模态框打开关闭时界面左右抖动的问题

模态框打开时会对body添加一个modal-open的类,使body的overflow设为hidden。这时如果界面本身有滚动条就会因为滚动条消失而整体向右滑动。在关闭模态框时,这个类会删除,body又恢复了原来的overflow属性,滚动条又会加上。这里介绍一个比较简单的解决问题的方法:对body的overflow设定一个优先级更高的overflow,使其的值不会因为增加class而改变。CSS选择器的优先级为:

  • 通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式
    以下按顺序对这7样举例:
*{width:100px}
img{width:450px}
.img{width:400px;}
img[alt="img"] {width:300px}
img:hover{width:350px}
#img{width:250px;}
<img src="images/icon.png" class="img" id="img" alt="img" style="width:50px" />

显然,我们可以通过内联样式的方法一步到位。在JS开头加入如下代码即可解决问题。

$('body').css({
    'overflow': 'auto'
});

一种新的遍历数组的方法:

var to = '';
// 这是第1种方法
$(to_list).each(function (index, value) {
    to += value + ','
});

// 这是第2种方法
for (var i=0; i<to_list.length; i++) {
    to += to_list[i] + ','
}

to = to.substr(0, to.length-1);

其中第1种是新学的,比第2种简洁。在遍历数组的所有值时,我将更多地使用第1种方法。但是第1种会改变$(this)的值。如果有在方法开头就使用变量引入$(this)的习惯,可以不用考虑这个问题。

如何让内部文字不可超出,如果超出则显示省略号

<button class="btn" style="width: 80%; 
overflow: hidden; max-width: 80%; text-overflow: ellipsis; border-right: 1px solid #AAAAAA">

其中:

  • overflow: hidden表明超出部分不显示
  • max-width限定元素的最大宽度,确保不会被文字撑开
  • text-overflow: ellipsis表示超出的文字显示省略号
  • 3项属性必须同时使用,一个也不能少

让模态框上下居中的方法

// 使模态框处在屏幕的中偏上一点点的地方
var window_height = $('#delete_modal').height();
var modal_height = $('#delete_modal .modal-dialog').height();
// 180918LLR,先取到整百再-100再除以2,为的是能更多地向上偏。太装B了!
var margin_top = (parseInt(window_height / 100) * 100 - modal_height - 100) / 2;
$('#delete_modal .modal-dialog').css('margin-top', margin_top+'px');

注意:window_height可以自动获得,但是modal_height始终是0,必须由用户观察后自己对dialog加一个高度样式。

推荐阅读更多精彩内容