Share
In deze serie zullen we Python, Flask en MySQL gebruiken om een eenvoudige webtoepassing helemaal opnieuw te maken. Het wordt een eenvoudige bucketlist-applicatie waarin gebruikers zich kunnen registreren, inloggen en hun bucketlist kunnen maken.
Deze tutorial gaat ervan uit dat je enige basiskennis hebt van de Python programmeertaal. We zullen gebruiken fles, een Python-webtoepassingsraamwerk om onze toepassing te maken met MySQL als de achterkant.
Als je je Python-vaardigheden wilt opfrissen, probeer dan de cursus Introduction to Python, die je een stevige basis geeft in de taal voor slechts $ 5.
Flask is een Python-framework voor het maken van webapplicaties. Van de officiële site,
Flask is een microframe voor Python op basis van Werkzeug, Jinja 2 en goede bedoelingen.
Als we aan Python denken, is het Django-raamwerk het feitelijke kader dat bij ons opkomt. Maar vanuit het perspectief van een Python-beginner is Flask gemakkelijker om mee te beginnen, vergeleken met Django.
Het opzetten van Flask is vrij eenvoudig en snel. Met Pip pakketmanager, alles wat we moeten doen is:
pip-installatiekolf
Als u klaar bent met het installeren van Flask, maakt u een map met de naam FlaskApp. Navigeer naar de FlaskApp map en maak een bestand met de naam app.py. Importeer de fles module en maak een app met behulp van Flask zoals getoond:
van de flacon importeren Flask app = Flask (__ name__)
Definieer nu de basisroute / en de bijbehorende verzoekbehandelaar:
Accentsconagua
@ app.route ("/") def main (): terug "Welkom!"Controleer vervolgens of het uitgevoerde bestand het hoofdprogramma is en voer de app uit:
if __name__ == "__main__": app.run ()
Sla de wijzigingen op en voer het uit app.py:
python app.py
Richt uw browser op http: // localhost: 5000 / en u zou het welkomstbericht moeten hebben.
Ten eerste moeten we bij het uitvoeren van de toepassing een startpagina weergeven met de nieuwste bucketlist-items die door gebruikers zijn toegevoegd. Dus laten we onze startpagina toevoegen aan onze applicatiemap.
Flask zoekt naar sjabloonbestanden in de templates map. Dus navigeer naar de PythonApp map en maak een map aan met de naam templates. Binnen templates, maak een bestand aan met de naam index.html. Doe open index.html en voeg de volgende HTML toe:
Python Flask Bucket Lijst App Python Flask-app
Bucketlijst-app
Schrijf je vandaag in
Verlanglijstje
Donec id elit non mi porta gravida bij eget metus. Maecenas faucibus mollis interdum.
Verlanglijstje
Morbi leo risus, porta ac consectetur ac, vestibulum bij eros. Cras mattis consectetur purus sit amet fermentum.
Verlanglijstje
Maecenas sed diam eget risus varius blandit sit amet non magna.
Verlanglijstje
Donec id elit non mi porta gravida bij eget metus. Maecenas faucibus mollis interdum.
Verlanglijstje
Morbi leo risus, porta ac consectetur ac, vestibulum bij eros. Cras mattis consectetur purus sit amet fermentum.
Verlanglijstje
Maecenas sed diam eget risus varius blandit sit amet non magna.
Doe open app.py en importeer render_template, die we zullen gebruiken om de sjabloonbestanden te renderen.
uit de kolf importfles, render_template
Wijzig de hoofdmethode om het gerenderde sjabloonbestand terug te zetten.
def main (): return render_template ('index.html')Sla de wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 5000 / en u zou het onderstaande scherm moeten hebben:
We zullen gebruiken MySQL als de achterkant. Dus log in op MySQL vanaf de opdrachtregel, of als u liever een GUI-achtige MySQL-werkbank hebt, kunt u dat ook gebruiken. Maak eerst een database met de naam Verlanglijstje. Vanaf de opdrachtregel:
mysql -u-p
Voer het vereiste wachtwoord in en voer bij het inloggen de volgende opdracht uit om de database aan te maken:
CREËER DATABASE BucketList;
Nadat de database is gemaakt, maakt u een tabel met de naam tbl_user zoals getoond:
MAAK TAFEL 'BucketList'. 'Tbl_user' ('user_id' BIGINT NULL AUTO_INCREMENT, 'user_name' VARCHAR (45) NULL, 'user_username' VARCHAR (45) NULL, 'user_password' VARCHAR (45) NULL, PRIMARY KEY ('user_id' )); We zullen gebruiken Opgeslagen procedures voor onze Python-applicatie om te communiceren met de MySQL-database. Dus, eenmaal de tafel tbl_user is gemaakt, maakt u een opgeslagen procedure genaamd sp_createUser om een gebruiker aan te melden.
Bij het maken van een opgeslagen procedure om een gebruiker te maken in de tbl_user tabel, eerst moeten we controleren of een gebruiker met hetzelfde gebruikersnaam bestaat al. Als dit bestaat, moeten we een foutmelding naar de gebruiker sturen, anders maken we de gebruiker in de gebruikerstabel. Hier is hoe de opgeslagen procedure sp_createUser zou kijken:
DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_createUser' (IN p_naam VARCHAR (20), IN p_username VARCHAR (20), IN p_password VARCHAR (20)) BEGIN if (select exists (selecteer 1 uit tbl_user waar user_username = p_username)) SELECTEER vervolgens 'Gebruikersnaam Bestaat !!'; ELSE invoegen in tbl_user (user_name, user_username, user_password) waarden (p_name, p_username, p_password); STOP ALS; END $$ DELIMITER;
Navigeer naar de PythonApp / templates map en maak een HTML-bestand met de naam signup.html. Voeg de volgende HTML-code toe aan signup.html:
Python Flask Bucket Lijst App Python Flask-app
Bucketlijst-app
Voeg ook het volgende toe CSS zoals signup.css naar de statische map binnenin PythonApp.
body padding-top: 40px; padding-bodem: 40px; .form-signin max-width: 330px; opvulling: 15px; marge: 0 auto; .form-signin .form-signin-heading, .form-signin .checkbox margin-bottom: 10px; .form-signin .checkbox font-weight: normaal; .form-signin .form-control position: relative; hoogte: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opvulling: 10px; lettergrootte: 16px; .form-signin .form-control: focus z-index: 2; .form-signin input [type = "email"] margin-bottom: -1px; grens-onder-rechter-straal: 0; grens-onder-links radius: 0; .form-signin input [type = "wachtwoord"] margin-bottom: 10px; grens-bovenkant-linker-straal: 0; grens-bovenkant-juiste-straal: 0;
In app.py voeg een andere methode toe genaamd showSignUp om de aanmeldingspagina weer te geven zodra er een verzoek bij komt / showSignUp:
@ app.route ('/ showSignUp') def showSignUp (): return render_template ('signup.html')Sla de wijzigingen op en start de server opnieuw op. Klik op de Inschrijven knop op de startpagina en u zou de aanmeldingspagina moeten hebben zoals getoond:
Vervolgens hebben we een server-side methode nodig voor de gebruikersinterface om te communiceren met de MySQL-database. Dus navigeer naar PythonApp en open app.py. Maak een nieuwe methode genaamd inschrijven en voeg ook een route toe /inschrijven. Hier is hoe het eruit ziet:
@ app.route ('/ signUp') def signUp (): # create user code is here !!We gebruiken jQuery AJAX om onze aanmeldingsgegevens te plaatsen in de inschrijven methode, dus we zullen de methode in de routedefinitie specificeren.
@ app.route ('/ signUp', methods = ['POST']) def signUp (): # create user code is here !!Om de geboekte waarden te kunnen lezen, moeten we importeren verzoek van Flask.
uit kolf importeren Kolf, render_template, verzoek
Gebruik makend van verzoek we kunnen de geposte waarden lezen zoals hieronder getoond:
@ app.route ('/ signUp', methods = ['POST']) def signUp (): # lees de geposte waarden van de UI _name = request.form ['inputName'] _email = request.form ['inputEmail' ] _password = request.form ['inputPassword']Nadat de waarden zijn gelezen, controleren we eenvoudig of ze geldig zijn en laten we voorlopig een eenvoudig bericht terugzenden:
@ app.route ('/ signUp', methods = ['POST']) def signUp (): # lees de geposte waarden van de UI _name = request.form ['inputName'] _email = request.form ['inputEmail' ] _password = request.form ['inputPassword'] # valideert de ontvangen waarden als _name en _email en _password: return json.dumps ('html': 'Alle velden goed !!') else: return json.dumps (' html ':'Voer de vereiste velden in')Ook importeren json van Flask, omdat we het in de bovenstaande code gebruiken om terug te keren json gegevens.
uit fles Kolf, render_template, json, verzoek
We zullen jQuery AJAX gebruiken om het aanmeldingsverzoek naar de Python-methode te verzenden. Downloaden en plaatsen jQuery binnen PythonApp / static / js en voeg een link toe vanaf de aanmeldingspagina. Nadat jQuery is toegevoegd, voegen we een jQuery toe POST verzoek wanneer de gebruiker op de knop klikt Inschrijven knop.
Laten we dus de klikgebeurtenis van de aanmeldingsknop als volgt toevoegen:
$ (function () $ ('# btnSignUp'). klik (functie () $ .ajax (url: '/ signUp', data: $ ('form'). serialize (), type: 'POST' , success: function (response) console.log (response);, error: function (error) console.log (error););););Sla alle wijzigingen op en start de server opnieuw op. Van de Inschrijven pagina, vul de details in en klik op Inschrijven. Controleer de browserconsole en je zou het onderstaande bericht moeten hebben:
"html": "Alle velden goed !!" Zodra we de hebben naam, e-mailadres en wachtwoord, we kunnen gewoon de op MySQL opgeslagen procedure bellen om de nieuwe gebruiker aan te maken.
Om verbinding te maken met MySQL gebruiken we Flask-MySQL, een Flask-extensie. Om mee te beginnen Kolf-MySQL, installeer het met Pip pakket manager:
pip install flask-mysql
Importeer MySQL binnenin app.py:
van flask.ext.mysql MySQL importeren
Eerder hebben we onze app gedefinieerd zoals getoond:
app = Flask (__ name__)
Samen met die omvatten de volgende MySQL-configuraties:
mysql = MySQL () # MySQL-configuraties app.config ['MYSQL_DATABASE_USER'] = 'jay' app.config ['MYSQL_DATABASE_PASSWORD'] = 'jay' app.config ['MYSQL_DATABASE_DB'] = 'BucketList' app.config ['MYSQL_DATABASE_HOST '] =' localhost 'mysql.init_app (app)
Laten we eerst de MySQL-verbinding maken:
conn = mysql.connect ()
Zodra de verbinding is gemaakt, hebben we een cursor om onze opgeslagen procedure te bevragen. Dus, met behulp van conn verbinding, maak een cursor.
cursor = conn.cursor ()
Voordat we de procedure voor het aanmaken van gebruikers aanroepen, laten we ons wachtwoord laten zouten met behulp van een hulp van Werkzeug. Importeer de module in app.py:
van werkzeug import generate_password_hash, check_password_hash
Gebruik de zoutmodule om het gehashte wachtwoord te maken.
_hashed_password = generate_password_hash (_password)
Laten we nu de procedure noemen sp_createUser:
cursor.callproc ( 'sp_createUser', (_ naam, _email, _hashed_password))
Als de procedure met succes is uitgevoerd, zullen we de wijzigingen vastleggen en het succesbericht retourneren.
data = cursor.fetchall () als len (data) 0 is: conn.commit () return json.dumps ('message': 'User created created!') else: return json.dumps ('error': str (data [0]))Sla de wijzigingen op en start de server opnieuw op. Ga naar de aanmeldingspagina en voer het naam, e-mailadres en wachtwoord en klik op de Inschrijven knop. Na het maken van een geslaagde gebruiker, kunt u een bericht in uw browserconsole zien.
"bericht": "Gebruiker is succesvol gemaakt!"
In deze zelfstudie hebben we gezien hoe u aan de slag kunt gaan met het maken van een webtoepassing met Python-kolf, MySQL en de Kolf-MySQL uitbreiding. We hebben de databasetabellen en opgeslagen procedure gemaakt en ontworpen en de aanmeldingsfunctionaliteit geïmplementeerd. In de volgende zelfstudie nemen we deze reeks naar een hoger niveau door de aanmeldfunctionaliteit en een aantal andere functies te implementeren.
Broncode van deze tutorial is beschikbaar op GitHub.
Laat het ons weten in de reacties hieronder!
Leer Python met onze complete python-handleiding, of je nu net begint of dat je een ervaren coder bent die op zoek is naar nieuwe vaardigheden.
