180919总结这几天学到的内容

2018-09-13 本文已影响43人豪门百里

如何让python的json包序列化datetime

使用场景：通过pymysql获得的数据库中的datetime类型数据（在我们的开发中，一般是由models的DateTimeField创建的），会转换为python的datetime.datetime类型并存放在元组中。我们需要对这个元组序列化，并发送到前端。
遇到问题：json.dumps不能序列化datetime类型，这这主要是因为JSON本来就没有时间类型。关于JSON的数据类型说明请看
[]https://blog.csdn.net/u012843873/article/details/79699955
分析json.dumps的原理：分两步。首先它使用一个编码器JSONEncoder的default方法将数据的原始数据类型转换成python中可以直接jsonfy的数据类型。然后再使用底层方法转换成JSON字符串。
解决问题：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加一个高度样式。