flask爱家租房项目开发（七）

最新推荐文章于 2021-03-04 00:10:34 发布
最新推荐文章于 2021-03-04 00:10:34 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： python3 文章标签： flask 爱家租房网站
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/geek_xiong/article/details/99465400
版权

本文对应的资料下载地址：https://download.csdn.net/download/geek_xiong/11548649

目录

个人主页显示用户信息

后端代码编写

前端代码编写

个人信息修改界面的完善

个人信息的显示

前端代码编写

用户名的修改操作

后端代码编写

前端代码编写

实名信息认证

实名信息的显示

后端代码编写

前端代码编写

实名信息认证

后端代码编写

前端代码编写

城区信息

后端代码编写

缓存数据库

前端代码编写

个人主页显示用户信息

在主页点击用户名，进入个人主页my.html

界面应该显示用户的头像，用户名以及手机号

url：127.0.0.1:5000/api/v1.0/user

请求方式：GET

后端代码编写

大致流程：

  • 获取用户id
  • 根据用户id查询数据库
  • 将查询的结果返回

代码

# profile.py

@api.route('/user', methods=['GET'])
@login_required
def get_user_profile():
    """个人主页中获取用户信息
    包括：用户头像，手机号，用户名
    要求：json格式
    """
    # 获取用户id
    user_id = g.user_id

    # 根据用户id查询该用户的信息
    try:
        user = User.query.get(user_id)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg='获取用户信息失败')

    # 判断获取的user是否为空
    if user is None:
        jsonify(errno=RET.NODATA, errmsg='无效操作')

    return jsonify(errno=RET.OK, errmsg='OK', data=user.to_dict())

# models.py

class User(BaseModel, db.Model):
    ...
    def to_dict(self):
        """
        将数据转换后字典
        :return: 字典
        """
        user_dict = {
            "user_id": self.id,
            "name": self.name,
            "mobile": self.mobile,
            "avatar": constants.QINIU_URL_DOMAIN + self.avatar_url if self.avatar_url else "",
            "create_time": self.create_time.strftime("%Y-%m-%d %H:%M:S")
        }
        return user_dict

前端代码编写

# my.html

<div class="menu-content">
     <img id="user-avatar" src="">
     <div class="menu-text">
         <h3>用户名：<span id="user-name"></span></h3>
         <h5>手机号：<span id="user-mobile"></span></h5>
     </div> 
</div>
// my.js


$(document).ready(function(){
    $.get('/api/v1.0/user', function (resp) {
        // 判断用户是否登陆
        if (resp.errno == '4101') {
            location.href = '/login.html';
        } else if (resp.errno == '0') {
            // 查新到数据，展示在前台
            $('#user-name').html(resp.data.name);
            $('#user-mobile').html(resp.data.mobile);
            if (resp.data.avatar) {
                $('#user-avatar').attr('src', resp.data.avatar);
            }
        }
    }, "json");
});

个人信息修改界面的完善

个人信息的显示

在个人主页点击修改进入该界面，profile.html

如果没有头像和用户名，则不显示，否则显示，如下图所示，

url：127.0.0.1:5000/api/v1.0/user

请求方式：GET

前端代码编写

# profile.html

<li>
    <div class="menu-title">
        <h3>头像</h3>
    </div>
    <div class="menu-content">
        <img id="user-avatar" src="">
        <div class="menu-text">
            <form id="form-avatar" enctype="multipart/form-data">
                选择头像：<input type="file" accept="image/*" name="avatar">
                <input type="submit" class="btn btn-success" value="上传">
            </form>
        </div> 
    </div>
</li>
<li>
    <div class="menu-title">
        <h3>用户名</h3>
    </div>
    <div class="menu-content">
        <form id="form-name">
            <input type="text" name="name" id="user-name">
            <input type="submit" class="btn btn-success" value="保存">
        </form>
        <div class="error-msg"><i class="fa fa-exclamation-circle"></i>用户名已存在，请重新设置</div>
    </div>
</li>
# profile.js

// 获取用户信息
    $.get('/api/v1.0/user', function (resp) {
        if (resp.errno == '4104') {
            // 未登录，跳转到登陆界面
            location.href = '/login.html'
        } else if(resp.errno == '0') {
            // 有获取到用户信息
            $('#user-name').val(resp.data.name);
            if (resp.data.avatar) {
                $('#user-avatar').attr('src', resp.data.avatar);
            }
        }
    }, "json");

用户名的修改操作

从新输入用户名，点击保存，更新用户名

