• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Flask和jquery级项目功能实现

武飞扬头像
大佬爱睡觉
帮助1


整体项目的逻辑是:

1,flask和ajax实现图片上传,同时显示图片到网页上

第一部分

两个注意点

enctype=“multipart/form-data”

processData: false,//上传文件,不要转换为字符串(jquery默认转化为字符串)
contentType: false,//取消默认传输策略(默认内容编码策略可能报错)

前端代码

就是简单的form表单嵌套input(file类型)

<form id="uploadForm" enctype="multipart/form-data">
    <input id="uploadImage" type="file" name="file"/>
</form>

js代码

ajax上传文件数据

$('#btn_uploadimg').click(function () {
    var formFile = new FormData($('#uploadForm')[0])
    $.ajax({
        url: "/upload/",
        type: "POST",
        data: formFile,
        processData: false,
        contentType: false,
        success: function (msg) {
            console.log(msg);
        }
    })
})

后端代码

接收文件,然后直接内置save进行保存

(我之前看到很多地方flask后端使用很麻烦的方法进行保存,我表示不理解)

UPLOAD_FOLDER = 'static/uploads'  # 文件存放路径
@app.route('/upload/', methods=['GET', 'POST'])
def upload_file():
    # 接收图片
    if request.method == 'POST':
        f = request.files['file']
        basepath = os.path.dirname(__file__)
        upload_path = os.path.join(basepath, UPLOAD_FOLDER, f.filename)
        f.save(upload_path)

第二部分

上传图片的显示

效果展示

学新通

学新通

js实现

这里其实也并不难,直接使用js就能实现

先用FileReader读取图片,然后使用ajax绑定图片后使用show()直接显示图片

$("#uploadImage").on('change', function () {
    if (typeof (FileReader) != "undefined") {
        var image_holder = $("#image-holder");
        image_holder.empty();
        var reader = new FileReader();
        reader.onload = function (e) {
            $("<img />", {
                "src": e.target.result,
                "class": "thumb-image",
                "style": "margin:20px",
                "width": "200px",
            }).appendTo(image_holder);
        }
        image_holder.show();
        reader.readAsDataURL($(this)[0].files[0]);

    } else {
        alert("你的浏览器不支持FileReader.");
    }
});

2,ajax实现分页

对于ajax/分页有心理恐惧的朋友需要知道一个事儿,这玩意儿很简单,就是废时间

分页实现

实现原理:1,使用列表截取,截取出部分数据,进行展示

比如100条数据,假设一页显示10条数据,第1页,直接截取0-10条数据,就可以(同理,第二页就是11-20,第三页就是21-30)

我们以0开始:那么这个开始就可以用(page-1)*limit表示开头,page*limit表示结尾(limit为1,开头为0,结尾为10,同理)

所以分页实现不难,是麻烦:需要通过判断(页数小于3,页数大于最大页等多种情况),重写分页列表,直接通过.html(“更换内容”)进行内容更换

所以是不是很简单,js代码如下

    function page_content(list_, page,page_list) {
        var page_num = Math.floor(list_.length / 10)
        if (list_.length % 10 >= 1) {
            page_num  = 1
        }
        var page_html = ''
        if (Number(page) <= 3) {
            page_html  = `<ul style="display: flex">
            <li  οnclick="` page_list `(1)">1&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li οnclick="` page_list `(2)">2&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li οnclick="` page_list `(3)">3&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li οnclick="` page_list `(4)">4&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li>......</li>
            <li οnclick="` page_list `(`   page_num   `)">`   page_num   `</li>
        </ul>`
        } else if (Number(page) > 3 && Number(page) < page_num - 1) {
            page_html  = `<ul style="display: flex">
<li οnclick="` page_list `(1)">1&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li>......</li>
            <li οnclick="` page_list `(`   (page-1)   `)">`   (page-1)   `&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li class="red" οnclick="` page_list `(`   Number(page)    `)">`   Number(page)   `&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li οnclick="` page_list `(`   (Number(page)   1)   `)">`   (Number(page)   1)   `</li>
            <li>......</li>
            <li οnclick="` page_list `(`   page_num   `)">`   page_num   `</li>
        </ul>`
        } else {
            page_html  = `<ul style="display: flex">
<li οnclick="` page_list `(1)">1&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li>......</li>
            <li οnclick="` page_list `(`   (page_num - 3)   `)">`   (page_num - 3)   `&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li οnclick="` page_list `(`   (page_num - 2)   `)">`   (page_num - 2)   `&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li οnclick="` page_list `(`   (page_num - 1)   `)">`   (page_num - 1)   `</li>
            <li>......</li>
            <li οnclick="` page_list `(`   page_num   `)">`   page_num   `</li>
        </ul>`
        }
        return page_html
    }

