zoukankan      html  css  js  c++  java
  • 前端—flask框架实现前端与MySQL数据库对接

    效果展示:

     1 from flask import Flask, render_template
     2 from flask_sqlalchemy import SQLAlchemy
     3 import datetime
     4 
     5 app = Flask(__name__)
     6 app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://username:passwd@host:port/NWES?charset=utf8'
     7 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
     8 db = SQLAlchemy(app)
     9 
    10 
    11 class News(db.Model):
    12     __tablename__ = 'news'
    13     id = db.Column(db.Integer, primary_key=True)
    14     title = db.Column(db.String(200), nullable=False)
    15     content = db.Column(db.String(20000), nullable=False)
    16     created_at = db.Column(db.DateTime)
    17     types = db.Column(db.String(10), nullable=False)
    18     author = db.Column(db.String(20))
    19     view_count = db.Column(db.Integer)
    20     is_valid = db.Column(db.Boolean)
    21 
    22     def __init__(self, title, content, types, created_at, author='', is_valid=1):
    23         self.title = title
    24         self.content = content
    25         self.types = types
    26         self.created_at = created_at
    27         self.author = author
    28         self.is_valid = is_valid
    29 
    30     def __repr__(self):
    31         return '%s, %s, %s' % (self.id, self.title, self.content)
    32 
    33 # 建表语句
    34 db.create_all()
    35 
    36 # 添加一条数据
    37 obj = News(
    38     title='新闻标题',
    39     content='新闻内容',
    40     types='百家',
    41     created_at=datetime.datetime.now(),
    42 )
    43 db.session.add(obj)
    44 db.session.commit()
    45 
    46 # 查询数据
    47 text = News.query.all()
    48 print(text)
    49 admin = News.query.filter_by(types='百家').first()
    50 print(admin)
    51 
    52 # 删除数据
    53 text = News.query.filter_by(is_valid=1).first()
    54 db.session.delete(text)
    55 db.session.commit()
    56 
    57 # 修改数据
    58 text = News.query.filter_by(types='百家').first()
    59 text.types = '体育'
    60 db.session.commit()
    61 
    62 
    63 @app.route('/')
    64 def index():
    65     """新闻的首页"""
    66     news_list = News.query.all()
    67     return render_template('index.html', news_list=news_list)
    68 
    69 
    70 @app.route('/cat/<name>/')
    71 def cat(name):
    72     """新闻的类别"""
    73     news_list = News.query.filter(News.types == name)
    74     # 查询类别为 name 的新闻数据
    75     return render_template('cat.html', name=name, news_list=news_list)
    76 
    77 
    78 @app.route('/detail/<int:pk>')
    79 def detail(pk):
    80     """新闻详情信息"""
    81     news_obj = News.query.get(pk)
    82     return render_template('detail.html', news_obj=news_obj)
    83 
    84 
    85 if __name__ == '__main__':
    86     app.run(debug=True)

    home_base.html

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     7     <link rel="stylesheet" href="../static/css/index.css" type="text/css">
     8     {% block head %}<title>首页</title>{% endblock %}
     9 </head>
    10 <body>
    11 <!--页面头部-->
    12 <header>
    13     <nav>
    14         <ul>
    15             <li><a href="{{url_for('index') }}">首页</a></li>
    16             <li><a href="{{url_for('cat', name='推荐') }}">推荐</a></li>
    17             <li><a href="{{url_for('cat', name='百家') }}">百家</a></li>
    18             <li><a href="{{url_for('cat', name='本地') }}">本地</a></li>
    19             <li><a href="{{url_for('cat', name='体育') }}">体育</a></li>
    20         </ul>
    21     </nav>
    22 </header>
    23 <!--页面头部-->
    24 <article>
    25     {% block content %}
    26     <!--内容区域-->
    27     {% endblock %}
    28 </article>
    29 <!--    新闻内容部分-->
    30 {% block extrajs %}
    31 <!--    其他脚本-->
    32 {% endblock %}
    33 </body>
    34 </html>

    index.html

     1 {% extends 'home_base.html' %}
     2 {% block content %}
     3 <link href="../static/css/index.css" rel="stylesheet" type="text/css">
     4     {% for obj in news_list %}
     5     <div class="list-news">
     6         <div class="img-content">
     7             <img src="{{ obj.img_url }}" alt="图片">
     8         </div>
     9         <div class="right-content">
    10             <p><a href="{{ url_for('detail', pk=obj.id) }}">{{ obj.title }}</a></p>
    11             <small>{{ obj.created_at }}</small>
    12         </div>
    13     </div>
    14     {% endfor %}
    15 {% endblock %}

    cat.html

     1 {% extends 'home_base.html' %}
     2 {% block head %}
     3 <title>新闻类别页</title>
     4 <h3>新闻类别》{{ name }}</h3>
     5     {% for obj in news_list %}
     6     <div class="list-news">
     7         <div class="img-content"><img src="{{ obj.img_url }}" alt="图片">
     8         </div>
     9         <div class="right-content">
    10             <h3><a href="{{ url_for('detail', pk=obj.id) }}">{{ obj.title }}
    11             </a></h3>
    12             <small>{{ obj.created_at }}</small>
    13         </div>
    14     </div>
    15     {% endfor %}
    16 {% endblock %}

    detail.html

    {% extends 'home_base.html' %}
    {% block head %}
    <title>新闻详情页</title>
    {% endblock %}
    {% block content %}
    <h3>{{ news_obj.title }}</h3>
    <p>{{ news_obj.content }}</p>
    <small>{{ news_obj.created_at }}</small>
    {% endblock %}
  • 相关阅读:
    7.1 异常处理结构
    第 7 章 异常处理结构、代码测试与调试
    6.4.2 案例精选
    6.4.1 标准库 os、os.path 与 shutil 简介
    设计模式----装饰模式
    设计模式---单例模式
    设计模式--工厂方法模式
    设计模式-简单工厂模式
    设计模式基础知识
    更改Mysql数据库中的数据出现乱码问题
  • 原文地址:https://www.cnblogs.com/zzmx0/p/12532285.html
Copyright © 2011-2022 走看看