一个好家园后台信息管理

app.py

import pymysql
from Mysql import mysql
from flask import Flask,render_template,request,redirect
import pandas as pd

app=Flask(__name__)
global rows
db=mysql()

@app.route("/")
def index():
    global rows
    db=mysql(db="housedb")
    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=["GET","POST"])
def addHouse():
    if request.method=="GET":
        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)
        print(sql)
        db.cursor.execute(sql)
        db.conn.commit()
        return redirect("/")
@app.route("/huizong")
def huizong():
    sql = "select * from housetypes a,houses b where a.housetypeid=b.housetypeid"
    db.cursor.execute(sql)
    rows = db.cursor.fetchall()
    df=pd.DataFrame(rows)
    df1=df.groupby("HouseTypeName").count()["HouseID"].sort_values(ascending=False)
    return render_template("addecharts.html",x=list(df1.index),y=list(df1.values))
if __name__ == '__main__':
    app.run(debug=True)

Mysql.py

import pymysql

class mysql():
    def __init__(self,db="housedb"):
        self.conn=pymysql.connect(host="127.0.0.1",db=db,user="root",passwd="123456")
        self.cursor=self.conn.cursor(pymysql.cursors.DictCursor)

    def query(self,sql,args=None):
        num=self.cursor.execute(sql,args=args)
        self.conn.commit()
        if num:
            return True
        else:
            return False

    def close(self):
        self.conn.close()

templates/addecharts.html

{% extends "base.html" %}
{% block content %}
 <div id="box" style="width: 770px; height: 550px; margin: 0 auto;"></div>
  <script src="static/js/echarts.min.js"></script>
    <script>
      var myChart = echarts.init(document.getElementById('box'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '好家园房产中介后台管理'
            },
            tooltip: {},
            legend: {
                data:['房型数量']
            },
            xAxis: {
                data: {{ x | safe }}
            },
            yAxis: {},
            series: [{
                name: '房型数量',
                type: 'bar',
                data: {{ y  }}
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
{% endblock %}

addHouse.html

{% extends "base.html" %}
{% block content %}
<form class="form-horizontal" role="form" method="post" action="/addHouse" onsubmit="return change()">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">房型</label>
    <div class="col-sm-10">
        <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="inputEmail3" class="col-sm-2 control-label">面积</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="txtArea" placeholder="请输入面积">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">价格</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="txtPrice" placeholder="请输入价格">
    </div>
  </div>
 <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">地址</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="txtAddress" placeholder="请输入地址">
    </div>
  </div>
 <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">描述</label>
    <div class="col-sm-10">
      <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 change() {
            var area=document.getElementsByName("txtArea")[0].value
            var price=document.getElementsByName("txtPrice")[0].value
            var address=document.getElementsByName("txtAddress")[0].value
            var desc=document.getElementsByName("txtDesc")[0].value

            if(area==""){
                alert("请输入面积")
                return false;
            }
            else if(price==""){
                alert("请输入价格")
                return false;
            }
            else if(address==""){
                alert("请确认地址")
                return false;
            }
            else if(desc==""){
                alert("请输入描述")
                return false;
            }
            return true
        }
    </script>
{% endblock %}

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div>
        <!-- 最新版本的 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>
    </div>
</head>
<style type="text/css">
    *{
        margin: 0px;padding: 0px;
    }
    #top,#content{
        margin: 5px auto;
    }
    #top #top1{
        text-align: center;
        font-size: 40px;
    }
</style>
<body>
<div id="top">
    <div id="top1">好家园房产中介网后台管理</div>

    <div id="top2">
        <a href="/">查看住房信息 </a>|<a href="/addHouse"> 发布住房信息</a>|<a href="/huizong"> 汇总住房信息</a>
        <hr/>
    </div>
</div>
<div id="content">
    {% block content %}
    {% endblock %}
</div>
</body>
</html>

index.html

{% extends "base.html" %}
{% block content %}

<table class="table table-condensed">
  <thead>
  <tr>
      <td>编号</td>
      <td>房型</td>
      <td>面积（平方米）</td>
      <td>价格（万）</td>
      <td>地址</td>
      <td>描述</td>
  </tr>
  </thead>

{% for row in rows %}
<tr>
  <td class="active">{{ row["HouseID"] }}</td>
  <td class="success">{{ row["HouseTypeName"] }}</td>
  <td class="warning">{{ row["Area"] }}</td>
  <td class="danger">{{ row["Price"] }}</td>
  <td class="info">{{ row["Adress"] }}</td>
  <td class="active">{{ row["HouseDesc"] }}</td>
</tr>
{% endfor %}
</table>
{% endblock %}