BBS项目登录头像自动显示功能

需求：账号登录时，用户输入用户名，自动显示用户头像

使用技术点：

• jQuery的input事件，时时获取用户名输入框内容
• ajax提交post请求，后端访问数据库查找用户头像信息
• 前端显示用户头像，media配置（参考博客）

效果图

代码分享

前端jQuery的input事件，时时获取用户输入内容并朝后端发送ajax请求，需要实现设计一个url用于ajax请求

# show_user_avatar.js

$(function () {

    // 输入用户名，提示头像信息事件，
    // 此处使用了绑定事件的第二种方式, input的事件；此外也可以使用change事件
    $('#username').on('input', function () {
        $.ajax({
            url: "/get_user_avatar/",					// 获取用户头像路径的url
            type: "post",
            data: {
                'username': $("#username").val(),		 // DOM操作获取用户名输入框的value值
            },
            success: function (args) {					// 回调函数，接受后端响应的用户头像
                $("#login_show_avatar").attr("src", '/media/' + args.avatar);
            }
        })
    });

});

获取用户头像路径的url

 # urls.py
url(r'^get_user_avatar/', views.get_user_avatar),

后端逻辑视图函数

def get_user_avatar(request):
    if request.is_ajax() and request.method == 'POST':	# 只允许ajax方式的post请求
        back_info = {'avatar': ''}
        username = request.POST.get('username')
        user_obj = models.UserInfo.objects.filter(username=username).first()
        # user_obj.avatar.name, 'avatar/xxx.png'， 用户存在就传给前端用户头像，否则给默认的头像
        user_avatar = user_obj.avatar.name if user_obj else '/avatar/default.png'
        back_info['avatar'] = user_avatar
        return JsonResponse(back_info)
    else:
        return render(request, 'error404.html')

补充：后端视图会收到许多无效的用户名，此时没有必要一直做数据库查询的操作。这是一个数据库优化点。