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

效果展示

 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 }

 

posted @ 2020-04-02 15:53  组装梦想  阅读(723)  评论(0)  编辑  收藏  举报