量化交易系统搭建之五：网页的前后端搭建

　　量化交易系统搭建之五：网页的前后端搭建

　　本文将简要介绍，如何使用Python等工具，零基础完成网页搭建，功能包括用户注册和登录，后台数据库读取和前端图像展示等。

　　特别鸣谢：ticaleen和油管账号Tech with Tim。

　　效果展示：

　　用户可以注册和登录网站（如下图）

　　2. 登录后可以查看主页内容

　　3. 浏览不同的信息（从后台数据库中抓取）

　　搭建网页时，大致需要完成几个步骤：

　　下面，本文将简要介绍这些步骤。

　　01

　　—

　　建设网页后端

　　一、安装Flask

　　Flask是一个用Python编写的Web应用程序框架，它可以帮助开发人员直接编写Web应用程序，而不必担心协议、线程管理等细节。因此，flask常被称为「微框架」，因为它旨在保持应用程序的核心简单且可扩展。初次使用flask时，需要运行以下代码安装flask。

　　pip install flaskpip install flask-loginpip install flask-sqlalchemy

　　二、创建网页启动文件

　　（一）在主目录下，创建「main.py」。该文件将是运行web程序的起点。其中，假如将debug设置成True，每次更新python代码并保存后，网页程序都会立刻重启并更新。

　　from website import create_app<br />app = create_app()<br />if __name__ == '__main__': #must include host to run on cloud server app.run(host='0.0.0.0', debug=True)

　　（二）在/website/路径下创建「__init__.py」。以下代码完成了对web程序进行了设置，包括加载数据库等。为了方便代码管理，引入「蓝图（Blueprint）」。顾名思义，蓝图可以将庞大的项目模块化，而不用全部代码写在一个文档里，这类似于python中的class。例如，「__init__.py」引入了名为「auth」和「view」的两个蓝图，其中，auth主要负责处理用户的注册、登录和登出功能；view主要用来展示首页信息。

　　from flask import Flaskfrom flask_sqlalchemy import SQLAlchemyfrom os import pathfrom flask_login import LoginManager<br />db = SQLAlchemy()DB_NAME = "database.db"<br />def create_app(): app = Flask(__name__) app.config['SECRET_KEY'] = 'hjshjhdjah kjshkjdhjs' app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{DB_NAME}' db.init_app(app)<br /> from .views import views from .auth import auth<br /> app.register_blueprint(views, url_prefix='/') app.register_blueprint(auth, url_prefix='/')<br /> from .models import User<br /> create_database(app)<br /> login_manager = LoginManager() login_manager.login_view = 'auth.login' login_manager.init_app(app)<br /> @login_manager.user_loader def load_user(id): return User.query.get(int(id))<br /> return app<br />def create_database(app): if not path.exists('website/' + DB_NAME): db.create_all(app=app) print('Created Database!')<br />

　　（三）在/website/路径下创建Blueprints文件「auth.py」和「views.py」。以auth.py为例，render_template()主要用来处理当用户访问至主路径下时，返回的html界面。

　　from flask import Blueprint, render_template, request, flash, redirect, url_forfrom .models import Userfrom werkzeug.security import generate_password_hash, check_password_hashfrom . import dbfrom flask_login import login_user, login_required, logout_user, current_userfrom sqlalchemy import create_engineimport pandas as pd<br />auth = Blueprint('auth', __name__)<br />@auth.route('/login', methods=['GET', 'POST'])def login(): if request.method == 'POST': email = request.form.get('email') password = request.form.get('password')<br /> user = User.query.filter_by(email=email).first() if user: if check_password_hash(user.password, password): flash('Logged in successfully!', category='success') login_user(user, remember=True) return redirect(url_for('views.home')) else: flash('Incorrect password, try again.', category='error') else: flash('Email does not exist.', category='error')<br /> return render_template("login.html", user=current_user)<br /><br />@auth.route('/logout')@login_requireddef logout(): logout_user() return redirect(url_for('auth.login'))<br /><br />@auth.route('/sign-up', methods=['GET', 'POST'])def sign_up(): if request.method == 'POST': email = request.form.get('email') first_name = request.form.get('firstName') password1 = request.form.get('password1') password2 = request.form.get('password2')<br /> user = User.query.filter_by(email=email).first() if user: flash('Email already exists.', category='error') elif len(email) < 4: flash('Email must be greater than 3 characters.', category='error') elif len(first_name) < 2: flash('First name must be greater than 1 character.', category='error') elif password1 != password2: flash('Passwords don\'t match.', category='error') elif len(password1) < 7: flash('Password must be at least 7 characters.', category='error') else: new_user = User(email=email, first_name=first_name, password=generate_password_hash( password1, method='sha256')) db.session.add(new_user) db.session.commit() login_user(new_user, remember=True) flash('Account created!', category='success') return redirect(url_for('views.home'))<br /> return render_template("sign_up.html", user=current_user)<br />

　　关于用户登录和注册的更多信息，可以参考官方文档：

　　02

　　—

　　搭建网页前端

　　一、创建前端界面

　　在完成网页的后端逻辑后，需要搭建前端，包括创建登录界面、注册界面、以及主页等。html的很多格式可以通过「extend」来继承，例如编写完「base.html」后，「login.html」，「sign_up.html」都可以继承「base.html」中的格式，以「login.html为例」：

　　{% extends "base.html" %} {% block title %}Login{% endblock %} {% block content %} Login Email Address Password Login{% endblock %}

　　值得注意的是，{% block content %}和{% endblock %}之间的代码将覆盖「base.html」中的对应位置，这有些类似于Java中的class的继承，即子类继承父类的大部分属性之外，还进行了扩充。

　　二、前后端的交互

　　Jinja是一个完成此类任务非常好用的工具，它是一种模块语言，主要用来在html文档中编写一部分Python代码。例如，通过在「auth.py」中render_templates时输入其他参数（time和val）：

　　render_template("price.html", user=current_user, time=btc_time, val=btc_val)

　　「price.html」文件中，可以通过{{ val | tojson }}的方式使用变量的值。

　　总结

　　综上，本文简单介绍了网站搭建的主要步骤，如果对网站搭建有任何疑问，欢迎添加微信交流：othersidemeta，可以将网站代码发送给你。

　　相关文章：