本章将介绍以下主题：
本文最新版本
代码地址
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 + "\n" +
crimes[i].category + "\n" + 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;
}
![image.png]( "image.png")
参考资料
