Flask和jquery中级项目功能实现

整体项目的逻辑是:

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

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