效果展示
1 from flask import Flask, render_template 2 from flask_mongoengine import MongoEngine 3 from datetime import datetime 4 5 app = Flask(__name__) 6 app.config['MONGODB_SETTINGS'] = { 7 'db': 'flask_news', 8 'host': '127.0.0.1', 9 'port': 27017 10 } 11 db = MongoEngine(app) 12 13 NEWS_TYPES = ( 14 ('推荐', "tuijian"), 15 ('百家', "baijia"), 16 ('本地', "bendi"), 17 ('体育', "tiyu") 18 ) 19 20 21 class News(db.Document): 22 """新闻模型""" 23 title = db.StringField(required=True, max_length=200) 24 img_url = db.StringField(max_length=50) 25 content = db.StringField(required=True, max_length=2000) 26 news_type = db.StringField(required=True, choisce=NEWS_TYPES) 27 is_valid = db.BooleanField(default=True) # 默认为True 28 created_at = db.DateTimeField(default=datetime.now()) 29 updated_at = db.DateTimeField(default=datetime.now()) 30 31 db.meta = { 32 'collection': 'news', 33 'ordering': ['-created_at'] # 最新创建的数据放在最前面 34 } 35 36 37 @app.route('/') 38 def index(): 39 news_list = News.objects.filter(is_valid=True) 40 return render_template('index.html', news_list=news_list) 41 42 43 @app.route('/cat/<name>/') 44 def cat(name): 45 """新闻的类别""" 46 news_list = News.objects.filter(news_type=name) 47 # 查询类别为 name 的新闻数据 48 return render_template('cat.html', name=name, news_list=news_list) 49 50 51 @app.route('/detail/<pk>') 52 def detail(pk): 53 """新闻详情信息""" 54 # news_obj = News.objects.filter(pk=pk).first() 55 # if not news_obj: 56 # abort(404) 57 news_obj = News.objects.filter(pk=pk).first_or_404() 58 return render_template('detail.html', news_obj=news_obj) 59 60 61 if __name__ == '__main__': 62 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 <title>新闻类别页</title> 3 {% block head %} 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
1 {% extends 'home_base.html' %} 2 {% block head %} 3 <title>新闻详情页</title> 4 {% endblock %} 5 {% block content %} 6 <h3>{{ news_obj.title }}</h3> 7 <p>{{ news_obj.content }}</p> 8 <small>{{ news_obj.created_at }}</small> 9 {% endblock %}
index.css
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 header{ 6 background-color: brown; 7 width: 100%; 8 } 9 ul{ 10 margin: auto; 11 list-style-type: none; 12 padding-top: 6px; 13 padding-bottom: 6px; 14 height: 25px; 15 position: relative; 16 } 17 li{ 18 width: 100%; 19 padding-left: 20px; 20 display: inline; 21 } 22 a:link,a:visited{ 23 font-weight: bold; 24 color: burlywood; 25 text-align: center; 26 text-decoration: none; 27 } 28 a:hover,a:active{ 29 color: coral; 30 } 31 .right-content p a{ 32 color: black; 33 }