Flask 用户信息编辑系统

Flask 用户信息编辑系统

web/templates/user/edit.html

{% extends "common/layout_main.html" %}
{% block content %}
{% include "common/tab_user.html" %}

    

        
账号信息编辑
        

            

                手机:
                

                    
                
            
            


            

                姓名:
                

                    
                
            
            


            

                邮箱:
                

                    
                
            
            

            

                

                    保存
                
            
        
    

{% endblock %}
{% block js %}

{% 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();
});

这段代码是一个用户编辑页面的前端代码，主要实现了以下功能：

1. 绑定保存按钮的点击事件，当点击保存按钮时触发。
2. 检查保存按钮是否被禁用，如果被禁用则提示“正在处理，请不要重复提交”并返回。
3. 获取用户输入的昵称和邮箱。
4. 对昵称和邮箱进行验证，如果不符合规范则提示相应的错误信息并返回。
5. 禁用保存按钮，防止重复提交。
6. 构建请求的数据，包括昵称和邮箱。
7. 发送Ajax请求到后端的用户编辑接口。
8. 处理后端返回的结果，如果成功则刷新页面，如果失败则弹出错误提示。

这段代码的主要作用是实现用户编辑信息的保存功能，并通过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对象，其中包含了多个方法和属性。下面是对每个部分的解析：

1. common_ops：这是一个对象，用于存储各种操作的方法和属性。

2. tip方法：这是common_ops对象中的一个方法，用于显示提示信息。它接受两个参数：msg表示要显示的提示信息，target表示要显示提示信息的 目标元素 。该方法使用了一个名为layer.tips的函数来显示提示信息，并通过tips参数设置了提示框的样式。这段代码的作用是在页面中显示一个提示框。具体来说，layer.tips()函数用于显示一个提示框，其中的参数包括提示信息msg、目标元素target和配置项{tips: [3, '#e5004f']}。配置项中的tips参数指定了 提示框的样式 和 位置，其中 3表示提示框的方向（上方），#e5004f表示提示框的背景颜色（粉红色）。通过调用这段代码，可以在页面中显示一个带有指定 样式 和 位置 的提示框然后，它使用$('html, body').animate函数来实现页面滚动效果，将目标元素滚动到可见区域。

3. ...：这表示还有其他方法和属性，但在提供的代码中没有给出具体的实现。

这段代码的作用是在页面中显示提示信息，并实现页面滚动效果，使目标元素可见

问题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库中的语法，用于在文档加载完成后执行一些操作。如果不使用这串代码，可能会导致以下影响：

1. 初始化函数不会被调用：这意味着user_edit_ops.init()函数不会被执行，可能会导致页面上的某些功能无法正常工作。
2. 页面元素可能无法正确绑定事件：$(document).ready()函数确保在文档加载完成后再执行代码，这样可以确保页面上的元素已经完全加载，可以正确地绑定事件。如果不使用这串代码，可能会导致页面上的某些元素无法响应用户的操作。
3. 可能会导致其他依赖的代码出错：如果其他代码依赖于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 ‘请输入符合规范的姓名~~’