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框架结合实现新闻展示的更多相关文章

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

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

  2. python操作三大主流数据库(12)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操作三大主流数据库(10)python操作mongodb数据库④mongodb新闻项目实战

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

  6. python操作三大主流数据库(8)python操作mongodb数据库②python使用pymongo操作mongodb的增删改查

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

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

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

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

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

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

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

随机推荐

  1. UVA - 1328 Period（循环节kmp）

    https://vjudge.net/problem/UVA-1328 题意 求每个前缀的最小循环节,要求至少循环两次且为完整的. 分析 求next数组,i-next[i]即为前缀i的最小循环节,再判 ...

  2. springboot(十六)：springboot整合shiro

    数据库有五张表(userInfo,uerrole,role,rolepermission,permission) userInfo(id,username,password) userrole(uid ...

  3. CSS样式选择

    1:#a,b{…………}一个id叫a和一个标签是b的样式 2:#a b{…………}一个id叫a下面的一个标签是b的样式3:#a:b{…………}一个id叫a的伪类b的样式4:#a.b{…………}一个id ...

  4. NSScanner类的基本用法

    NSScanner是一个类,用于在字符串中扫描指定的字符,尤其是把它们翻译/转换为数字和别的字符串.可以在创建NSScaner时指定它的string属性,然后scanner会按照你的要求从头到尾地扫描 ...

  5. linux修改主机名,关闭图形化界面,绑定ip地址,修改ip地址

    1关闭图形化界面 vi /etc/inittab 改成id:3:initdefault: 注意:不要选0或6 2.修改主机名 vi /etc/sysconfig/network 修改即可 3,修改ip ...

  6. C#水晶报表教程

    http://apps.hi.baidu.com/share/detail/24298108 水晶报表是一个功能强大的报表工具,现在已经被Microsoft Visual Studio 2005(下文 ...

  7. springboot04-mongodb

    1.搭建mongodb服务 在https://www.mongodb.com/下载mongodb安装包,解压到本地 cmd中执行命令,启动本地mongodb: cd D:\Program Files\ ...

  8. git操作远程仓库

    1.在本地电脑的上生成ssh-key ssh-keygen -t rsa -C "youremail@126.com" 可以在用户主目录里找到.ssh目录,里面有id_rsa和id ...

  9. MD5加密文件

    package cn.net.comsys.ut.util; import java.io.File;import java.io.FileInputStream;import java.io.IOE ...

  10. springboot+freemarker

    springboot添加freemarker支持 1.application.properties中添加配置 #freemarker config spring.freemarker.allow-re ...