[雪峰磁針石部落格]flask構建自動化測試平臺7-新增google地圖

本章將介紹以下主題：

mock資料庫
建立犯罪地圖

mock資料庫

mockdbhelper.py


class MockDBHelper:

    def connect(self, database="crimemap"):
        pass

    def add_crime(self, category, date, latitude, longitude, description):
        data = [category, date, latitude, longitude, description]
        for i in data:
            print (i, type(i))

    def get_all_crimes(self):
        return [{`latitude`: -33.301304,
                 `longitude`: 26.523355,
                 `date`: "2000-01-01",
                 `category`: "mugging",
                 `description`: "mock description"}]

    def add_input(self, data):
        pass

    def clear_all(self):
        pass

db_setup.py


import pymysql
import dbconfig
connection = pymysql.connect(host=`localhost`,
                             user=dbconfig.db_user,
                             passwd=dbconfig.db_password)

try:
    with connection.cursor() as cursor:
        sql = "CREATE DATABASE IF NOT EXISTS crimemap"
        cursor.execute(sql)
        sql = """CREATE TABLE IF NOT EXISTS crimemap.crimes (
id int NOT NULL AUTO_INCREMENT,
latitude FLOAT(10,6),
longitude FLOAT(10,6),
date DATETIME,
category VARCHAR(50),
description VARCHAR(255),
updated_at TIMESTAMP,
PRIMARY KEY (id)
)"""
        cursor.execute(sql)
    connection.commit()
finally:
    connection.close()

crimemap.py


from flask import Flask
from flask import render_template
from flask import request
import json
import dbconfig
if dbconfig.test:
    from mockdbhelper import MockDBHelper as DBHelper
else:
    from dbhelper import DBHelper

app = Flask(__name__)
DB = DBHelper()


@app.route("/")
def home():
    crimes = DB.get_all_crimes()
    crimes = json.dumps(crimes)
    return render_template("home.html", crimes=crimes)


@app.route("/submitcrime", methods=[`POST`])
def submitcrime():
    category = request.form.get("category")
    date = request.form.get("date")
    latitude = float(request.form.get("latitude"))
    longitude = float(request.form.get("longitude"))
    description = request.form.get("description")
    DB.add_crime(category, date, latitude, longitude, description)
    return home()


if __name__ == `__main__`:
    app.run(host=`0.0.0.0`,port=8000, debug=True)

dbconfig.py


test = True

dbhelper.py


import pymysql
import dbconfig


class DBHelper:

    def connect(self, database="crimemap"):
        return pymysql.connect(host=`localhost`,
                               user=dbconfig.db_user,
                               passwd=dbconfig.db_password,
                               db=database)

    def get_all_inputs(self):
        connection = self.connect()
        try:
            query = "SELECT description FROM crimes;"
            with connection.cursor() as cursor:
                cursor.execute(query)
            return cursor.fetchall()
        finally:
            connection.close()

    def add_input(self, data):
        connection = self.connect()
        try:
            query = "INSERT INTO crimes (description) VALUES (%s);"
            with connection.cursor() as cursor:
                cursor.execute(query, data)
                connection.commit()
        finally:
            connection.close()

    def clear_all(self):
        connection = self.connect()
        try:
            query = "DELETE FROM crimes;"
            with connection.cursor() as cursor:
                cursor.execute(query)
                connection.commit()
        finally:
            connection.close()

home.html


<!DOCTYPE html>
<html lang="en">
  <head>

  <link type="text/css" rel="stylesheet" href="{{url_for(`static`, filename=`css/style.css`) }}" /> 

  <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js">
  </script> 

  <script type="text/javascript">
    var map;
    var marker;
    var existing_crimes;

    function initialize() { 
      var mapOptions = {
        center: new google.maps.LatLng(-33.30578381949298, 26.523442268371582),
        zoom: 15
      };
      map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      google.maps.event.addListener(map, `click`, function(event){   
        placeMarker(event.latLng);
      });
      placeCrimes({{crimes | safe}});
    }

    function placeCrimes(crimes) {
      for (i=0; i<crimes.length; i++) {
        crime = new google.maps.Marker( {
          position: new google.maps.LatLng(crimes[i].latitude, crimes[i].longitude),
          map: map,
          title: crimes[i].date + "
" + 
            crimes[i].category + "
" + crimes[i].description
          }
        );
      }
    }

    function placeMarker(location) {
      if (marker) {
        marker.setPosition(location);
      } else {
        marker = new google.maps.Marker({
          position: location, 
          map: map
        });
      }
    document.getElementById(`latitude`).value = location.lat();
    document.getElementById(`longitude`).value = location.lng();
    }
  </script>
  
</head>
  <body onload="initialize()">
      <h1>CrimeMap</h1>
      <p>A map of recent criminal activity in the Grahamstown area.</p>
      <div id="map-canvas"></div>

      <div id="newcrimeform">
        <h2>Submit new crime</h2>
        <form action="/submitcrime" method="POST">
        <label for="category">Category</label> 
        <select name="category" id="category">
            <option value="mugging">Mugging</option>
            <option value="breakin">Break-in</option>
        </select> 
        </select> 
        <label for="date">Date</label>
        <input name="date" id="date" type="date">
        <label for="latitude">Latitude</label>
        <input name="latitude" id="latitude" type="text">
        <label for="longitude">Longitude</label>
        <input name="longitude" id="longitude" type="text">
        <label for="description">Description</label>
        <textarea name="description" id="description" placeholder="A brief but detailed description of the crime"></textarea>
        <input type="submit" value="Submit">
      </form>
    </div>
  </body>
</html>

style.css


body { 
    font-family: sans-serif; 
    background: #eee; 
}

#map-canvas {
    width: 70%;
    height: 500px;
    float: left;
}

#newcrimeform {
    float: right;
    width: 25%;
}

input, select, textarea { 
    display: block;
    color: grey;
    border: 1px solid lightsteelblue;
    line-height: 15px;
    margin: 2px 6px 16px 0px;
    width: 100%;
}

input[type="submit"] {
    padding: 5px 10px 5px 10px;
    color: black;
    background: lightsteelblue;
    border: none;
    box-shadow: 1px 1px 1px #4C6E91;
}

input[type="submit"]:hover {
    background: steelblue;
}

參考資料

本文相關書籍下載
討論釘釘免費群21745728 qq群144081101 567351477
本文涉及的python測試開發庫謝謝點贊！
本文程式碼地址

[雪峰磁針石部落格]flask構建自動化測試平臺7-新增google地圖

mock資料庫

參考資料

相關文章