url：127.0.0.1:5000/api/v1.0/users/name

请求方式：PUT

后端代码编写

大致流程：

  • 获取用户id
  • 获取提交的用户名
  • 判断用户名是否为空
  • 保存到数据库中
  • 更新session中的name值
  • 返回结果
# profile.py

@api.route('/users/name', methods=['PUT'])
@login_required
def change_user_name():
    """修改用户名"""
    user_id = g.user_id
    req_data = request.get_json()

    # 判断参数的完整性
    if req_data is None:
        return jsonify(errno=RET.PARAMERR, errmsg='参数不完整')

    # 获取要修改的name值
    name = req_data.get('name')

    # 判断是否为空
    if not name:
        return jsonify(errno=RET.PARAMERR, errmsg='用户名不能为空')

    # 保存用户名到数据库（更新操作），同时利用数据库的唯一索引判断是否重复
    try:
        User.query.filter_by(id=user_id).update({"name": name})
        db.session.commit()
    except Exception as e:
        db.session.rollback()
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg='设置用户名错误')

    # 更新session中的name值
    session['name'] = name

    # 返回结果
    return jsonify(errno=RET.OK, errmsg='修改成功')

前端代码编写

// profile.js

$(document).ready(function () {

    ...

    // 修改用户名
    $('#form-name').submit(function (e) {
        // 阻止form表单的默认行为
        e.preventDefault();
        // 获取name值
        var name = $('#user-name').val();
        // 判断用户名是否为空
        if (!name) {
            alert('用户名不能为空！');
            return
        }
        // ajax 提交用户名
        $.ajax({
            url: '/api/v1.0/users/name',
            data: JSON.stringify({'name': name}),
            type: 'PUT',
            contentType: 'application/json',
            dataType: 'json',
            headers: {
                "X-CSRFToken": getCookie('csrf_token')
            },
            success: function (data) {
                if (data.errno == '0') {
                    $('.error-msg').hide();
                    showSuccessMsg();
                } else if (data.errno == '4001') {
                    $('.error-msg').show();
                } else if (data.errno == '4101') {
                    location.href = '/login.html';
                }
            }
        });

    });
});

实名信息认证

实名信息的显示

如果没有进行过实名认证的话，显示可以输入与按钮

如果已经提交认证信息，则显示实名信息，并不可修改，同时隐藏提交按钮

url：127.0.0.1:5000/api/v1.0/users/auth

请求方式：GET

后端代码编写

大致流程：

  • 获取用户id
  • 获取用户信息
  • 返回结果
# profile.py

@api.route('/users/auth', methods=['GET'])
@login_required
def get_user_auth():
    """获取用户的实名认证信息"""
    user_id = g.user_id

    try:
        user = User.query.get(user_id)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg='获取用户实名信息失败')

    if user is None:
        return jsonify(errno=RET.NODATA, errmsg='无效操作')

    return jsonify(errno=RET.OK, errmsg='OK', data=user.auto_to_dict())
# models.py

class User(...):
    ...

    def auto_to_dict(self):
        """
        将实名信息转换成字典
        :return: 字典
        """
        auto_dict = {
            "user_id": self.id,
            "real_name": self.real_name,
            "id_card": self.id_card
        }
        return auto_dict

前端代码编写

// auth.js

$(document).ready(function () {
    // 查询用户的实名信息
    $.get('/api/v1.0/users/auth', function (resp) {
        // 判断是否登陆，4101表示未登录
        if(resp.errno == '4101'){
            location.href = '/login.html'
        }else if(resp.errno == '0') {
            // 已经登陆，如果返回的real_name与id_card不为null，表示用户有填写实名信息
            if (resp.data.real_name && resp.data.id_card){
                // 将实名信息填写到页面中，并不再可以修改，同时隐藏按钮
                $('#real-name').val(resp.data.real_name);
                $('#id-card').val(resp.data.id_card);
                $('#real-name').prop('disabled', true);
                $('#id-card').prop('disabled', true);
                $('#form-auth>input[type=submit]').hide();
            }
        }
    }, "json");
});

实名信息认证

后端代码编写

请求方式：POST

大致流程：

  • 获取用户id
  • 获取认证信息
  • 判断认证信息的完整性
  • 保存到数据库中
  • 返回结果
# profile.py

