python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

时间：2023-01-05 15:48:59

python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

参考文档
http://flask.pocoo.org/docs/0.11/
http://flask-sqlalchemy.pocoo.org/2.1/
中文版
http://docs.jinkan.org/docs/flask/

涉及分页部分知识，请参考：
http://www.cnblogs.com/reblue520/p/8483557.html

安装flask和Flask-SQLAlchemy
C:\Users\ajie>pip install flask
C:\Users\ajie>pip install Flask-SQLAlchemy

数据表和数据

CREATE TABLE `news` (

  `id` int() NOT NULL AUTO_INCREMENT,

  `title` varchar() NOT NULL,

  `content` varchar() NOT NULL,

  `types` varchar() NOT NULL,

  `image` varchar() DEFAULT NULL,

  `author` varchar() DEFAULT NULL,

  `view_count` int() DEFAULT '',

  `created_at` datetime DEFAULT NULL,

  `is_valid` smallint() DEFAULT '',

  PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT= DEFAULT CHARSET=utf8;

INSERT INTO `news` VALUES ('', '朝鲜特种部队视频公布 展示士兵身体素质与意志', '新闻内容', '推荐', '/static/img/news/01.jpg', null, '', '2018-02-28 20:34:20', '');

INSERT INTO `news` VALUES ('', '男子长得像\"祁同伟\"挨打 打人者:为何加害检察官', '新闻内容', '百家', '/static/img/news/02.jpg', null, '', '2018-03-01 20:34:29', '');

INSERT INTO `news` VALUES ('', '导弹来袭怎么办？日本*呼吁国民堕入地下通道', '新闻内容', '本地', '/static/img/news/03.png', null, '', null, '');

INSERT INTO `news` VALUES ('', '美监:朝在建能发射3发以上导弹的3000吨级新潜艇', '新闻内容', '推荐', '/static/img/news/04.png', null, '', null, '');

INSERT INTO `news` VALUES ('', '证监会：前发审委员冯小树违法买卖股票被罚4.99亿', '新闻内容', '百家', '/static/img/news/08.png', null, '', null, '');

INSERT INTO `news` VALUES ('', '外交部回应安倍参拜靖国神社:同军国主义划清界限', '新闻内容', '推荐', '/static/img/news/new1.jpg', null, '', null, '');

INSERT INTO `news` VALUES ('', '\"萨德\"供地违法？韩民众联名起诉要求撤回供地', '新闻内容', '百家', '/static/img/news/new2.jpg', null, '', null, '');

INSERT INTO `news` VALUES ('', '标题1', '新闻内容1', '推荐', '/static/img/news/01.png', null, '', null, '');

INSERT INTO `news` VALUES ('', '标题20180202', '内容20180202', '百家', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题0', '内容0', '百家0', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题1', '内容1', '百家1', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题2', '内容2', '百家2', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题3', '内容3', '百家3', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题4', '内容4', '百家4', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题5', '内容5', '百家5', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题6', '内容6', '百家6', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题7', '内容7', '百家7', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题8', '内容8', '百家8', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题9', '内容9', '百家9', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题0', '内容0', '百家0', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题1', '内容1', '百家1', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题2', '内容2', '百家2', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题3', '内容3', '百家3', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题4', '内容4', '百家4', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题5', '内容5', '百家5', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题6', '内容6', '百家6', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题7', '内容7', '百家7', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题8', '内容8', '百家8', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题9', '内容9', '百家9', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题0', '内容0', '百家0', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题1', '内容1', '百家1', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题2', '内容2', '百家2', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题3', '内容3', '百家3', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题4', '内容4', '百家4', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题5', '内容5', '百家5', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题6', '内容6', '百家6', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题7', '内容7', '百家7', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题8', '内容8', '百家8', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题9', '内容9', '百家9', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题0', '内容0', '百家0', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题1', '内容1', '百家1', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题2', '内容2', '百家2', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题3', '内容3', '百家3', null, null, null, null, null);

INSERT INTO `news` VALUES ('', '标题4', '内容4', '百家4', null, null, null, null, '');

INSERT INTO `news` VALUES ('', '标题5', '内容5', '百家5', null, null, null, null, '');

INSERT INTO `news` VALUES ('', '标题6', '内容6', '百家6', null, null, null, null, '');

INSERT INTO `news` VALUES ('', '标题7', '内容7', '百家7', null, null, null, null, '');

INSERT INTO `news` VALUES ('', '标题8', '内容8', '百家8', null, null, null, null, '');

1.flask一个小的测试程序

#coding:utf-8

from flask import Flask

app = Flask(__name__)

@app.route('/')

def hello_world():

    return 'hello flask'

if __name__ == "__main__":

    app.run(debug = True)

启动程序

D:\python\python_db>python python_mysql_orm02_flask01.py
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger pin code: 127-366-472
127.0.0.1 - - [05/Feb/2018 19:40:36] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [05/Feb/2018 19:40:36] "GET /favicon.ico HTTP/1.1" 404 -

2.简单的模板渲染处理

from flask import Flask

from flask_sqlalchemy import SQLAlchemy

from flask import render_template

app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:@localhost:3306/news_test?charset=utf8'

db = SQLAlchemy(app)

class News(db.Model):

    __tablename__ = 'news'

    id = db.Column(db.Integer, primary_key = True)

    title = db.Column(db.String(200), nullable = False)

    content = db.Column(db.String(2000), nullable = False)

    types = db.Column(db.String(10), nullable = False)

    image = db.Column(db.String(1300), )

    author = db.Column(db.String(20), )

    view_count = db.Column(db.Integer)

    created_at = db.Column(db.DateTime)

    is_valid = db.Column(db.Boolean)

@app.route('/hello')

def hello_world():

    return 'hello flask'

'''

创建news_test数据库

建表

cmd下输入Python，导入包，使用命令生成表，并进行简单的操作

>>> from flask_news import db

>>> from flask_news import News

>>> news01 = News(title= 'title01',content='content01',types='baijia')

>>> db.session.add(news01)

>>> db.session.commit()

'''

@app.route('/')

def index():

    '''新闻首页'''

    return render_template('index.html')

@app.route('/cat/<name>/')

def cat(name):

    '''新闻的类别'''

    # 查询

    return render_template('cat.html', name = name)

@app.route('/detail/<int:pk>/')

def detail(pk):

    '''新闻详情信息'''

    return render_template('detail.html', pk = pk)

if __name__ == "__main__":

    app.run(debug = True)

3.示例：新闻相关的页面程序

目录结构

├── flask_news.py

├── static

│   ├── bootstrap-3.3.-dist

│   │   ├── css

│   │   ├── fonts

│   │   └── js

│   ├── bootstrap-3.3.-dist.zip

│   ├── datatables.min.css

│   ├── datatables.min.js

│   ├── img

│   │   └── news

│   ├── index.css

│   ├── jquery-3.3..min.js

│   └── main.css

└── templates

    ├── cat.html

    ├── detail.html

    └── index.html

①服务端程序flask_news.py

from flask import Flask

from flask_sqlalchemy import SQLAlchemy

from flask import render_template, redirect

app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:@localhost:3306/news?charset=utf8'

db = SQLAlchemy(app)

class News(db.Model):

    __tablename__ = 'news'

    id = db.Column(db.Integer, primary_key = True)

    title = db.Column(db.String(200), nullable = False)

    content = db.Column(db.String(2000), nullable = False)

    types = db.Column(db.String(10), nullable = False)

    image = db.Column(db.String(1300), )

    author = db.Column(db.String(20), )

    view_count = db.Column(db.Integer)

    created_at = db.Column(db.DateTime)

    is_valid = db.Column(db.Boolean)

@app.route('/hello')

def hello_world():

    return 'hello flask'

'''

创建news_test数据库

建表

cmd下输入Python，导入包，使用命令生成表，并进行简单的操作

>>> from flask_news import db

>>> from flask_news import News

>>> news01 = News(title= 'title01',content='content01',types='baijia')

>>> db.session.add(news01)

>>> db.session.commit()

'''

@app.route('/')

def index():

    '''新闻首页'''

    news_list = News.query.all()

    print(news_list)

    return render_template('index.html', news_list = news_list)

@app.route('/index/')

def index_html():

    '''新闻首页'''

    new_list = News.query.all()

    return redirect('/')

@app.route('/cat/<name>/')

def cat(name):

    '''新闻的类别'''

    # 查询

    news_list = News.query.filter(News.types == name)

    return render_template('cat.html', name = name, news_list = news_list)

@app.route('/detail/<int:pk>/')

def detail(pk):

    '''新闻详情信息'''

    obj = News.query.get(pk)

    return render_template('detail.html', obj = obj)

if __name__ == "__main__":

    app.run(debug = True)

②templates模板页面

a.首页index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>首页</title>

  <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-3.3.7-dist/css/bootstrap.min.css')}}">

  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css')}}">

  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='datatables.min.css')}}">

  <script type="text/javascript" src="{{ url_for('static', filename='jquery-3.3.1.min.js')}}"></script>

  <script type="text/javascript">

        $(document).ready(function() {

            $('#example').DataTable();

        } );

  </script>

