flask框架基于bootstrap 实现用户注册， 用户登录， 用户注销， 用户查看，以及上传图片；

主函数 app.py

import os

from flask import Flask, render_template, redirect, request, url_for, flash, session
from functools import wraps

users = [
    {
        'username': 'root',
        'password': 'root'
    },
    {
        'username': 'westos',
        'password': 'westos'
    }
]

app = Flask(__name__)
# 设置secret值，保护信息不被泄露
app.config['SECRET_KEY'] = 'aasswde'


def is_login(f):
    """用来判断用户是否登录成功"""

    # 保证函数在加了装饰器之后返回的不是wrapper函数名，而是原函数名
    @wraps(f)
    def wrapper(*args, **kwargs):
        # 判断session对象中是否有seesion['user'],
        # 如果包含信息， 则登录成功， 可以访问主页；
        # 如果不包含信息， 则未登录成功， 跳转到登录界面;
        if session.get('user', None):
            return f(*args, **kwargs)
        else:
            flash('用户必须登陆才能访问%s' % f.__name__)
            return redirect(url_for('login'))

    return wrapper


def is_admin(f):
    """用来判断用户是否登录成功"""

    @wraps(f)
    def wrapper(*args, **kwargs):
        # 判断session对象中是否有seesion['user']等于root,
        # 如果包含信息， 则登录成功， 可以访问主页；
        # 如果不包含信息， 则未登录成功， 跳转到登录界面;；
        if session.get('user', None) == 'root':
            return f(*args, **kwargs)
        else:
            flash('只有管理员root才能访问%s' % f.__name__)
            return redirect(url_for('login'))

    return wrapper


@app.route('/')
@is_login
def index():
    return render_template('index.html')


