“好家园房产中介网后台管理”python项目

霸敛

已于 2022-06-08 16:40:22 修改

阅读量1.4k

点赞数 3

分类专栏：项目笔记文章标签： python flask

于 2022-04-27 21:05:25 首次发布

本文链接：https://blog.csdn.net/qq_52754254/article/details/124460105

版权

笔记同时被 2 个专栏收录

47 篇文章 3 订阅

订阅专栏

项目

14 篇文章 0 订阅

订阅专栏

一、语言和环境
1.实现语言：python语言。
2.环境要求：pycharm + mysql。
二、实现功能

使用flask技术开发“好家园房产中介网”的后台管理功能，具体实现功能如下：
1.首页index.html显示现有的所有房产信息，如图1所示。
在这里插入图片描述

图1显示所有房产信息
2．点击页面中的“发布住房信息”超链接,跳转到发布房产页面addHouse.html，初始的页面效果如下图2所示。该页面首次加载时要从数据库中读取所有的房型信息，并显示在下拉列表框中。
在这里插入图片描述

图2 添加房产信息
2.点击图2中 “提交”按钮后，即可实现将用户输入的有效房产信息添加到对应的数据表中。并提示操作成功
3.点击页面中的“汇总住房信息”超链接，即可实现用echarts图表展示不同房型的数据。页面效果如下图3所示
在这里插入图片描述

图3 汇总房产信息

注意：
1）页面效果要求用模板继承实现
2）表格要求用bootstrap美化
3）图表展示要求用echarts
三、数据库设计
1.创建数据库（HouseDB）。
2.创建房型表（HouseTypes），结构如下：
字段名说明字段类型长度备注
HouseTypeID 房型编号 int 主键，自增，增量为1
HouseTypeName 房型名称 varchar 30 非空

创建房产信息表（Houses），结构如下：

字段名说明字段类型长度备注
HouseID 房产编号 int 主键，自增，增量为1
HouseTypeID 房型编号 int 非空，外键，参照房型表的主键
Area 面积 int 非空
Price 价格 float 非空
Adress 地址 varchar 50 非空
HouseDesc 描述 varchar 100
四、步骤得分
步骤分值
步骤1：正确创建数据库 10分
步骤2：正确搭建了项目框架 10分
步骤3：正确创建了3个页面 15分，每个页面5分
步骤4：正确完成了查看房产信息的功能 15分
步骤5：正确完成了添加房产信息的功能 15分
步骤6：正确完成了汇总房产信息的功能 15分
步骤7：正确用bootstrap完成了表格美化 10分
步骤8：编码规范，有适量的js验证 10分

所用代码

echarts网址

echarts网址
创建文件夹static和templates，在static文件下创建css和js文件夹
文件下载（static文件夹）点击下面链接！
点击下载static
点击下载数据库

app.py

from flask import  Flask,render_template,request
from  DBHelper import DBHelper
import pandas as pd
global rows
app=Flask(__name__)
@app.route("/")
def index():
    global rows
    db=DBHelper()
    sql="select * from HouseTypes  a,Houses b where  a.HouseTypeID=b.HouseTypeID order by HouseID"
    db.cursor.execute(sql)
    rows=db.cursor.fetchall()
    return render_template("index.html",rows=rows)


@app.route("/addHouse",methods=["POST","GET"])
def addHouse():
    global rows
    if request.method=="GET":
        db = DBHelper()
        sql = "select * from HouseTypes"
        db.cursor.execute(sql)
        rowTypes = db.cursor.fetchall()
        return render_template("addhouse.html", rowTypes=rowTypes)
    else:
        HouseTypeID=request.form.get("selType")
        Area=request.form.get("txtArea")
        Price = request.form.get("txtPrice")
        Adress = request.form.get("txtAddress")
        Desc= request.form.get("txtDesc")
        sql="insert into Houses values(null,%s,%s,%s,'%s','%s')"%(HouseTypeID,Area,Price,Adress,Desc)
        db=DBHelper()
        db.cursor.execute(sql)
        db.con.commit() #执行添加语句一定要提交，否则不能生效
        return "<h1>发布成功!</h1><a href='/'>返回首页</a>"