</head>

<body>

<div class="container">

    <h1>新闻列表</h1>

  <nav class="navbar navbar-inverse">

      <!-- Brand and toggle get grouped for better mobile display -->

      <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">

              <span class="sr-only">Toggle navigation</span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

          </button>

          <!-- <a class="navbar-brand" href="#">首页</a> -->

      </div>

      <div id="navbar-menu" class="collapse navbar-collapse">

          <ul class="nav navbar-nav">

              <li class="active"><a href="index">首页</a></li>

              <li><a href="{{url_for('cat', name='推荐')}}">推荐</a></li>

              <li><a href="{{url_for('cat', name='百家')}}">百家</a></li>

              <li><a href="{{url_for('cat', name='推荐')}}">本地</a></li>

              <li><a href="{{url_for('cat', name='图片')}}">图片</a></li>

          </ul>

      </div>

  </nav>

<div id="content" class="row-fluid">

        <div class="col-md-12">

        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

        <thead>

            <tr>

                <th>图片</th>

                <th>简介</th>

            </tr>

        </thead>

        <tfoot>

            <tr>

                <th>Name</th>

                <th>Position</th>

            </tr>

        </tfoot>

        <!-- {% for obj in news_list %}

        <div class="col-md-9">

            <div class="img-content">

              <img src="{{ obj.image }}" alt="图片">

            </div>

            <div class="right-content">

              <p>

                <a href="{{ url_for('detail', pk=obj.id) }}">{{ obj.title }}</a>

                <small>{{ obj.created_at }}</small>

              </p>

            </div>

        </div>

        {% endfor %} -->

        <tbody>

        {% for obj in news_list %}

        <tr>

              <td>

              <img width=120 height=60 src="{{ obj.image }}" alt="图片">

              </td>

              <td>

              <p>

                <a href="{{ url_for('detail', pk=obj.id) }}">{{ obj.title }}</a>

                <small>{{ obj.created_at }}</small>

              </p>

              </td>

        </tr>

        {% endfor %}

        </tbody>

        </table>

        </div>

