Python Web框架Flask下网站开发入门实例
作者:junjie 发布时间:2023-10-01 16:31:50
一、Flask简介
Flask 是一个 Python 实现的 Web 开发微框架。官网:http://flask.pocoo.org/
二、Demo
1、代码结构
.
├── blog.py
├── static
│ ├── css
│ │ └── index.css
│ ├── images
│ │ ├── cat.jpg
│ │ └── sheying1229.jpg
│ └── js
└── templates
├── index.html
├── login.html
├── regist.html
└── upload.html
5 directories, 8 files
2、主程序blog.py
#!/usr/bin/python
#coding:utf8
from flask import Flask, render_template, url_for, request,redirect,make_response,session
import os,MySQLdb
app = Flask(__name__)
app.secret_key='afjlsjfowflajflkajfkjfkaljf'
user_list = ['jim','max','py']
imagepath = os.path.join(os.getcwd(),"static/images")
@app.route('/')
def index():
username = request.cookies.get('username')
if not username:
username = u'请先登录'
islogin = session.get('islogin')
nav_list = [u'首页',u'经济',u'文化',u'科技',u'娱乐']
blog = {'title':'welcome to my blog','content':'hello, welcome to my blog.'}
blogtag = {'javascript':10,"python":20,"shell":5}
img = url_for('static', filename="images/cat.jpg")
return render_template('index.html', nav_list=nav_list, username=username, blog = blog, blogtag = blogtag, img=img, islogin=islogin)
@app.route('/reg', methods=['GET','POST'])
def regist():
if request.method == 'POST':
username = request.form['username']
conn = MySQLdb.connect(user='root',passwd='admin',host='127.0.0.1')
conn.select_db('blog')
curr = conn.cursor()
sql = 'insert into `user` (`id`,`username`) values (%d,"%s")' % (1,username)
curr.execute(sql)
conn.commit()
curr.close()
conn.close()
return "user %s regist ok!" % request.form['username']
else:
#request.args['username']
return render_template('regist.html')
@app.route('/upload', methods=['GET','POST'])
def upload():
if request.method == 'POST':
username = request.form['username']
file = request.files['img']
filename = file.filename
file.save(os.path.join(imagepath,filename))
return "<img src='static/images/%s' alt=''/>" % filename
else:
return render_template('upload.html')
@app.route('/login/', methods=['GET','POST'])
def login():
if request.method == 'POST':
username = request.form.get('username')
if username in user_list:
response = make_response(redirect('/'))
response.set_cookie('username', value=username, max_age=300)
session['islogin'] = '1'
return response
else:
session['islogin'] = '0'
return redirect('/login/')
else:
return render_template('login.html')
if __name__ == '__main__':
app.run(debug=True,host='0.0.0.0',port=5000)
主要有首页、注册、登录、上传页面。
blog.py主要是展示了Flask中常见功能用法:路由,数据库操作,cookie,session,redirect,表单,文件上传,调试,Web服务器的IP和端口,静态文件读取等。
3、首页模板index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Flask DEMO</title>
<link rel="stylesheet" type="text/css" href="static/css/index.css"/>
</head>
<body>
<div class="header">
{%if islogin == '1' %}
<h1>Welcome ,{{username}}!</h1>
{%else%}
<h1>{{username}}!</h1>
{%endif%}
<div class="nav">
<ul>
{%for nav in nav_list%}
<li><a href="{{nav}}">{{nav}}</a></li>
{%endfor%}
</ul>
</div>
</div>
<div class="container">
<div class="item">
<h1>{{blog['title']}}</h1>
<div class="content">
<img src="/static/images/cat.jpg" alt="cat" />
<p>{{blog['content']}}</p>
<img src="{{img}}" alt="cat" />
</div>
</div>
<div class="side">
<ul>
{%for key,value in blogtag.items()%}
<li>{{key}}({{value}})</li>
{%endfor%}
</ul>
</div>
</div>
</body>
</html>
这个模板主要展示了在Flask模板中如何读取各种类型的变量。
4、登录页面login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="static/css/index.css"/>
</head>
<body>
<div class="header">
<h1>Login</h1>
</div>
<div class="container">
<div class="item">
<form action="" method="post">
<input type="text" placeholder="please input username" name="username" /><br/>
<input type="submit" value="Login"/>
</form>
</div>
</div>
</body>
</html>
结合blog.py主要展示表单如何提交取值,cookie和session应用。
5、注册页面regist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Regist</title>
<link rel="stylesheet" type="text/css" href="static/css/index.css"/>
</head>
<body>
<div class="header">
<h1>Regist</h1>
</div>
<div class="container">
<div class="item">
<form action="" method="post">
<input type="text" placeholder="please input username" name="username" /><br/>
<input type="submit" value="Regist"/>
</form>
</div>
</div>
</body>
</html>
结合blog.py主要展示了数据库操作。
6、上传页面upload.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Upload</title>
<link rel="stylesheet" type="text/css" href="static/css/index.css"/>
</head>
<body>
<div class="header">
<h1>Upload</h1>
</div>
<div class="container">
<div class="item">
<form action="" method="post" enctype="multipart/form-data">
<input type="text" name="username" /><br/>
<input type="file" name="img" /><br/>
<input type="submit" value="Upload"/>
</form>
</div>
</div>
</body>
</html>
结合blog.py主要展示了如何上传文件。
7、运行效果


