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(11) NOT NULL AUTO_INCREMENT, `title` varchar(200) NOT NULL, `content` varchar(2000) NOT NULL, `types` varchar(10) NOT NULL, `image` varchar(300) DEFAULT NULL, `author` varchar(20) DEFAULT NULL, `view_count` int(11) DEFAULT '0', `created_at` datetime DEFAULT NULL, `is_valid` smallint(6) DEFAULT '1', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=51 DEFAULT CHARSET=utf8; INSERT INTO `news` VALUES ('1', '朝鲜特种部队视频公布 展示士兵身体素质与意志', '新闻内容', '推荐', '/static/img/news/01.jpg', null, '0', '2018-02-28 20:34:20', '1'); INSERT INTO `news` VALUES ('2', '男子长得像\"祁同伟\"挨打 打人者:为何加害检察官', '新闻内容', '百家', '/static/img/news/02.jpg', null, '0', '2018-03-01 20:34:29', '1'); INSERT INTO `news` VALUES ('3', '导弹来袭怎么办？日本政府呼吁国民堕入地下通道', '新闻内容', '本地', '/static/img/news/03.png', null, '0', null, '1'); INSERT INTO `news` VALUES ('4', '美监:朝在建能发射3发以上导弹的3000吨级新潜艇', '新闻内容', '推荐', '/static/img/news/04.png', null, '0', null, '1'); INSERT INTO `news` VALUES ('5', '证监会：前发审委员冯小树违法买卖股票被罚4.99亿', '新闻内容', '百家', '/static/img/news/08.png', null, '0', null, '1'); INSERT INTO `news` VALUES ('6', '外交部回应安倍参拜靖国神社:同军国主义划清界限', '新闻内容', '推荐', '/static/img/news/new1.jpg', null, '0', null, '1'); INSERT INTO `news` VALUES ('7', '\"萨德\"供地违法？韩民众联名起诉要求撤回供地', '新闻内容', '百家', '/static/img/news/new2.jpg', null, '0', null, '1'); INSERT INTO `news` VALUES ('10', '标题1', '新闻内容1', '推荐', '/static/img/news/01.png', null, '0', null, '1'); INSERT INTO `news` VALUES ('11', '标题20180202', '内容20180202', '百家', null, null, null, null, null); INSERT INTO `news` VALUES ('12', '标题0', '内容0', '百家0', null, null, null, null, null); INSERT INTO `news` VALUES ('13', '标题1', '内容1', '百家1', null, null, null, null, null); INSERT INTO `news` VALUES ('14', '标题2', '内容2', '百家2', null, null, null, null, null); INSERT INTO `news` VALUES ('15', '标题3', '内容3', '百家3', null, null, null, null, null); INSERT INTO `news` VALUES ('16', '标题4', '内容4', '百家4', null, null, null, null, null); INSERT INTO `news` VALUES ('17', '标题5', '内容5', '百家5', null, null, null, null, null); INSERT INTO `news` VALUES ('18', '标题6', '内容6', '百家6', null, null, null, null, null); INSERT INTO `news` VALUES ('19', '标题7', '内容7', '百家7', null, null, null, null, null); INSERT INTO `news` VALUES ('20', '标题8', '内容8', '百家8', null, null, null, null, null); INSERT INTO `news` VALUES ('21', '标题9', '内容9', '百家9', null, null, null, null, null); INSERT INTO `news` VALUES ('22', '标题0', '内容0', '百家0', null, null, null, null, null); INSERT INTO `news` VALUES ('23', '标题1', '内容1', '百家1', null, null, null, null, null); INSERT INTO `news` VALUES ('24', '标题2', '内容2', '百家2', null, null, null, null, null); INSERT INTO `news` VALUES ('25', '标题3', '内容3', '百家3', null, null, null, null, null); INSERT INTO `news` VALUES ('26', '标题4', '内容4', '百家4', null, null, null, null, null); INSERT INTO `news` VALUES ('27', '标题5', '内容5', '百家5', null, null, null, null, null); INSERT INTO `news` VALUES ('28', '标题6', '内容6', '百家6', null, null, null, null, null); INSERT INTO `news` VALUES ('29', '标题7', '内容7', '百家7', null, null, null, null, null); INSERT INTO `news` VALUES ('30', '标题8', '内容8', '百家8', null, null, null, null, null); INSERT INTO `news` VALUES ('31', '标题9', '内容9', '百家9', null, null, null, null, null); INSERT INTO `news` VALUES ('32', '标题0', '内容0', '百家0', null, null, null, null, null); INSERT INTO `news` VALUES ('33', '标题1', '内容1', '百家1', null, null, null, null, null); INSERT INTO `news` VALUES ('34', '标题2', '内容2', '百家2', null, null, null, null, null); INSERT INTO `news` VALUES ('35', '标题3', '内容3', '百家3', null, null, null, null, null); INSERT INTO `news` VALUES ('36', '标题4', '内容4', '百家4', null, null, null, null, null); INSERT INTO `news` VALUES ('37', '标题5', '内容5', '百家5', null, null, null, null, null); INSERT INTO `news` VALUES ('38', '标题6', '内容6', '百家6', null, null, null, null, null); INSERT INTO `news` VALUES ('39', '标题7', '内容7', '百家7', null, null, null, null, null); INSERT INTO `news` VALUES ('40', '标题8', '内容8', '百家8', null, null, null, null, null); INSERT INTO `news` VALUES ('41', '标题9', '内容9', '百家9', null, null, null, null, null); INSERT INTO `news` VALUES ('42', '标题0', '内容0', '百家0', null, null, null, null, null); INSERT INTO `news` VALUES ('43', '标题1', '内容1', '百家1', null, null, null, null, null); INSERT INTO `news` VALUES ('44', '标题2', '内容2', '百家2', null, null, null, null, null); INSERT INTO `news` VALUES ('45', '标题3', '内容3', '百家3', null, null, null, null, null); INSERT INTO `news` VALUES ('46', '标题4', '内容4', '百家4', null, null, null, null, '1'); INSERT INTO `news` VALUES ('47', '标题5', '内容5', '百家5', null, null, null, null, '1'); INSERT INTO `news` VALUES ('48', '标题6', '内容6', '百家6', null, null, null, null, '1'); INSERT INTO `news` VALUES ('49', '标题7', '内容7', '百家7', null, null, null, null, '1'); INSERT INTO `news` VALUES ('50', '标题8', '内容8', '百家8', null, null, null, null, '1');
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.7-dist │ │ ├── css │ │ ├── fonts │ │ └── js │ ├── bootstrap-3.3.7-dist.zip │ ├── datatables.min.css │ ├── datatables.min.js │ ├── img │ │ └── news │ ├── index.css │ ├── jquery-3.3.1.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;
}
效果展示
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