</div>

</div>

<script type="text/javascript" src="{{ url_for('static', filename = 'datatables.min.js')}}"></script>

</body>

</html>

b.详情页detail.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>新闻详情</title>

  <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-3.3.7-dist/css/bootstrap.min.css')}}">

  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css')}}">

</head>

<body>

<div class="container">

    <h1>新闻列表</h1>

  <nav class="navbar navbar-inverse">

      <!-- Brand and toggle get grouped for better mobile display -->

      <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">

              <span class="sr-only">Toggle navigation</span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

          </button>

          <!-- <a class="navbar-brand" href="#">首页</a> -->

      </div>

      <div id="navbar-menu" class="collapse navbar-collapse">

          <ul class="nav navbar-nav">

              <li class="active"><a href="index">首页</a></li>

              <li><a href="{{url_for('cat', name='推荐')}}">推荐</a></li>

              <li><a href="{{url_for('cat', name='百家')}}">百家</a></li>

              <li><a href="{{url_for('cat', name='推荐')}}">本地</a></li>

              <li><a href="{{url_for('cat', name='图片')}}">图片</a></li>

          </ul>

      </div>

  </nav>

<div id="content" class="row-fluid">

        <div class="col-md-9">

            <h2>新闻详情，来自新闻id> {{obj.id}}</h2>

        </div>

         <div class="col-md-12">

        <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

        <thead>

            <tr>

                <th>具体新闻内容</th>

            </tr>

        </thead>

        <tbody>

        <tr>

              <td>

              <img width=600 height=500 src="{{ obj.image }}" alt="图片">

              </td>

              <td>

        </tr>

        <tr>

              <td>

              <p>

                {{ obj.title }}

                <small>{{ obj.created_at }}</small>

              </p>

              </td>

        </tr>

        </tbody>

        </table>

        </div>

</div>

</div>

</body>

</html>

c.新闻类别cat.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>新闻类别</title>

</head>

<body>

    新闻类别> {{name}}

</body>

</html>

static/main.css程序

.container {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;

}

@media (min-width: 768px) {

  .container {

    width: 750px;

  }

}

@media (min-width: 992px) {

  .container {

    width: 970px;

  }

}

@media (min-width: 1200px) {

  .container {

    width: 1170px;

  }

}

.container-fluid {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;

}

效果展示

python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示