猜你喜欢
- 网上我也见到一些分栏效果,也有一个jquery的插件jquery.splitter.js, 但是他们基本都没有解决一个问题:如果页面上有if
- 本文实例讲述了Python实现生成随机日期字符串的方法。分享给大家供大家参考,具体如下:生成随机的日期字符串,用于插入数据库。通过时间元组设
- 在学习python的时候,会有一些梗非常不适应,在此列举列表删除和多重循环退出的例子:列表删除里面的坑比如我们有一个列表里面有很多相同的值,
- 圆形的绘制 :OpenCV中使用circle(img,center,radius,color,thickness=None,lineType
- 问题用过 tensorflow 的人都知道, tf 可以限制程序在 GPU 中的使用效率,但 pytorch 中没有这个操作。思路于是我想到
- 数据类型是每种编程语言必备属性,只有给数据赋予明确的数据类型,计算机才能对数据进行处理运算,因此,正确使用数据类型是十分必要的,不同的语言,
- 纪念我的第一个爬虫程序,一共写了三个白天,其中有两个上午没有看,中途遇到了各种奇怪的问题,伴随着他们的解决,对于一些基本的操作也弄清楚了。果
- 1、预编译的好处大家平时都使用过JDBC中的PreparedStatement接口,它有预编译功能。什么是预编译功能呢?它有什么好处呢?当客
- 基于邮件通知的服务监控和告警系统主要功能点:配置专用日志格式记录耗时日志格式:'simple':{'format
- Jon Wiley, User Experience Designer for Google Apps, outlined some of
- 在使用爬虫爬取网络数据时,如果长时间对一个网站进行抓取时可能会遇到IP被封的情况,这种情况可以使用代理更换ip来突破服务器封IP的限制。随手
- 开启xp_cmdshell: exec sp_configure 'show advance
- 一、准备阶段 获取私钥官方文档 https://kf.qq.com/faq/161222N...获取私钥证书的序列号 https:
- String转换为time存进数据库很久没试过将String类型转换并存进数据库中的date类型的字段,今天刚好遇到并解决了这个小问题,故写
- 从控制器中获取URL的值有三种方式:1、使用Request.QueryString[]例如:string value = Request.Q
- fab命令好似结合我们编写的fabfile.py(其它文件名必须添加-f filename应用)来搭配使用的,部分命令行参数可以通过相应的方
- 首先,必须安装vuex的依赖npm install vuex --save-dev创建专属vuex的文件夹和store.js:store.j
- 前言说到覆盖索引之前,先要了解它的数据结构:B+树。先建个表演示(为了简单,id按顺序建):idname1aa3kl5op8aa10kk11
- 1. 背景在使用selenium浏览器渲染技术,爬取网站信息时,默认情况下就是一个普通的纯净的chrome浏览器,而我们平时在使用浏览器时,
- uni-app自定义导航栏右侧做增加按钮并跳转链接uni-app 在页面上的导航栏右侧做一个增加的图标 并实现跳转1. 先看效果图2. 实现