你有看见我弄丢了的那只喵吗

前端调用Python后端API的小贴士

BIGGER SLY 0评论

前言:

在仿造廖雪峰的大作业做一个博客教程的过程中,我发现后端要利用jinja模板渲染 然后前端还需要什么VUE的屌丝玩儿,而这让我在原先项目上直接写html代码然后调用API 的RESTFUL  很不习惯这种在html里面写带有Python的代码。因此开启了我们的重构。

0x01 我的API 是什么样子的

直接看代码:

@asyncio.coroutine
@get('/api/users')
def api_get_users():
    users = yield from User.find_all(orderBy='created_time desc')
    for u in users:
        u.password = '******'
    return dict(data=users)

可以看到我直接返回了一个dict,这个API直接调用时这样的。

这样如果不好看的话 我还有这样的:

{data: [{password: "******", id: "1484189522785642", admin_flag: 0, email: "test@gmail.com",…},…]}

注意,js 在解析的时候会将 Python 认为的key 把双引号去掉了。

用Python 的理解就是一个字典 里面有一个datakey,然后data对应的value是一组list 每个list里又是一个字典包含着我们的用户信息。

 

0x02 展示我们的API数据

为了模拟FuckBlog真正的调用然后展示的需求,我们假设我们需要一个用户展示列表。那么如何将json 转换成表格呢?手写然后每个加上标签?这样粗糙的事情自然有人帮我们做好了。请出我们今天的主角:datatable 他是jquery的一个插件,专门用来将json数据进行列表化。

我先为大家展示成功的格式化结果:

由于我个人很久不接触js 导致了遇到不少坑 我和大家说明一下:

第一坑:json的dict 默认要为data 不为data 需要重新设置

我的API一开始传递的是users 的信息 然后老是报找不到 。。。。 当然你可以设置dataSrc 来改变

 

第二坑:中文datatable 的写法是有问题的

这是我浪费了一晚上才发现的。。。

这种data前面是不需要加双引号的,为啥我看到了呢?因为我看到了官方介绍。

有可能是版本跟新的问题但是你既然吃这碗饭,跟新或者代码就需要写好。我简单解释一下

<script>


    $(document).ready(function() {

        $('#example').dataTable({
            "ajax": '/api/users',
            "columns": [
                {data:'name'},
                {data:'email'},
                {data:'created_time'},
                {data:'admin_flag'},
                {data:'image'},
                {data:'id'},
                {data:'password'}
            ]
        })
    });


</script>

这是一个版本 当然 如果我们需要更高级的功能 排序怎么办呢?(原来项目上就是对这个有要求)

简单:

$(function () {
    initDataTable();
        function initDataTable() {
        $.getJSON('/api/users', function (data) {
            console.log(data);
            console.log(typeof data);
            console.log(data["data"]);
            IndexerDTO=data["data"];
            loadDataTable()
        })
    }
        function loadDataTable() {
            var users= [];
            $(IndexerDTO).each(function (index) {
                users.push([IndexerDTO[index]['name'], IndexerDTO[index]['email'], IndexerDTO[index]['created_time'], IndexerDTO[index]['admin_flag'], IndexerDTO[index]['image'],IndexerDTO[index]['id'],
                    IndexerDTO[index]['password']]);
                console.log(users)
            });
            $('#example').dataTable({
                "data": users,
                "columns":[
                        { "data": 0},
                        { "data": 1 },
                        { "data": 2 },
                        { "data": 3 },
                        {"data":4},
                        {"data":5},
                        {"data":6}
                ]
            })
        }
});

当然更多功能比如排序 内置搜索等可以查看官方的英文文档

对js不熟悉 连插件都需要弄一晚上 == 特别是错误四让你看tn/4 就是那个 Requested unknown parameter 0 of row 0 的屌丝玩儿,干他妈的中文版本。下次如果有国外的优先国外的版本。

 

0x03 总结

        其实并不算太理解前端这些人咋想的,把当初前后端分离理念弄完了之后现在又开始唱 前端渲染扔回后端。。。但是呢 对于我们分工开发还是大有好处的。我一向很讨厌在html代码写Python

       //麻麻说我做事不仔细 经常马虎 看来以后写代码和做事靠谱细致会好很多。以此为纪。

 

喜欢 (3)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址