@api.route('/users/auth', methods=['POST'])
@login_required
def set_user_auth():
    """保存实名认证信息
    包括：真实名、身份证号
    要求：json格式
    """
    # 获取用户id
    user_id = g.user_id

    # 获取实名信息
    req_data = request.get_json()

    if not req_data:
        return jsonify(errno=RET.PARAMERR, errmsg='参数错误')

    real_name = req_data.get('real_name')
    id_card = req_data.get('id_card')

    # 判断参数的完整性
    if not all([real_name, id_card]):
        return jsonify(errno=RET.PARAMERR, errmsg='参数不完整')

    try:
        User.query.filter_by(id=user_id, real_name=None, id_card=None).update({"real_name": real_name, "id_card": id_card})
        db.session.commit()
    except Exception as e:
        current_app.logger.error(e)
        db.session.rollback()
        return jsonify(errno=RET.DBERR, errmsg='保存实名信息失败')

    # 返回结果
    return jsonify(errno=RET.OK, errmsg='OK')

前端代码编写

// auth.js

$(document).ready(function () {
    // 查询用户的实名信息
    ...

    // 用户实名信息的提交行为
    $('#form-auth').submit(function (e) {
        // 阻止表单的默认提交行为
        e.preventDefault();
        // 获取实名信息
        var real_name = $('#real-name').val();
        var id_card = $('#id-card').val();
        // 判断是否为空
        if (real_name == "" || id_card == ""){
            $('.error-msg').show();
        }
        // 将数据转换成json格式
        var data = {
            "real_name": real_name,
            "id_card": id_card
        };
        var json_data = JSON.stringify(data);
        // ajax提交，保存实名认证信息
        $.ajax({
            url: '/api/v1.0/users/auth',
            data: json_data,
            dataType: 'json',
            type: 'post',
            contentType: 'application/json',
            headers: {
                'X-CSRFToken': getCookie('csrf_token')
            },
            success: function (resp) {
                if (resp.errno == '0'){
                    $('.error-msg').hide();
                    showSuccessMsg();
                    $('#real-name').prop('disabled', true);
                    $('#id-card').prop('disabled', true);
                    $('#form-auth>input[type=submit]').hide();
                }else{
                    alert(resp.errmsg);
                }
            }
        });

    });
});

城区信息

后端代码编写

# api/houses.py
from flask import current_app, jsonify

from . import api
from ihome.models import Area
from ihome.utils.response_code import RET


@api.route('/areas')
def get_area_info():
    """获取区域信息"""
    # 查新数据库
    try:
        area_li = Area.query.all()
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg='数据库异常')
    area_dict_li = []
    for area in area_li:
        area_dict_li.append(area.to_dict())
    return jsonify(errno=RET.OK, errmsg='OK', data=area_dict_li)
# ihome/models.py
class Area(BaseModel, db.Model):
    """城区"""

    __tablename__ = "ih_area_info"

    id = db.Column(db.Integer, primary_key=True)  # 区域编号
    name = db.Column(db.String(32), nullable=False)  # 区域名字
    houses = db.relationship("House", backref="area")  # 区域的房屋

    def to_dict(self):
        """将对象转换成字典"""
        area_dict = {
            "aid": self.id,
            "aname": self.name
        }
        return area_dict

postman测试

启动项目，打开postman，输入获取城区信息的url，请求方式为get

 

缓存数据库

由于城区信息会频繁的访问，所以考虑将城区信息取出后保存到redis中，这样再取时先从redis中取，如果redis中没有，在从mysql数据库中取。

大致流程：

  • 从redis中获取城区信息
    • 有，直接返回
    • 没有，继续下一步
  • 从mysql数据库中获取城区信息
  • 将取出的数据转换成json格式
  • 将json数据保存到redis中
  • 返回结果
import json

from flask import current_app, jsonify

from . import api
from ihome.models import Area
from ihome.utils.response_code import RET
from ihome import db, redis_store, constants


@api.route('/areas')
def get_area_info():
    """获取区域信息"""

    # 从redis中获取数据
    try:
        resp_json = redis_store.get('area_info')
    except Exception as e:
        current_app.logger.error(e)
    else:
        if resp_json is not None:
            current_app.logger.info('hide redis area_info')
            return resp_json, 200, {"Contant-Type": 'application/json'}
    # 查新数据库
    try:
        area_li = Area.query.all()
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg='数据库异常')
    area_dict_li = []
    for area in area_li:
        area_dict_li.append(area.to_dict())

    # 将数据转换为json格式
    resp_dict = dict(errno=RET.OK, errmsg='OK', data=area_dict_li)
    resp_json = json.dumps(resp_dict)

    # 将数据保存到redis中
    try:
        redis_store.setex('area_info', constants.AREA_INFO_REDIS_CACHE_EXPIRE, resp_json)
    except Exception as e:
        current_app.logger.error(e)

    return resp_json, 200, {"Contant-Type": 'application/json'}