python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示的更多相关文章

  1. python操作三大主流数据库&lpar;14&rpar;python操作redis之新闻项目实战②新闻数据的展示及修改、删除操作

    python操作三大主流数据库(14)python操作redis之新闻项目实战②新闻数据的展示及修改.删除操作 项目目录: ├── flask_redis_news.py ├── forms.py ├ ...

  2. python操作三大主流数据库&lpar;12&rpar;python操作redis的api框架redis-py简单使用

    python操作三大主流数据库(12)python操作redis的api框架redis-py简单使用 redispy安装安装及简单使用:https://github.com/andymccurdy/r ...

  3. Python操作三大主流数据库☝☝☝

    Python操作三大主流数据库☝☝☝ Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数 ...

  4. Python操作三大主流数据库✍✍✍

    Python操作三大主流数据库 Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数据库, ...

  5. python操作三大主流数据库&lpar;10&rpar;python操作mongodb数据库④mongodb新闻项目实战

    python操作mongodb数据库④mongodb新闻项目实战 参考文档:http://flask-mongoengine.readthedocs.io/en/latest/ 目录: [root@n ...

  6. python操作三大主流数据库&lpar;8&rpar;python操作mongodb数据库②python使用pymongo操作mongodb的增删改查

    python操作mongodb数据库②python使用pymongo操作mongodb的增删改查 文档http://api.mongodb.com/python/current/api/index.h ...

  7. python操作三大主流数据库&lpar;6&rpar;python操作mysql⑥新闻管理后台功能的完善&lpar;增、ajax异步删除新闻、改、查&rpar;

    python操作mysql⑥新闻管理后台功能的完善(增.删.改.查)安装表单验证D:\python\python_mysql_redis_mongodb\version02>pip instal ...

  8. python操作三大主流数据库&lpar;3&rpar;python操作mysql③python操作mysql的orm工具sqlaichemy安装配置和使用

    python操作mysql③python操作mysql的orm工具sqlaichemy安装配置和使用 手册地址: http://docs.sqlalchemy.org/en/rel_1_1/orm/i ...

  9. python操作三大主流数据库&lpar;2&rpar;python操作mysql②python对mysql进行简单的增删改查

    python操作mysql②python对mysql进行简单的增删改查 1.设计mysql的数据库和表 id:新闻的唯一标示 title:新闻的标题 content:新闻的内容 created_at: ...

随机推荐

  1. CF100965C题解&period;&period;

    求方程 \[ \begin{array}\\ \sum_{i=1}^n x_i & \equiv & a_1 \pmod{p} \\ \sum_{i=1}^n x_i^2 & ...

  2. &lbrack;转&rsqb;SpringMVC日期类型转换问题三大处理方法归纳

    http://blog.csdn.net/chenleixing/article/details/45190371 前言 我们在SpringMVC开发中,可能遇到比较多的问题就是前台与后台实体类之间日 ...

  3. java 表格项的删除、编辑、增加 修改版

    修改之后的java 代码: package com.platformda.optimize; import java.awt.BorderLayout; import java.awt.Button; ...

  4. &lbrack;LeetCode&rsqb; Word Break II 解题思路

    Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...

  5. 一周学会Mootools 1&period;4中文教程&colon;&lpar;5&rpar;Ajax

    ajax在我们前台的开发中是非常重要的,所以我们单独拿出一节课来讲述,首先我们看一下mootools的ajax构成 语法: var myRequest=new Request([参数]); 参数: u ...

  6. Eclipse中DTD验证导致无法进行代码提示的问题&lpar;转&rpar;

    eclipse的xml插件进行dtd验证的时候由于找不到dtd或请求主机相应超时,会出现黄色的警告 The file cannot be validated as the host "www ...

  7. nginx&plus;apache&plus;mysql&plus;php&plus;memcache&plus;squid搭建集群web环境

    服务器的大用户量的承载方案 一.前言 二.编译安装 三. 安装MySQL.memcache 四. 安装Apache.PHP.eAccelerator.php-memcache 五. 安装Squid 六 ...

  8. 《struts2》：指定多个配置文件和默认Action

    转载:http://m.blog.csdn.net/article/details?id=51212968

  9. 微信小程序支付签名老是失败，在官网的校验签名工具校验成功，老是返回签名失败

    在网上也百度了各种签名不正确的解决方法,都没有问题,但签名就是不成功,实在找不出问题了,我就重置了一下api秘钥,结果成功了…… 不知道什么原因第一次填写的api秘钥也是我重置的,填写的也没有问题,但 ...

  10. Loadrunner11代理录制&amp&semi;各个常见功能介绍

    1.代理录制: Lr代理工具:C:\Program Files (x86)\HP\LoadRunner\bin\wplus_init_wsock.exe 1) 设置代理 配置代理信息: 2)设置浏览器 ...

相关文章