python flask智能租房项目——用户中心

最新推荐文章于 2024-05-02 09:33:14 发布

peacezhi

最新推荐文章于 2024-05-02 09:33:14 发布

阅读量1k

点赞数

分类专栏：项目实战文章标签： python flask

本文链接：https://blog.csdn.net/peacezhi/article/details/122176232

版权

注册功能

1. 后端接⼝设计

接⼝描述接⼝参数
请求⻚⾯⽤户中⼼⻚——注册
请求⽅式 POST
请求地址 /register
返回数据 json数据

{
   'valid': '1', 'msg': '注册失败'}

参数说明：
valid 是标志位，代表注册是否成功
1代表成功
0代表没有成功
msg 是返回的信息
成功==》用户名
没有成功 ==》注册失败

2. 后端逻辑

在这里插入图片描述

# 实现注册功能
"""
1. 创建一个视图函数 /register POST请求方式
2. 获取用户的注册信息 昵称 密码 邮箱
3. 校验用户昵称是否已经存在
    3.1 昵称已经存在了 ==> 用户已经注册过这个用户名了 ==> 返回提示信息 告诉用户这个名字 你不能使用
    3.2 昵称不存在    ==> 用户名为使用过           ==> 保存用户信息  然后跳转到用户中心页 再设置cookie
"""
@user_page.route('/register', methods=["POST"])
def register():
    # 获取用户的注册信息 昵称 密码 邮箱
    name = request.form['username']
    password = request.form['password']
    email = request.form['email']

    # 查询使用已经有用户注册
    result = User.query.filter(User.name == name).all()

    # 判断用户是否已经注册 如果没有注册 在返回的结果中 设置cookie
    if len(result) == 0:
        user = User(name=name, password=password, email=email)
        db.session.add(user)
        db.session.commit()
        print(user, '注册成功')

        # {'valid': '1','msg': 成功==>用户名  失败==>'注册失败！'}
        json_str = json.dumps({
   'valid': '1', 'msg': user.name})

        res = Response(json_str)  # 实例化的过程中  需要给他传入响应内容
        res.set_cookie('name', user.name, 3600 * 2)  # key value 过期时间 单位秒

        return res

    # 用户名已经被注册过
    else:

        return jsonify({
   'valid': '0', 'msg': '注册失败！'})

2. 后端实现

登陆注册都是⽼⽣常谈的问题，逻辑都差不多。由于本项⽬是⽤bootstrap框架来完成的前端⻚⾯，为了和前端⻚⾯⻛格保持⼀致，在进⾏注册校验的时候，也是⽤bootstrap的校验插件
bootstrapValidator来完成，让UI⻛格毫⽆违和感。

2.1 使⽤bootstrapValidator插件

引⼊ bootstrapValidator.min.js 和 bootstrapValidator.min.css ⽂件

<!-- 引⼊bootstrapValidator.min.css⽂件 -->
<link href="/static/css/bootstrapValidator.min.css" rel="stylesheet">
<!-- 引⼊bootstrapValidator.min.js⽂件 -->
<script src="/static/vendor/bootstrap/js/bootstrap.js"></script>
<script src="/static/js/bootstrapValidator.min.js"></script>

2.2 设置被校验字段

            <!-- 注册窗口 -->
            <div id="register" class="modal fade login_form" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body m-header">
                            <button class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <div class="modal-title">
                            <h1 class="text-center">注册</h1>
                        </div>
                        <div class="modal-body">
                            <form class="form-group" id="registeform" action="/register" method="post">
                                <div class="form-group">
                                    <label for="" class="form-info">用户名</label>
                                    <input class="form-control" name="username" type="text" placeholder="6-15位字母或数字">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-info">密码</label>
                                    <input class="form-control" name="password" type="password" placeholder="至少6位字母或数字">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-info">再次输入密码</label>
                                    <input class="form-control" name="confirmPassword" type="password"
                                           placeholder="至少6位字母或数字">
                                </div>
                                <div class="form-group">
                                    <label for="" class="form-info">邮箱</label>
                                    <input class="form-control" name="email" type="email" placeholder="例如:123@123.com">
                                </div>
                                <div class="text-right">
                                    <button class="btn btn-primary" id='registe-btn'>提交</button>
                                    <button class="btn btn-danger" data-dismiss="modal">取消</button>
                                </div>
                                <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login"
                                   class="switch-info">已有账号？点我登录</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

在 js 中设置校验规则
使⽤bootstrapValidator插件的API接⼝，校验注册信息，并发送请求。

