Flask项目实战-积分商城管理端笔记

最新推荐文章于 2024-04-20 13:12:46 发布

weixin_45318105

最新推荐文章于 2024-04-20 13:12:46 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45318105/article/details/106200016

版权

Flask项目实战-积分商城管理端

搭建项目

在这里插入图片描述
新建一个名为flask_mall的项目

进行数据库配置,引入SQLAlchemy
把Flask实列(app)传给SQLAlchemy得到数据库实例
指定数据库连接配置

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:@localhost/flask_mall'
db = SQLAlchemy(app)

@app.route('/')
def hello_world():
	return 'Hello World!'

定义模型app.py

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:@localhost/flask_mall'
db = SQLAlchemy(app)

class Tag(db.Model):
	""" 商品标签 """
    __tablename__ = 'product_tag'
    id = db.Column(db.Integer,primary_key=True) # 主键
    # UID
    uid = db.Column(db.String(128), nullable=False, default=uuid.uuid4, unique=True)
    # 标签名称
    name = db.Column(db.String(128),nullable=False)
    # 标签编码
    code = db.Column(db.String(32))
    # 标签的描述
    desc=db.Column(db.String(256))
    # 逻辑删除
    is_valid = db.Column(db.Boolean,default=True)
    # 排序
    reorder = db.Column(db.Integer,default=0)
    # 创建时间
    created_at = db.Column(db.DateTime)
    # 最后修改的时间
    updated_at = db.Column(db.DateTime)

class Classify(db.Model):
    """ 商品分类 """   
    __tablename__ = 'product_classify'
    id = db.Column(db.Integer,primary_key=True) # 主键
    # UID
    uid = db.Column(db.String(128), nullable=False, default=uuid.uuid4, unique=True)
   	# 关联父级的ID
    parent_id = db.Column(db.Integer, db.ForeignKey('product_classify.id'))
    # 图片
    img = db.Column(db.String(256))
    # 分类名称
    name = db.Column(db.String(128), nullable=False)
    # 分类编码
    code = db.Column(db.String(32))
    # 分类的描述
    desc = db.Column(db.String(256))
    # 逻辑删除
    is_valid = db.Column(db.Boolean, default=True)
    # 排序
    reorder = db.Column(db.Integer, default=0)
    # 创建时间
    created_at = db.Column(db.DateTime)
    # 最后修改的时间
    updated_at = db.Column(db.DateTime) 

class Product(db.Model): 
    """ 商品类 """  
    __tablename_ = 'product' 
    id = db.Column(db.Integer,primary_key=True) # 主键
	# UID
    uid = db.Column(db.String(128), nullable=False, default=uuid.uuid4, unique=True)
    # 商品标题
    name = db.Column(db.String(128), nullable=False)
    # 商品描述
    content = db.Column(db.Text, nullable=False)
    # 商品推荐语
    desc = db.Column(db.String(256))
    # 类型
    types = db.Column(db.String(10),nullable=False)
    # 价格
    price = db.Column(db.Integer, nullable=False)
    # 原价￥
    origin_price = db.Column(db.Float)
    # 主图
    img = db.Column(db.String(256),nullable=True)
    # 渠道
    channel = db.Column(db.String(32))
    # 链接
    buy_link = db.Column(db.String(256))
    # 商品状态
    status = db.Column(db.String(10),nullable=False)
    # 库存
    sku_count = db.Column(db.Integer,default=0)
    # 剩余库存
    remain_count = db.Column(db.Integer,default=0)
    # 浏览次数
    view_count = db.Column(db.Integer,default=0)
    # 评分
    score = db.Column(db.Float,default=10)

    # 逻辑删除
    is_valid = db.Column(db.Boolean, default=True)
    # 排序
    reorder = db.Column(db.Integer, default=0)
    # 创建时间
    created_at = db.Column(db.DateTime)
    # 最后修改的时间
    updated_at = db.Column(db.DateTime)

class ProductClasses(db.Model):
    """商品与分类的关系"""
    __tablename__ = 'product_classify_rel'
    id = db.Column(db.Integer,primary_key=True) # 主键
    product_id = db.Column(db.Integer, db.ForeignKey('product.id'))
    cls_id = db.Column(db.Integer,db.ForeignKey('product_classify.id'))

class ProductTags(db.Model):
    """商品与标签的关系"""
    __tablename__ = 'product_tag_rel'
    id = db.Column(db.Integer, primary_key=True)  # 主键
    product_id = db.Column(db.Integer, db.ForeignKey('product.id'))
    tag_id = db.Column(db.Integer, db.ForeignKey('product_tag.id'))
    
@app.route('/')
def hello_world():
	return 'Hello World!'

将模型同步到数据库
在这里插入图片描述
## 新的改变

实现商品的添加，上传图片

下载Bootstrap，并将bootstrap文件夹放入static目录下
下载jQuery1.12.4版本，将压缩包解压后的dist文件夹放入static目录并修改文件夹名称为jquery。
在这里插入图片描述
复制bootstrap基本模板

在template下新建index.html，并将基本模板的HTML代码粘贴到index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

