首頁 > 開發者 > Python

Python Web架構Flask下網站開發入門執行個體_python

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、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、運行效果

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More