<script src="/static/js/login.js"></script>

    // 注册
    $('#registe-btn').on('click', function () {
   
        $('#registeform').bootstrapValidator({
   
            message: 'This value is not valid',
            fields: {
   
                username: {
   
                    message: 'The username is not valid',
                    validators: {
   
                        notEmpty: {
   
                            message: '用户名不能为空'
                        },
                        stringLength: {
   
                            min: 6,
                            max: 30,
                            message: '用户名长度必须在6到30位之间'
                        },
                        regexp: {
   
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        },
                        different: {
   
                            field: 'password',
                            message: '用户名不能与密码相同'
                        }
                    }
                },
                email: {
   
                    validators: {
   
                        notEmpty: {
   
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
   
                            message: '无效的邮箱地址'
                        }
                    }
                },
                password: {
   
                    validators: {
   
                        notEmpty: {
   
                            message: '密码不能为空'
                        },
                        identical: {
   
                            field: 'confirmPassword',
                            message: '与确认密码不一致'
                        },
                        different: {
   
                            field: 'username',
                            message: '密码不能与用户名相同'
                        }
                    }
                },
                confirmPassword: {
   
                    validators: {
   
                        notEmpty: {
   
                            message: '确认密码不能为空'
                        },
                        identical: {
   
                            field: 'password',
                            message: '与密码不一致'
                        },
                        different: {
   
                            field: 'username',
                            message: '确认密码不能与用户名相同'
                        }
                    }
                }
            }
        });
        var validator = $('#registeform').data("bootstrapValidator"); //获取validator对象
        validator.validate(); //手动触发验证
        if (validator.isValid()) {
    //通过验证
            $.ajax({
   
                type: 'post',
                url: '/register',
                data: $('#registeform').serialize(),
                dataType: 'json',
                success: function (result) {
   
                    if (result['valid'] == '0') {
   
                        alert(result['msg'])
                        var validatorObj = $("#registeform").data('bootstrapValidator');
                        if (validatorObj) {
   
                            $("#registeform").data('bootstrapValidator').destroy(); //或者 validatorObj.destroy(); 都可以，销毁验证
                            $('#registeform').data('bootstrapValidator', null);
                        }
                    } else {
   
                        window.location.href = "/user/" + result['msg'];
                    }
                },

            })
        }
    });

2.3 更改导航栏的信息

在进⾏登录后，就会有cookie存在进⾏状态保持。这个是我们也会根据登录状态，改变导航栏的信
息。
在这里插入图片描述

  <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">首页</a>
                </li>

                <li class="nav-item" id="user">
                    {% if request.cookies.get('name') %}
                    <!--处于登录状态-->
                    <!--用户名、退出登录-->
                    <a id='u_name' class="nav-link" href="/user/{
    { request.cookies.get('name') }}">{
  {
                        request.cookies.get('name') }}</a>
                    {% else %}
                    <!--没有处于登录装填下，才显示登录按钮-->
                    <a class="nav-link" data-toggle="modal" data-target="#login" href="">登陆</a>
                    {% endif %}
                </li>

                {% if request.cookies.get('name') %}
                <li class="nav-item">
                    <a class="nav-link" id="logout" href="">退出登录</a>
                </li>
                {% endif %}

            </ul>

⽤户⻚⾯

1. 后端接⼝设计

接⼝描述接⼝参数
请求⻚⾯⽤户中⼼⻚
请求⽅式 POST
请求地址 /user/
返回数据 user_page.html模板⽂件、user对象和house对象
需要的⽤户信息字段：
参数类型说明
id int ⽤户id
name str ⽤户昵称
emai str ⽤户邮箱
addr str ⽤户地址
每⼀组的房源数据所需字段如下：(和时间排序的列表⻚所需字段相同)
参数类型说明
id int 房源id
title str 标题
rooms str 户型
area int ⾯积
price int

最低0.47元/天解锁文章

peacezhi

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
python flask智能租房项目——用户中心

注册功能1. 后端接⼝设计接⼝描述接⼝参数请求⻚⾯⽤户中⼼⻚——注册请求⽅式 POST请求地址 /register返回数据 json数据{'valid': '1', 'msg': '注册失败'}参数说明：valid 是标志位，代表注册是否成功1代表成功0代表没有成功msg 是返回的信息成功==》用户名没有成功 ==》注册失败2. 后端逻辑# 实现注册功能"""1. 创建一个视图函数 /register POST请求方式2. 获取用户的注册信息昵称密码邮箱
复制链接

扫一扫

专栏目录