项目

题目：好家园房产中介网后台管理

一、 语言和环境

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），结构如下：

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

四、 步骤得分

步骤1：正确创建数据库

CREATE TABLE `housetypes` (

  `housetypeid` int NOT NULL AUTO_INCREMENT,

  `housetypename` varchar(20) NOT NULL,

  PRIMARY KEY (`housetypeid`)

) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb3;

1

CREATE TABLE `houses` (

  `houseid` int NOT NULL AUTO_INCREMENT,

  `housetypeid` int NOT NULL,

  `area` int NOT NULL,

  `price` float NOT NULL,

  `address` varchar(50) NOT NULL,

  `housedesc` varchar(100) DEFAULT NULL,

  PRIMARY KEY (`houseid`)

) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb3;

步骤2：正确搭建了项目框架

步骤3：正确创建了3个页面

Index.html

{% extends  "base.html"  %}

{% block content  %}

<table class="table table-striped">

    <caption><strong>查看房产信息</strong></caption>

    <thead>

    <tr>

        <th>房产编号</th>

        <th>房型编号</th>

        <th>面积(平方米)</th>

        <th>价格(万)</th>

        <th>地址</th>

        <th>描述</th>

    </tr>

    </thead>

    <tbody>

    {% for row in rows %}

    <tr>

        <td>{{row["houseid"]}}</td>

        <td>{{row["housetypename"]}}</td>

        <td>{{row["area"]}}</td>

        <td>{{row["price"]}}</td>

        <td>{{row["address"]}}</td>

        <td>{{row["housedesc"]}}</td>

    </tr>

{% endfor  %}

    </tbody>

</table>

{%  endblock  %}

Addhouse.html

{% extends  "base.html"  %}

{% block content  %}

<form class="form-horizontal" role="form" method="post" action="/addHouse">

    <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>

{%  endblock  %}

App.py

from  flask import  Flask,render_template,request

app=Flask(__name__)

from DBHelper import  DBHelper

@app.route("/")

def index():

    #查询所有的房屋信息

    db=DBHelper()

    sql="select * from housetypes  a,houses b where  a.housetypeid=b.housetypeid "

    db.cursor.execute(sql)

    rows=db.cursor.fetchall()

    return  render_template("index.html",rows=rows)

@app.route("/addHouse",methods=["GET","POST"])

def addHouse():

    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") #获取类型id

        area=request.form.get("txtArea")

        price = request.form.get("txtPrice")

        address = request.form.get("txtAddress")

        desc= request.form.get("txtDesc")

        sql="insert into houses values(null,%s,%s,%s,'%s','%s')"%(housetypeid,area,price,address,desc)

        print(sql)

        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="housedb", charset="utf8")  # 创建连接

        self.cursor =self.con.cursor(pymysql.cursors.DictCursor)  # 获取游标对象，用来执行sql语句

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

        self.con.close()

if __name__ == '__main__':

    sql="insert into customer(loginid,pwd,customername,identityid)  values('yangyang','123456','老周','421111111111111111')"

    db=DBHelper()

    db.cursor.execute(sql)

    # pymysql执行增删改语句时，一定要提交,否则无法生效

    db.con.commit()

    if db.cursor.rowcount>0: #判断受影响的行数

        print("注册成功")

    else:

        print("注册失败")

    db.close()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="static/css/bootstrap.css">

    <style type="text/css">

        *{

            margin:0px; padding:0px;

        }

        #top,#content{

            margin:5px auto;

        }

        #top  #toprow1{

            text-align: center;

            font-size: 40px;

        }

    </style>

</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>

Echartshow.html

{% 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  %}

步骤4：正确完成了查看房产信息的功能

步骤5：正确完成了添加房产信息的功能

步骤7：正确用bootstrap完成了表格美化