前端—flask框架实现前端与数据库对接

 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 %}

前端—flask框架实现前端与数据库对接

猜你喜欢