定义路由app.py (在代码最后), 引入render_template

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:@localhost/flask_mall'
db = SQLAlchemy(app)

class Tag(db.Model):
	""" 商品标签 """
	__tablename__ = 'product_tag'
	 id = db.Column(db.Integer,primary_key=True) # 主键
	# UID
    uid = db.Column(db.String(128), nullable=False, default=uuid.uuid4, unique=True)
    # 标签名称
    name = db.Column(db.String(128),nullable=False)
    # 标签编码
    code = db.Column(db.String(32))
    # 标签的描述
    desc=db.Column(db.String(256))
    # 逻辑删除
    is_valid = db.Column(db.Boolean,default=True)
    # 排序
    reorder = db.Column(db.Integer,default=0)
    # 创建时间
    created_at = db.Column(db.DateTime)
    # 最后修改的时间
    updated_at = db.Column(db.DateTime)

class Classify(db.Model):
	""" 商品分类 """
	__tablename__ = 'product_classify'
	 id = db.Column(db.Integer,primary_key=True) # 主键
	 # UID
    uid = db.Column(db.String(128), nullable=False, default=uuid.uuid4, unique=True)
   	# 关联父级的ID
    parent_id = db.Column(db.Integer, db.ForeignKey('product_classify.id'))
    # 图片
    img = db.Column(db.String(256))
    # 分类名称
    name = db.Column(db.String(128), nullable=False)
    # 分类编码
    code = db.Column(db.String(32))
    # 分类的描述
    desc = db.Column(db.String(256))
    # 逻辑删除
    is_valid = db.Column(db.Boolean, default=True)
    # 排序
    reorder = db.Column(db.Integer, default=0)
    # 创建时间
    created_at = db.Column(db.DateTime)
    # 最后修改的时间
    updated_at = db.Column(db.DateTime) 

class Product(db.Model):
	""" 商品类 """
	__tablename_ = 'product'
	 id = db.Column(db.Integer,primary_key=True) # 主键
	# UID
    uid = db.Column(db.String(128), nullable=False, default=uuid.uuid4, unique=True)
    # 商品标题
    name = db.Column(db.String(128), nullable=False)
    # 商品描述
    content = db.Column(db.Text, nullable=False)
    # 商品推荐语
    desc = db.Column(db.String(256))
    # 类型
    types = db.Column(db.String(10),nullable=False)
    # 价格
    price = db.Column(db.Integer, nullable=False)
    # 原价￥
    origin_price = db.Column(db.Float)
    # 主图
    img = db.Column(db.String(256),nullable=True)
    # 渠道
    channel = db.Column(db.String(32))
    # 链接
    buy_link = db.Column(db.String(256))
    # 商品状态
    status = db.Column(db.String(10),nullable=False)
    # 库存
    sku_count = db.Column(db.Integer,default=0)
    # 剩余库存
    remain_count = db.Column(db.Integer,default=0)
    # 浏览次数
    view_count = db.Column(db.Integer,default=0)
    # 评分
    score = db.Column(db.Float,default=10)

    # 逻辑删除
    is_valid = db.Column(db.Boolean, default=True)
    # 排序
    reorder = db.Column(db.Integer, default=0)
    # 创建时间
    created_at = db.Column(db.DateTime)
    # 最后修改的时间
    updated_at = db.Column(db.DateTime)

class ProductClasses(db.Model):
    """商品与分类的关系"""
    __tablename__ = 'product_classify_rel'
    id = db.Column(db.Integer,primary_key=True) # 主键
    product_id = db.Column(db.Integer, db.ForeignKey('product.id'))
    cls_id = db.Column(db.Integer,db.ForeignKey('product_classify.id'))

class ProductTags(db.Model):
    """商品与标签的关系"""
    __tablename__ = 'product_tag_rel'
    id = db.Column(db.Integer, primary_key=True)  # 主键
    product_id = db.Column(db.Integer, db.ForeignKey('product.id'))
    tag_id = db.Column(db.Integer, db.ForeignKey('product_tag.id'))
    
@app.route('/')
def index():
	return render_template('mall/index.html')

将bootstrap.min.css/jquery.min.js/bootstrap.min.js的src修改为本地,
使用url_for()表示文件路径，_external=True显示绝对路径

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="{
   { url_for('static', filename='bootstrap/css/bootstrap.min.css', _external=True) }}" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="{
   { url_for('static', filename='jquery/jquery.min.js', _external=True) }}"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="{
   { url_for('static', filename='bootstrap/js/bootstrap.min.js', _external=True) }}"></script>
  </body>
</html>

选择一个bootstrap实例，引用该模板的源代码，粘贴到index.html body 标签后面
在这里插入图片描述

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <

最低0.47元/天解锁文章

weixin_45318105

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Flask项目实战-积分商城管理端笔记

Flask项目实战-积分商城管理端搭建项目新建一个名为flask_mall的项目进行数据库配置,引入SQLAlchemy把Flask实列(app)传给SQLAlchemy得到数据库实例指定数据库连接配置from flask import Flaskfrom flask_sqlalchemy import SQLAlchemyapp = Flask(__name__)app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:@localh
复制链接

扫一扫