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 </li>
<li οnclick="` page_list `(2)">2 </li>
<li οnclick="` page_list `(3)">3 </li>
<li οnclick="` page_list `(4)">4 </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 </li>
<li>......</li>
<li οnclick="` page_list `(` (page-1) `)">` (page-1) ` </li>
<li class="red" οnclick="` page_list `(` Number(page) `)">` Number(page) ` </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 </li>
<li>......</li>
<li οnclick="` page_list `(` (page_num - 3) `)">` (page_num - 3) ` </li>
<li οnclick="` page_list `(` (page_num - 2) `)">` (page_num - 2) ` </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
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22