@app.route("/echartshow")
def echartshow():
    global rows
    df = pd.DataFrame(rows)
    print(df)
    df2 = df.groupby("HouseTypeName").count()["HouseID"].sort_values(ascending=False).head(5)
    print(df2)
    return render_template("echartshow.html", x=list(df2.index), y=list(df2))


if __name__=="__main__":
    app.run(debug=True)

DBHelper.py

import pymysql
class DBHelper:  # 定义操作数据库的类
    def __init__(self):   #在构造函数中，先创建好连接对象和游标对象，
        self.con = pymysql.connect(host="127.0.0.1", port=3306,user="root", passwd="123456", db="test",
                              charset="utf8")  # 创建连接
        self.cursor =self.con.cursor(pymysql.cursors.DictCursor)  # 获取游标对象，用来执行sql语句

    def close(self):  #定义关闭连接的方法
        self.con.close()

index.html

{% extends  "base.html"  %}
{% block content  %}
    <table class="table table-striped">
        <tr>
            <th>编号</th>
            <th>房型</th>
            <th>面积(平方米)</th>
            <th>价格(万)</th>
            <th>地址</th>
            <th>描述</th>
        </tr>
        <tbody>
        {% for row in rows %}
        <tr>
            <td>{{row["HouseID"]}}</td>
            <td>{{row["HouseTypeName"]}}</td>
            <td>{{row["Area"]}}</td>
            <td>{{row["Price"]}}</td>
            <td>{{row["Adress"]}}</td>
            <td>{{row["HouseDesc"]}}</td>
        </tr>
    {% endfor  %}
        </tbody>
    </table>
{% endblock %}

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #top  #toprow1{
            text-align: center;
            font-size: 40px;}
    </style>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<div id="top">
    <div id="toprow1">好家园房产中介网后台管理</div>
    <div id="toprow2">
        <a href="/">查看住房信息</a>|
        <a href="/addHouse">发布住房信息</a>|
        <a href="/echartshow">汇总住房信息</a>
        <hr/>
    </div>
</div>
<div id="content">
    {% block content %}

    {% endblock %}
</div>
</body>
</html>

addHouse.html

{% extends  "base.html"  %}
{% block content  %}
<form class="form-horizontal"   role="form" method="POST" action="/addHouse" onsubmit="return check();">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">房型编号</label>
        <div class="col-sm-6">
            <select name="selType"  class="form-control">
                {% for row in rowTypes %}
                <option value='{{row["HouseTypeID"]}}'>{{row["HouseTypeName"]}}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label" >面积</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="txtArea" placeholder="请输入面积">
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">价格</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="txtPrice" placeholder="请输入价格">
        </div>
    </div>
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label" >地址</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="txtAddress" placeholder="请输入地址">
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label" >描述</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" name="txtDesc" placeholder="请输入描述">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">发布</button>
        </div>
    </div>
</form>
    <script>
        function check() {
            var MJ=document.getElementsByName("txtArea")[0].value
            var JG=document.getElementsByName("txtPrice")[0].value
            var DZ=document.getElementsByName("txtAddress")[0].value
            var MS=document.getElementsByName("txtDesc")[0].value
            if (MJ==""){
                alert("请输入：面积")
                return false
            }
            if (JG==""){
                alert("请输入：价格")
                return false
            }
            if (DZ==""){
                alert("请输入：地址")
                return false
            }
            if (MS==""){
                alert("请输入：描述")
                return false
            }
            return true
        }
</script>
{%  endblock  %}

echartshow.html
注意：这个里面的 echarts.min.js 点击下载在文件static文件夹下创建js文件 echarts.min.js 将下载的代码拷贝下来！
echarts.min.js 点击下载

{% extends  "base.html"  %}
{% block content  %}
<div id="box" style="width: 800px;height: 900px;margin: 0 auto"></div>
<script src="static/js/echarts.min.js"></script>
<script>
  myecharts=echarts.init(document.getElementById("box"))
  option = {
    title : {
        text: '好家园房产中介网后台管理',
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['汇总住房信息']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : {{ x|safe }}
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'汇总住房信息',
            type:'bar',
            data:{{ y|safe }}
        },
    ]
};
 myecharts.setOption(option)
 </script>
{%  endblock  %}