前端代码编写

# newhouse.hmtl

<label for="area-id">所在城区</label>
<select class="form-control" id="area-id" name="area_id">

</select>
<script type="text/html" id="areas-tmpl">
    {{ each areas as area }}
    <option value="{{ area.aid }}">{{ area.aname }}</option>
    {{ /each }}
</script>

<script src="/static/js/template.js"></script>
// newhouse.js

$(document).ready(function(){
    $.get('/api/v1.0/areas', function (resp) {
        if (resp.errno == '0'){
            var areas = resp.data;
            // for(var i=0; i<areas.length; i++){
            //     var area = areas[i];
            //     // var option = '<option value="'+ area.aid +'">'+ area.aname +'</option>';
            //     $('#area-id').append('<option value="'+ area.aid +'">'+ area.aname +'</option>');
            // }
            var _html = template("areas-tmpl", {"areas": areas});
            $('#area-id').html(_html);
        }else{
            alert(resp.errmsg);
        }
    }, "json");
});

 

 

 

 

 

秒不可闫M先生
关注
专栏目录
flask爱家租房项目开发（一）
geek_xiong的博客
08-10 7629
1. 需求文档 ------2. 创建工程目录以及flask配置 ------3. 配置日志信息 ------4. 数据库设计与迁移 ------5. 静态文件的配置，使浏览器可以正常访问文件 ------6. csrf防护机制
JavaScript中的template模板引擎的使用
FreeSpider
07-27 558
关于模板引擎不在此做过多介绍，只将项目代码分享一下： 前端html代码 前端html中需要引用template.js 文件，这个自己可以去百度寻找。这个引入要放在jQuery后面，因为它里面会使用到jQuery。 &lt;div class="form-group"&gt; &lt;label for="area-id"...
爱家租房网站（完整）
08-27
爱家租房网站完结版，包括：注册（图片、短信验证码）、登陆、个人信息（上传头像、修改用户名）、我的房源（发布房源）、我的订单（支付、评论）、客户订单（接单、拒单）、房屋详情页、房屋搜索、房源预定、登出等。对应的博客地址：https://blog.csdn.net/geek_xiong/article/details/100108834
Python基于Flask框架前后端分离实现房屋租赁民宿预订平台-计算机毕业源码设计
计算机源码设计案例的博客
03-04 1591
技术环境: PyCharm + Flask + Python2.7或Python3.6 + Redis + mysql 技术简介：采用Python环境和Flask框架实现的一个爱家租房平台，整个项目的是基于前后端分离的开发模式。 1 前台全部采用静态html实现界面，通过ajax异步调用后端python提供的api接口查询数据库信息，通过json返回给前端展示。 2 此项目选用Flask框架，更加的灵活，比Django更高大上。 3 通过flask-session将session数据保存到redis数据库大
Flask项目之手机端租房网站的实战开发（十一）
weixin_30627341的博客
01-22 476
说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！ 接着上一篇博客继续往下写 ：https://blog.csdn.net/qq_41782425/article/details/86512594 目录 一丶用户房屋管理后端编写 二丶用户房屋管理前端编写 三丶测试用户管理后端接口 四丶主页幻灯片房屋信息后端编写 五丶主页幻灯片房屋信息前端编写 六丶测试主页幻灯片接...
aijia21.rar_eee.7322com_flask_flask爱家租房_python开发租房_爱家租房项目
07-14
爱家租房项目是一个使用Python的Flask框架进行开发的应用程序，它展示了如何在不采用前端后端分离的情况下构建一个完整的租房平台。这个项目不仅对于初学者理解Flask框架有极大的帮助，同时也为有一定经验的开发者...
Flask爱家租房配置.doc
04-08
《Flask爱家租房配置详解》 在搭建Flask应用，特别是针对爱家租房平台的移动端配置时，我们需要关注一系列的技术栈和环境设置。本文将详细介绍Windows环境下如何配置Flask应用，包括Python环境、数据库、缓存服务...
flask项目实践-爱家租房项目.zip
09-28
在本项目"flask项目实践-爱家租房项目.zip"中，主要涵盖了使用Python的Flask框架构建一个租房平台的实践应用。Flask是一个轻量级的Web服务器网关接口（WSGI）Web应用框架，它允许开发者用Python编写简单的但功能强大...
flask爱家租房项目开发（十）
geek_xiong的博客
08-17 1272
我的发布-- 主页显示发布的房源信息--- 房屋详情页
爱家租房网站（11）
08-19
爱家租房网站未完版，其中包括的功能有：图片、短信验证码，注册，登陆，个人中心，房屋管理，列表页等，对应的博客地址：https://blog.csdn.net/geek_xiong/article/details/99721702
爱家租房网站（13）
08-26
爱家租房网站未完版，包括：注册、登陆、个人中心信息、上传图片、实名认证、发布房源信息、搜索房源、预定房源、接单、拒单、支付（支付宝接口）。 对应的博客地址：https://blog.csdn.net/geek_xiong/article/details/99952746
爱家租房网站 后端-Python 源码
06-13
爱家租房网站，其中包括的功能有：图片、短信验证码，注册，登陆，个人中心，房屋管理，列表页等，对应的博客地址：https://blog.csdn.net/geek_xiong/article/details/99721702
Flask框架项目实例：**租房网站（一）
采菊东篱下，Python满乾坤！
12-06 1万+
Flask是一款MVC框架，主要是从模型、视图、模板三个方面对Flask框架有一个全面的认识， 通过完成作者-读书功能，先来熟悉Flask框架的完整使用步骤。操作步骤为： 1.创建项目2.配置数据库3.定义模型类4.定义视图并配置URL 5.定义模板 前面说了创建项目的流程，今天主要从配置到用户，主要根据思维导图来说，先看思维导图 主要
flask爱家租房项目开发（六）
geek_xiong的博客
08-13 994
上传图片-- 七牛的使用
Flask项目之手机端租房网站的实战开发（九）
weixin_30875157的博客
01-16 255
说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！ 接着上一篇博客继续往下写 ：https://blog.csdn.net/qq_41782425/article/details/86302733 目录 一丶区县信息后端编写 二丶为区县信息补充缓存机制 三丶缓存数据同步问题 四丶完善后端用户模块 五丶完善前端用户模块 六丶测试用户模块中个人信息栏，我的爱家，实名认...
Flask项目之手机端租房网站的实战开发（三）
热门推荐
cdtaogang's blog
01-03 9万+
说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！ 接着上一篇博客继续往下写 ：https://blog.csdn.net/qq_41782425/article/details/85623829 目录 一丶关于在项目中循环导入的问题 二丶日志功能实现 三丶项目数据库设计 四丶数据库迁移 一丶关于在项目中循环导入的问题 1.在上一篇中创建api_1_0蓝图下的d...
爱家租房项目④-项目总结与优化
王大阳的博客
03-08 992
文章目录15-订单01_订单模块后端代码保存订单查询用户的订单信息 15-订单 01_订单模块后端代码 保存订单 @api.route("/orders", methods=["POST"]) @login_required def save_order(): """保存订单""" user_id = g.user_id # 获取参数 order_data = r...
flask爱家租房项目开发（十一）
geek_xiong的博客
08-19 1115
房屋列表页（房间搜索功能）
最新Python教程全套合集项目实战(完整)
weixin_44941957的博客
05-01 1万+
资源属性：资源大小：128.27G文件数量：1313个文件，113个文件夹如果因为文件太多无法一次保存，请分批次逐一保存，切勿心急!01-python2018黑马基础班1-1 Linux基础1-2 python基础1-3 面向对象1-4 项目飞机大战02-入门Flask框架web开发视频01-Flask基础.zip02-模板.zip03-表单.zip04-数据库.zip05-06-综合案例.zip...
python flask智能租房项目
最新发布
10-19
好的，我理解了。关于你提到的 Python Flask 智能租房项目，我可以给你一些简单的介绍。 Python Flask 是一个轻量级的 Web 应用框架，它可以帮助开发者快速地构建 Web 应用程序。而智能租房项目则是一个基于人工智能技术的租房平台，它可以通过分析用户的需求和偏好，为用户推荐最适合的房源。 在 Python Flask 智能租房项目中，我们可以使用 Flask 框架来搭建 Web 应用程序的后端，同时使用一些人工智能技术来实现租房平台的智能推荐功能。具体来说，我们可以使用机器学习算法来分析用户的历史租房记录和偏好，从而预测用户可能感兴趣的房源类型和位置。此外，我们还可以使用自然语言处理技术来分析用户的搜索关键词和房源描述，从而更加准确地匹配用户的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秒不可闫M先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值