Flask 用户信息编辑系统
Flask 用户信息编辑系统
web/templates/user/edit.html
{% extends "common/layout_main.html" %}
{% block content %}
{% include "common/tab_user.html" %}
<div class="row m-t user_edit_wrap">
<div class="col-lg-12">
<h2 class="text-center">账号信息编辑</h2>
<div class="form-horizontal m-t m-b">
<div class="form-group">
<label class="col-lg-2 control-label">手机:</label>
<div class="col-lg-10">
<input type="text" name="mobile" class="form-control" placeholder="请输入手机~~" readonly=""
value="{{ current_user.mobile }}">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-lg-2 control-label">姓名:</label>
<div class="col-lg-10">
<input type="text" name="nickname" class="form-control" placeholder="请输入姓名~~" value="{{ current_user.nickname }}">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-lg-2 control-label">邮箱:</label>
<div class="col-lg-10">
<input type="text" name="email" class="form-control" placeholder="请输入邮箱~~" value="{{ current_user.email }}">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-lg-4 col-lg-offset-2">
<button class="btn btn-w-m btn-outline btn-primary save">保存</button>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script src="{{ buildStaticUrl('/js/user/edit.js') }}"></script>
{% endblock %}
web/static/js/edit.js
;
var user_edit_ops={
init:function(){
this.eventBind();
},
eventBind:function () {
$('user_edit_wrap .save').click(function(){
var btn_target = $(this);
if (btn_target.hasClass('disabled')){
common_ops.alert('正在处理！！请不要重复提交~~');
return;
}
var nickname_target = $('.user_edit_wrap input[name=nickname]')
var nickname = nickname_target.val();
var email_target = $('.user_edit_wrap input[name=nickname]')
var email = email_target.val();
if( !nickname || nickname.length < 2){
common_ops.tip('请输入符合规范的姓名~~', nickname_target);
return false;
}
if ( !email || email.length < 2){
common_ops.tip('请输入符合规范的邮箱~~', nickname_target);
return false;
}
btn_target.addClass('disabled')
var data = {
nickname: nickname,
email: email
};
$.ajax({
url:common_ops.buildUrl("/user/edit"),
type:'POST',
data:data,
dataType:'json',
success:function (res) {
btn_target.removeClass("disabled");
var callback = null;
if(res.code ==200){
callback = function () {
window.location.href = window.location.href;
}
}
common_ops.alert( res.msg, callback);
}
});
});
}
};
$(document).ready(function(){
user_edit_ops.init();
});
这段代码是一个用户编辑页面的前端代码，主要实现了以下功能：
- 绑定保存按钮的点击事件，当点击保存按钮时触发。
- 检查保存按钮是否被禁用，如果被禁用则提示“正在处理，请不要重复提交”并返回。
- 获取用户输入的昵称和邮箱。
- 对昵称和邮箱进行验证，如果不符合规范则提示相应的错误信息并返回。
- 禁用保存按钮，防止重复提交。
- 构建请求的数据，包括昵称和邮箱。
- 发送Ajax请求到后端的用户编辑接口。
- 处理后端返回的结果，如果成功则刷新页面，如果失败则弹出错误提示。
这段代码的主要作用是实现用户编辑信息的保存功能，并通过Ajax与后端进行交互。在保存按钮被点击时，会获取用户输入的昵称和邮箱，并发送到后端进行处理。处理结果会返回给前端，根据返回的结果进行相应的操作。
问题1：$('.user_edit_wrap...')中为什么要用$符号？
var nickname_target = $('.user_edit_wrap input[name=nickname]') 在给定的代码中，$符号是jQuery库的一个别名。jQuery是一个流行的JavaScript库，用于简化HTML文档的遍历、事件处理、动画和AJAX操作等任务。$符号是jQuery库的全局变量，它允许我们使用简洁的语法来选择和操作HTML元素。
在你提供的代码中，$('.user_edit_wrap input[name=nickname]')使用了$符号来? 选择具有name属性为nickname的input元素。这个选择器将返回一个jQuery对象，该对象可以用于进一步操作和修改选定的元素。
使用$符号的好处? 是它提供了一种简洁而强大的方式来选择和操作HTML元素，使得代码更易读和维护。此外，jQuery还提供了许多实用的方法和功能，可以简化常见的DOM操作和事件处理任务
var common_ops = {
...,
tip:function( msg,target ){
layer.tips( msg, target, {
tips: [ 3, '#e5004f']
});
$('html, body').animate({
scrollTop: target.offset().top - 10
}, 100);
},
....,
}|这段代码是一个JavaScript对象，其中包含了多个方法和属性。下面是对每个部分的解析：
-
common_ops：这是一个对象，用于存储各种操作的方法和属性。 -
tip方法：这是common_ops对象中的一个方法，用于显示提示信息。它接受两个参数：msg表示要显示的提示信息，target表示要显示提示信息的 目标元素 。该方法使用了一个名为layer.tips的函数来显示提示信息，并通过tips参数设置了提示框的样式。这段代码的作用是在页面中显示一个提示框。具体来说，layer.tips()函数用于显示一个提示框，其中的参数包括提示信息msg、目标元素target和配置项{tips: [3, '#e5004f']}。配置项中的tips参数指定了 提示框的样式 和 位置，其中3表示提示框的方向（上方），#e5004f表示提示框的背景颜色（粉红色）。通过调用这段代码，可以在页面中显示一个带有指定 样式 和 位置 的提示框然后，它使用$('html, body').animate函数来实现页面滚动效果，将目标元素滚动到可见区域。 -
...：这表示还有其他方法和属性，但在提供的代码中没有给出具体的实现。
这段代码的作用是在页面中显示提示信息，并实现页面滚动效果，使目标元素可见
问题2：?layer.tips( msg, target, { tips: [ 3, '#e5004f'] }); 目标元素target是什么意思？
在这段代码中，目标元素target是指? 需要显示提示框的元素。它可以是一个DOM元素的选择器，也可以是一个DOM元素的jQuery对象。当你调用layer.tips()方法时，你需要传入一个目标元素target参数，以告诉提示框应该在哪个元素附近显示。提示框将会相对于目标元素的位置进行定位，并显示在目标元素的上方或下方。
例如，如果你想在一个按钮上显示提示框，你可以使用按钮的选择器作为目标元素target。代码示例如下：
layer.tips('这是一个提示框', '#myButton', { tips: [3, '#e5004f'] });在上面的示例中，'#myButton'是按钮的选择器，表示目标元素是id为myButton的按钮。提示框将会显示在该按钮的上方，并使用红色（#e5004f）作为背景颜色。
需要注意的是，目标元素target可以是任何有效的DOM元素选择器或jQuery对象。你可以根据实际情况选择 合适的目标元素? 来显示提示框。
我明白了，就是说 目标元素 就是以 目标元素 为 原点 建立一个 物理坐标系 对提示框进行定位！
问题3： ajax 代码 中的success的作用是什么？
success的作用是在ajax请求成功后执行的 回调函数。在这个例子中，当ajax请求成功并返回状态码为200时，会执行success函数中的代码。其中，首先移除按钮的disabled类，然后根据返回的code判断是否需要执行回调函数callback，如果code为200，则将页面重定向到当前页面的URL，最后通过common_ops.alert方法弹出返回的msg信息。
问题4：?window.location.href = window.location.href;是什么意思？
window.location.href是JavaScript中的一个属性，用于获取或设置当前页面的URL地址。在给window.location.href赋值时，会将页面重定向到新的URL地址。window.location.href = window.location.href;的意思是将当前页面重定向到当前页面的URL地址，相当于刷新当前页面。
问题5：} $(document).ready(function(){ user_edit_ops.init(); });中$符后面的这串代码是什么意思？
这段代码是使用jQuery库中的$函数来选取HTML元素，并在文档加载完成后执行一个函数。具体来说，$(document).ready()函数用于在文档加载完成后执行一个函数，这里的函数是user_edit_ops.init()，它是一个名为user_edit_ops的对象的init方法。这段代码的作用是在页面加载完成后初始化用户编辑操作。
问题6：问题5这串代码 不使用这串代码会有什么影响？
这串代码是jQuery库中的语法，用于在文档加载完成后执行一些操作。如果不使用这串代码，可能会导致以下影响：
- 初始化函数不会被调用：这意味着
user_edit_ops.init()函数不会被执行，可能会导致页面上的某些功能无法正常工作。 - 页面元素可能无法正确绑定事件：
$(document).ready()函数确保在文档加载完成后再执行代码，这样可以确保页面上的元素已经完全加载，可以正确地绑定事件。如果不使用这串代码，可能会导致页面上的某些元素无法响应用户的操作。 - 可能会导致其他依赖的代码出错：如果其他代码依赖于
user_edit_ops.init()函数的执行结果，那么不使用这串代码可能会导致其他代码出现错误或异常。
总之，这串代码的作用是在页面加载完成后执行一些必要的初始化操作，如果不使用这串代码，可能会导致页面功能异常或其他代码出错。
问题7: 问题5$符后面的这串代码中的document指的是什么？
????????在这段代码中，document是JavaScript中的一个全局对象，它代表了当前HTML文档。通过document对象，我们可以访问和操作HTML文档中的元素、属性和事件等。
????????在这段代码中，$(document)是jQuery库中的语法，它将document对象包装成一个jQuery对象，以便我们可以使用jQuery提供的方法和功能来操作和处理HTML文档。
????????所以，$(document).ready(function(){ user_edit_ops.init(); });的意思是在文档加载完成后执行user_edit_ops.init()函数，即在页面加载完成后执行user_edit_ops对象的init()方法。
web/controllers/user/User.py
@route_user.route( "/edit",methods = [ "GET","POST" ] )
def edit():
if request.method == "GET":
return ops_render( "user/edit.html",{ 'current':'edit' } )
resp = { 'code':200,'msg':'操作成功~','data':{} }
req = request.values
nickname = req['nickname'] if 'nickname' in req else ''
email = req['email'] if 'email' in req else ''
if nickname is None or len( nickname ) < 1:
resp['code'] = -1
resp['msg'] = "请输入符合规范的姓名~~"
return jsonify( resp )
if email is None or len( email ) < 1:
resp['code'] = -1
resp['msg'] = "请输入符合规范的邮箱~~"
return jsonify( resp )
user_info = g.current_user
user_info.nickname = nickname
user_info.email = email
db.session.add( user_info )
db.session.commit()
return jsonify(resp)
问题1:?values是指?
values是request对象的一个属性，用于获取请求中的参数。在这个例子中，request.values用于获取用户提交的表单数据。
问题2：?return jsonify(resp) 返回哪儿去了？客户端是指什么？
return jsonify(resp)语句将返回一个JSON格式的响应给客户端。具体来说，它将把字典resp转换为JSON字符串，并将其作为响应的主体返回给客户端。这个响应可以包含状态码、消息和数据等信息。
return jsonify(resp)语句将resp字典转换为JSON格式，并将其作为HTTP响应返回给客户端。在这种情况下，客户端指的是发出HTTP请求的浏览器或其他应用程序。
问题3：?nickname = req['nickname'] if 'nickname' in req else '' 是一段flask代码，请介绍一下这段代码，并且说明一下什么是三元表达式？
这段代码是一个条件表达式，也被称为三元表达式。它的作用是检查字典req中是否存在键nickname，如果存在则将其值赋给变量nickname，否则将空字符串赋给nickname。
三元表达式是一种简洁的条件语句，它由三个部分组成：条件、真值和假值。语法格式如下：
variable = true_value if condition else false_value其中，condition是一个布尔表达式，如果为真，则返回true_value，否则返回false_value。
在这段代码中，条件是'nickname' in req，如果req字典中存在键nickname，则条件为真，返回req['nickname']的值，即true_value；否则条件为假，返回空字符串''，即false_value。
三元表达式可以简化代码，使其更加简洁和易读。它常用于在一行中根据条件选择不同的值进行赋值操作
这段代码的作用就是判断一下在前端html表格中输入没nickname，输入了就输入了，没输入下面别的代码爆msg ‘请输入符合规范的姓名~~’
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！