本项目前端采用vue-cli的脚手架，后端采用Flask的Web框架。项目通过完成用户管理、权限管理、商品管理、订单管理、统计管理等功能，综合了前后端的知识，希望使大家都能受益。
1、使用到的技术如下所示。
前端技术：
- Vue 前端框架
- Element-UI UI框架
- Axios 发送请求
- Echarts 绘制图表
后端技术：
- Python主流语言
- flask web框架
- MySQL存储主要数据
- Redis存储缓存数据
2、项目需求
3、vscode创建flask基本框架。
vscode可以网上下载安装，也可以可以关注公众号：呆呆的clearlie，回复：vscode即可下载。
打开VSCode，创建一个新的文件夹，命名为flask_shop
在python控制台中创建虚拟环境：mkvirtualenv shop_env。将环境切换为虚拟环境，在这里可能会出现相关bug，可参考：https://www.cnblogs.com/clearlie/p/13186447.html
切换到虚拟环境后，在控制台输入：pip install flask 安装flask框架。
在flask_shop文件夹下面创建一个manager.py文件，在文件中输入以下代码。
from flask import Flask
app = Flask(__name__)
@app.route("/")
def index():
return "hello world"
if __name__ == "__main__":
app.run()
运行该文件夹，将网址输入到浏览器中，看到"hello world"输出的结果，说明一切准备就绪，可以进行接下来的操作。
4、数据库参数的配置。
我们配置的是MYSQL数据库，其连接方式如下：
from flask import Flask
import os app = Flask(__name__) class Config:
# 配置MySQL参数
MYSQL_DIALECT = 'mysql'
MYSQL_DIRVER = 'pysql'
MYSQL_NAME = 'root'
MYSQL_PWD = ""
MYSQL_HOST = 'localhost'
MYSQL_PORT = ''
MYSQL_DB = 'shop_env'
MYSQL_CHARSET = 'utf8mb4' SQLALCHEMY_DATABASE_URI = f'{MYSQL_DIALECT}+{MYSQL_DIRVER}://{MYSQL_NAME}:{MYSQL_PWD}@{MYSQL_HOST}:{MYSQL_PORT}/{MYSQL_DB}?charset={MYSQL_CHARSET}'
SQLALCHEMY_TRACK_MODIFICATIONS = True # 应用于加密
SECRET_KEY = os.urandom(16)
DEBUG = True app.config_from_object(Config) @app.route("/") def index():
return "hello world" if __name__ == "__main__":
app.run()
5、安装基本的flask插件。
在控制台输入以下命令安装，同时初始化数据库。
pip install flask_sqlalchemy
pip install flask_script
pip isntall flask_migrate
在manager.py文件中导入相关的插件函数，并进行初始化，新增代码如下:
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate, MigrateCommand
from flask_script import Manager app = Flask(__name__) class Config:
...
app.config.from_object(Config) db = SQLAlchemy(app) manager = Manager(app)
Migrate(app, db)
manager.add_command('db', MigrateCommand)
...
6、拆分项目结构
接下来我们将manager.py里的内容进行拆分，拆分代码的目的在于是不同的代码位于不同的文件里，各司其职。
在FLASK_SHOP新建一个flask_shop的python包和config的python文件，在flask_shop下再建一个user的python包和视图view.py文件，python包即含一个__init__.py初始化文件的文件夹。其相关文件如下：
把之前的数据库配置代码移到配置文件config.py里，如下所示：
import os class Config:
# 配置MySQL参数
MYSQL_DIALECT = 'mysql'
MYSQL_DIRVER = 'pysql'
MYSQL_NAME = 'root'
MYSQL_PWD = ""
MYSQL_HOST = 'localhost'
MYSQL_PORT = ''
MYSQL_DB = 'shop_env'
MYSQL_CHARSET = 'utf8mb4' SQLALCHEMY_DATABASE_URI = f'{MYSQL_DIALECT}+{MYSQL_DIRVER}://{MYSQL_NAME}:{MYSQL_PWD}@{MYSQL_HOST}:{MYSQL_PORT}/{MYSQL_DB}?charset={MYSQL_CHARSET}'
SQLALCHEMY_TRACK_MODIFICATIONS = True # 应用于加密
SECRET_KEY = os.urandom(16) # 定义一个开发模式的类
class DevelopmentConfig(Config):
DEBUG = True class ProductionConfig(Config):
pass config_map = {
"develop": DevelopmentConfig,
"product": ProductionConfig,
}
在配置文件中我们新增了两个类，一个开发模式，一个生产模式，同时使用config_map字典进行存储。
manager.py的文件主要用于撰写控制操作程序，代码更新如下：
from flask_shop import create_app
from flask_migrate import Migrate, MigrateCommand
from flask_script import Manager
from flask_shop import db app = create_app("develop") manager = Manager(app)
Migrate(app, db)
manager.add_command('db', MigrateCommand) if __name__ == "__main__":
app.run()
flask_shop初始化文件下的代码如下：
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from config import config_map db = SQLAlchemy() def create_app(config_name):
app = Flask(__name__)
obj = config_map.get(config_name)
app.config.from_object(obj)
db.init_app(app) # 引入注册蓝图
from flask_shop.user import user
app.register_blueprint(user) return app if __name__ == "__main__":
app.run()
user的初始化文件如下：
from flask import Blueprint
user = Blueprint('user', __name__, url_prefix='/user')
from . import view
视图函数view.py的代码如下：
from flask_shop.user import user
@user.route("/")
def user():
return "hello, boy!!!"
运行manager.py文件，在浏览器输入http://127.0.0.1:5000/user/，可以看到以下结果：
现在flask框架的基础配置我们已经完成了，接下来就是相关的功能开发。