flask项目开发到部署笔记

科技2022-08-03 113

flsak开发方法

一，js相关

加载页面时就调用某js方法：

显示某段代码：

$("#.选择器").show();

隐藏某段代码：

$("#.选择器").hide();

修改标签里内容：

$("#.选择器").html(新内容);

加载某页面：

window.location.href = url路径; window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象（用于框架） opener.location.reload()刷新父窗口对象（用于单开窗口） top.location.reload()刷新最顶端对象（用于多开窗口）

刷新当前页面：

location.reload()

提示框：

alert(‘内容’)

js获取单选框的值

var regender = $(“input[name=‘sex’]:checked”).val();

如果form想用js提交数据，就不要添加action="地址"属性

发送ajax请求

var params = { "mobile": mobile, "password": password, } $.ajax({ url: "URL路径：/index/xxxx", method: "请求方式：post/json/get", data: JSON.stringify(params), contentType: "application/json", success: function (resp) { if (resp.errno == "0") { // 刷新当前界面 location.reload(); } else { // 显示错误信息 $("#login-password-err").html(resp.errmsg) $("#login-password-err").show() } } })

Jquery返回上一页

// html部分 <input type="button" value="返回" onclick="cancel()"> //js部分 function cancel() { history.go(-1) }

js获取input输入的字数

$(function () { $('.输入框').on('keyup', function () { // 不区分中英文 var txtval = $('.输入框').val().length; // 区分中英文 // var str = parseInt(txtval); console.log(txtval); $('.显示框').html(txtval); }); })

jquery选择器内字符串拼接

$("." + “comment_div” + moment_id).attr(“action”, “show”)

jquery中自带了常见的动画方法

fadeOut() : 淡出 fadeToggle(): 切换淡入淡出效果 hide() : 隐藏元素 show(): 显示元素 toggle(): 切换元素可见状态 slideDown(): 向下展开 slideUp(): 向上卷起 slideToggle(): 切换展开,卷起状态

常见的jquery事件

blur() : 元素失去焦点 focus() : 元素获取焦点 click() : 鼠标点击事件 mouseover() 鼠标进入(子元素也触发) mouseout() 鼠标离开(离开子元素触发) mouseenter() 鼠标进入(和子元素无关) mouseleave() 鼠标移开(和子元素无关) hover() 同时为mouseenter和mouseleave事件指定处理函数 ready() DOM加载完成 submit() 用户递交表单

jquery切换标签属性

$(’#imgValidateCode’).attr(“src”, data.CodeUrl);

二，css相关

css定位：position: static，静态定位 relative，相对定位 absolute，绝对定位 fixed，固定定位图片圆形显示：

border-radius:50%

固定图片大小思路：.装图片的盒子 { width: 600px; } .图片 { max-width: 100%; max-height: 400px; } 设置图片盒子宽度，图片设置为max-width：100%；如果图片宽度大于这个值，宽度会限制为盒子的宽度600，高度会等比例缩放，设置图片最大高度，如果图片高于这个高度，会缩放到400px，宽度会等比例缩放，如果图片不大于这个值，则会显示原始大小。 css元素转换： 1、块级标签转换为行内标签：display:inline; 2、行内标签转换为块级标签：display:block; 3、转换为行内块标签：display：inline-block; p或div超出宽度自动换行：word-break:break-all; 或 word-wrap:break-word; 图片添加默认路径：<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>

三，html相关

a标签返回上一页：

解决记住密码后,input输入框自动填充问题：

原因：记住密码后浏览器会在input的password和上一个输入框自动填充，解决：密码框加入：autocomplete="new-password"

在页面中的一个框里显示另一个页面：

隐藏一个标签

input添加必须参数，没填写将自动弹出提示

required

内容超出后自动换行

word-wrap: break-word; word-break: break-all;

浮动元素撑开父盒子,在浮动元素的同级标签下添加此代码

发送图片给后端

<form action="" method=post enctype=multipart/form-data> <p><input type=file name=file> <input type=submit value=Upload> </form> 后端获取：先视图函数支持methods=['post'] f = request.files.get('avatar')

清除input type=file 的默认样式,让其变透明

style=“opacity: 0;”

四，flask框架相关

返回一个页面：

return render_template(‘页面地址’)

重定向一个页面：

return redirect(url地址) return redirect(url_for(‘蓝图/文件名.视图函数’))

获取session数据：

session.get(‘变量名’)

存储session数据：

session[‘变量名’] = 内容

添加过滤器

app.add_template_filter(函数名)

app的蓝图添加默认路径：

app.register_blueprint(蓝图, url_prefix=’/user’)

蓝图里捕获404返回页面：@passport_blu.app_errorhandler(404) def page_not_found(e): # if request.path.startswith('/api'): return render_template('404.html') 获取前端发来的数据request.form # 获取form提交的数据 request.json # 获取json提交的数据 request.args # 获取get提交的数据 request.files # 获取文件类型数据 request.method # 获取请求方式 request.cookies # 获取cookies值 request.data # 获取请求体中的原始数据 request.headers # 获取请求头信息 request.url # 获取全部url：http://www.baidu.com/page.html?id=1&edit=edit request.base_url # 获取域名与请求文件路径：http://www.baidu.com//page.html request.url_root # 获取域名：http://www.baidu.com/ request.path # 获取请求文件路径(端口往后)：/myapplication/page.html request.host # 获取ip地址和端口：127.0.0.1:8596 用户密码加密密码生成函数：generate_password_hash(明文密码)；密码验证函数：check_password_hash(数据储存的加密密码，明文密码)； url_for添加参数

redirect(url_for(“index.passport”,action=‘signin’))

sqlalchemy随机排序

.order_by(func.random())

五，其他问题

浏览器状态码 404找不到url地址 405方法不允许get，post 301方法重定向网页 MySQL问题查询大量数据时，MySQL内存不足问题：

SET GLOBAL sort_buffer_size = 1024*1024;

使用gunicorn 运行项目

gunicorn -w 4 -b 0.0.0.0:80 main:app

查看gunicorn进程

ps -ef | grep gunicorn 杀死进程：kill -9 进程id

Processed: 0.014, SQL: 8