3,基于分页,更改表格数据,更新另一个表格的数据

1、实现效果

修改左边的数据,能够传给后端,后端再通过左边的表格数据,对右边数据进行调整(是一个使用模型来训练的数据,此处为模拟数据)
学新通

2、实现思路

实现前面修改内容并不难,修改的内容进行保存(因为后续需要传给后端)还是有点难度的

然后使用js的全局变量进行了解决:类似以下方式,不声明类型默认为全局变量

a = [];

表格实现

我通过后端给我的列表,循环拼接到图中的表格(如下写了一个函数)

这里比较巧妙地一个地方是我给每一条input绑定了一个对应索引的id(这样我就可以通过对应的id进行绑定)

function change_list1(list_1, page) {
        var tr1 = "<div style=\"flex: 1;margin-right: 40px\">Recognized concepts:\n                <table class=\"table table-bordered\">\n                    <thead>\n                    <tr>\n                        <th>Concept</th>\n                        <th>Probability</th>\n                    </tr>\n                    </thead>\n                    <tbody>"
        var start = (page - 1) * 10//页面结尾
        var page_len = page * 10//页面开始
        var page_html = page_content(list_1, page,"page_list1")
        if (list_1.length - page_len < 10) {
            page_len = list_1.length
        }
        for (var i = start; i < page_len; i  ) {
            console.log(i)
            tr1  = `
                    <tr>
                            <th scope="row">`   Object.keys(list_1[i])[0]   `</th>
                            <td><input id="`   i   `" type='text' value='`   list_1[i][Object.keys(list_1[i])[0]]   `'></td>
                        </tr>
`
        }
        return tr1   ` </tbody></table>
        `   page_html   `
    </div>
</div>`;
    }

修改值

如何才能让我的值修改之后被保留,这里的思路是:全局变量list存储着我的数据,我通过索引将input框进行了绑定,这样当我修改值的时候,对应的id对应着对应的索引,这样我根据索引修改该索引的list中的值

function order_() {
    for (var i = 0; i < list1.length; i  ) {
        $("#"   i).on("change", function () {
            list1[this.id][Object.keys(list1[this.id])[0]] = $("#"   this.id).val()
            console.log(list1)
        })
    }
}

这里利用循环对id进行了绑定,当他们的内容被change的时候,就会触发我们的函数,这样我们就可以把修改之后的值重新绑定到全局变量list1的身上,当我们需要将数据传给后端时,直接将全局变量list1传给后端即可

4,总结

每一个项目,都会让你对一些解决问题的简洁思路更加理解和深入,多做项目,一定是能够加深你使用该工具的熟练度的,比如这里的js,最初我在学js的时候,一直有一定的畏难情绪,但是当你使用之后会发现,无非就是通过特定的方法进行绑定,然后对数据进行修改而已

而js大量的第三方插件其实可以让我们省大量的理解:不论是分页,还是一些看起来比较难的操作,都有集成好的第三方插件js

但是为什么我们还是需要掌握这些底层代码,因为当你想要优化的时候,第三方插件是不顺手的

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhefkee
系列文章
更多 icon
同类精品
更多 icon
继续加载