@app.route('/register/', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        username = request.form.get('username', None)
        password = request.form.get('password', None)
        # 当所有的信息遍历结束， 都没有发现注册的用户存在， 则将注册的用户添加到服务器， 并跳转登录界面;
        for user in users:
            if user['username'] == username:
                return render_template('register.html', messages='用户%s已经存在' % username)
        else:
            users.append(dict(username=username, password=password))
            # 出现一个闪现信息;
            flash('用户%s已经注册成功，请登陆.....' % username, category='info')
            return redirect(url_for('login'))

    return render_template('register.html')


@app.route('/login/', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form.get('username', None)
        password = request.form.get('password', None)
        for user in users:
            if user['username'] == username and user['password'] == password:
                #  将用户登录的信息存储到session中;
                session['user'] = username
                return redirect(url_for('index'))
            if user['username'] == username and user['password'] != password:
                # 出现一个闪现信息;
                flash('%s用户密码错误，请重新登陆....' % (username))
                return redirect(url_for('login'))
        else:
            flash('没有%s用户，请重新登陆...' % username)
            return redirect(url_for('login'))
    return render_template('login.html')


@app.route('/list/')
@is_admin
@is_login
def list():
    return render_template('list.html', users=users)


@app.route('/logout/')
def logout():
    #  将用户存储到session中的信息删除;
    session.pop('user')
    flash('注销成功....')
    return render_template('login.html')


@app.route('/delete/<string:username>/')
def delete(username):
    for user in users:
        # 用户存在， 则删除;
        if username == user['username']:
            users.remove(user)
            flash('删除%s用户成功' % username)
    # else:
    #     flash('用户%s不存在'%username)

    # 删除成功， 跳转到/list/路由中.....
    return redirect(url_for('list'))


@app.route('/upload/', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        # 获取用户上传的文件对象,html中定义的对象名
        f = request.files['Imgobj']

        # 获取上传文件的文件名
        # print(f.filename)

        # 获取当前项目的目录位置;
        basepath = os.path.dirname(__file__)
        # 两种查询的区别
        # -查询到文件名
        # print(__file__)       # /root/PycharmProjects/day34/app.py
        # -查询到文件所在目录
        # print(basepath)       # /root/PycharmProjects/day34

        # 拼接路径， 保存到本地的位置;
        filepath=os.path.join(basepath,'static','img',f.filename)

        # 保存文件
        f.save(filepath)
        flash('上传文件%s成功'%f.filename)
        return redirect(url_for('upload'))
    else:
        return render_template('upload.html')


if __name__ == '__main__':
    app.run()

对应的html模块

1). 继承模板 - base.html

主要是给页面相应的渲染，格式，以及导航条，从而避免多次编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>西部开源-{% block title %}

    {% endblock %}</title>
{#  导入静态文件，加入css，js样式  #}
    <link href="/static/css/bootstrap.css" rel="stylesheet">
{#    <link href="{{ url_for('static',filename='css/bootstrap.css') }}" rel="stylesheet">#}
</head>
<body>
{# 从bootstrap中找一个导航栏 #}
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- 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="#bs-example-navbar-collapse-1" 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="#">Todo</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="{{ url_for('index') }}">主页 <span class="sr-only">(current)</span></a></li>
                <li><a href="{{ url_for('list') }}">用户信息</a></li>
                <li><a href="{{ url_for('upload') }}">上传图片</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">电影</a></li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                {#       分类讨论:
                            1. 如果没有登录， 显示登录和注册按钮；
                            2. 如果登录成功， 显示用户名称和注销按钮

                #}
                {%  if not session['user'] %}
                    <li><a href="{{ url_for('login') }}">登录</a></li>
                    <li><a href="{{ url_for('register') }}">注册</a></li>
                {% else %}
                    <li class="dropdown">
                        {#  这是一个下拉列表   #}
                    <a href="#" class="dropdown-toggle"
                       data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">当前用户:{{ session.user }}<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                    {#    在下拉列表中划一条线分隔开    #}
                        <li role="separator" class="divider"></li>
                        <li><a href="{{ url_for('logout') }}">注销</a></li>

                    </ul>
                    </li>
            </ul>
            {% endif %}
        </div>

    </div>
</nav>

{#让每个页面都可以获取闪现信息闪现#}
{# 闪现消息可以是多个，所以要边历全部拿出 #}
{% for item in get_flashed_messages() %}
    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
        {{ item }}
    </div>
{% endfor %}

{#中间的部分需要修改#}
{% block content %}
{% endblock %}


{#<!--导入外部的js样式;-->#}
{#<script src="/static/js/bootstrap.min.js"></script>#}
{#<script src="/static/js/jquery.min.js"></script>#}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>

2). 主页面- index.html

{% extends 'base.html' %}

{% block title %}

主页

{% endblock %}

{% block content %}

<h1 style="color: springgreen;">这是主页</h1>

{% endblock %}

3). 注册页面 -register.html

{% extends 'base.html' %}


{% block title %} 注册页面{% endblock %}


{% block content %}
    <!--<button type="button" class="btn btn-danger">失败</button>-->
    <!--实现登录界面-->
    <div class="container">
    <div class="col-lg-4 col-lg-offset-4" style="margin-top: 50px">


        <h1>
            注册
            <small>
                已有帐号
                {#                <a href="/login/">登录</a>#}
                <a href="{{ url_for('login') }}">登录</a>
            </small>

        </h1>

        {#    action : 将表单填写的数据提交到那个URL里面进行处理, #}
        {#    url_for('register')    : 根据视图函数寻找对应的url地址,/register/ #}
        {#    method =['post', 'get'] , 这种是错误的， 提交数据只能选择一种HTTP请求方法;    #}
        <form action="{{ url_for('register') }}" method="post">
            <div class="form-group">
                <label for="exampleInputEmail1">用户名</label>

                {#   name="username"  ====> 将name里面的值username作为key值， 表单里面填写的内容作为value值， 提交到request.form              #}
                {#   type="text" : 要求填写的是一个字符串;               #}
                <input name="username" type="text" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input name="password" type="password" class="form-control" id="exampleInputPassword1"
                       placeholder="Password">
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox"> 记住密码
                </label>
            </div>
            <button type="submit" class="btn btn-success btn-block">注册</button>
        </form>


        {% if message %}
            <h5 style="color: red">{{ message }}</h5>
        {% endif %}
    </div>
    </div>
{% endblock %}

4). 登录页面- login.html

{% extends 'base.html' %}

{% block title %} 登录页面{% endblock %}

{% block content %}

    <!--<button type="button" class="btn btn-danger">失败</button>-->
    <!--实现登录界面-->
    <div class="container">
        <div class="col-lg-4 col-lg-offset-4" style="margin-top: 50px">
            <h1>
                登录
                <small>
                    没有账号？
                    {#                <a href="/register/">注册</a>#}
                    <a href="{{ url_for('register') }}">注册</a>
                </small>

            </h1>
            <form action="{{ url_for('login') }}" method="POST">
                <div class="form-group">
                    <label for="exampleInputEmail1">用户名</label>
                    <input name='username' type="text" class="form-control" id="exampleInputEmail1" placeholder="username">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码</label>
                    <input name='password' type="password" class="form-control" id="exampleInputPassword1"
                           placeholder="Password">
                </div>

                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 记住密码
                    </label>
                </div>
                <button type="submit" class="btn btn-success btn-block">登录</button>
            </form>
        </div>
    </div>

{% endblock %}

5). 查看用户信息页面 -list.html

{% extends 'base.html' %}

{% block title %}
用户信息
{% endblock %}

{% block content %}
    {# 设置页面为十二格模式   #}
<div class="container">
    {# 设置居中，占八格，开头留两个空格#}
    <div class="col-lg-8 col-lg-offset-2">
            <h1 style="color:blueviolet">用户信息显示</h1>
            <br/>
            <br/>
           <table class="table table-hover">
               <tr>
                   <td>用户名</td>
                   <td>密码</td>
                   <td>删除</td>
               </tr>
               {% for user in users %}
                    <tr>
                        {#  user是一个字典， 获取字典的key值， user.keyname #}
                        <td>{{ user.username }}</td>
                        <td>{{ user.password }}</td>
                         {#   寻找删除的按钮   #}
                        <td>
                            <a href="{{ url_for('delete',username=user.username) }}" class="btn btn-default btn-danger" role="button">
                                删除
                            </a>
                        </td>
                    </tr>
               {% endfor %}
           </table>
        </div>

    </div>
{% endblock %}

因为装饰器修饰只有管理员才能登录查看信息，所以普通用户查看会返回到登录页面。
当我们以管理员身份登录时，就能查看到信息。

6).注销帐号，即退出当前帐号，logout因为是退出在session中的信息，所与没有html文件

7). 删除用户信息- 删除保存的信息，在list.html中加入了删除的按钮，即直接操作也不需要相应的html文件

8). 上传文件 -upload.html

{% extends 'base.html' %}

{% block title %}

上传文件
{% endblock %}

{% block content %}
{# 设置页面为十二格模式   #}
<div class="container">
    {# 设置居中，占八格，开头留两个空格#}
    <div class="col-lg-8 col-lg-offset-2">
        <h1 style="color: deeppink;">上传图片</h1>
        <hr/>
        {#   enctype="multipart/form-data"用于接收特殊的数据， 包括视频， 图片， 音乐.....，
           默认只能接收text/plain            #}
        <form action="{{ url_for('upload') }}"
              method="post"
              enctype="multipart/form-data">
            <input name="Imgobj" type="file"><br/>
            <input type="submit" value="上传">
        </form>
    </div>
</div>
{% endblock %}