python flask 学习

已于 2024-03-28 16:39:14 修改
阅读量212 收藏
点赞数 2
分类专栏： python 文章标签： python flask 学习
于 2024-03-28 16:35:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stdic/article/details/137116442
版权 

# import ssl
import json
from flask import Flask, render_template, request, redirect, url_for, abort, make_response
from datetime import datetime
app = Flask(__name__,template_folder='./template')

name = ['']

listusers = list()
listusers.append(['123','123',datetime.now().date()])
listusers.append(['222','222',datetime.now().date()])
listusers.append(['333','444',datetime.now().date()])
listusers.append(['444','333',datetime.now().date()])
listusers.append(['111','111',datetime.now().date()])
listusers.append(['321','321',datetime.now().date()])

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

@app.route('/home')
def home():
    if name[0] == '':
        
        return redirect(url_for('login'))
    return render_template('home.html', name=name[0],listusers=listusers)



@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        data = json.loads(list(request.form.keys())[0])
        username = data.get('username')
        password = data.get('password')
        name[0] = username
        print(name)
        same = False
        for i in listusers:
            if i[0] == username and i[1] == password:
                same = True
                break
        if same:
            return '200'
        else:
            return '400'

    return render_template('login.html')

@app.route('/register', methods=['GET', 'POST'])
def register():
    # print(f'data:{request}')
    # print(f'method:{request.method}')
    # print(f'form:{request.form}')
    if request.method == 'POST':
        # print(f'form:{request.form}')
        # data = request.form
        # print(f'data:{data}')
        # print(f'json:{json.loads(list(request.form.keys())[0])}')
        data = json.loads(list(request.form.keys())[0])
        # print(f'form:{request.form.username}')
        # userdata = request.form
        username = data.get('username')
        password = data.get('password')
        user = [username,password,datetime.now().date()]
        print(user)
        same = False
        for i in listusers:
            if i[0] == username:
                same = True
                break
        if same:
            return '重复'
        else:
            listusers.append(user)

        return '已注册'
    else:
        return render_template('register.html')


# @app.route('/register2', methods=['GET', 'POST'])
# def register2():
#     print(f'data:{request}')
#     print(f'method:{request.method}')
#     print(f'form:{request.form}')
#     if request.method == 'POST':
#         # userdata = request.form
#         print(f'data:{request}')
#         return 'Registration successful'





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

def page1():
    return 0

步骤，创建虚拟环境，安装flask

编辑app.py

新建template文件夹
写入home.html
 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>home</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <style>
        #app{
            width: 800px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div id="app">

        <h2>欢迎：{{name}}</h2>
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>注册时间</th>
                </tr>
            </thead>
            <tbody class="show">
                {% for user in listusers %}
                <tr>
                    <td>{{ user[0] }}</td>
                    <td>{{ user[1] }}</td>
                    <td>{{ user[2] }}</td>
                </tr>
                {% endfor %}
                <!-- <tr>
                    <td>贤心</td>
                    <td>2016-11-29</td>
                    <td>人生就像是一场修行</td>
                </tr>
                <tr>
                    <td>许闲心</td>
                    <td>2016-11-28</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr> -->
            </tbody>
        </table>
    </div>
</body>

    </html>

登录页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <style>
        #app{
            width: 500px;
            height: 500px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                        autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">复选框</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="写作">
                    <input type="checkbox" name="like[read]" title="阅读" checked>
                    <input type="checkbox" name="like[dai]" title="发呆">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="switch" lay-skin="switch">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div> -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <a class="layui-btn layui-btn-primary" href="/">首页</a>
                </div>
            </div>
        </form>
    </div>
    
</body>
<script>
    layui.use('form', function () {
        var form = layui.form;
        let $ = layui.$;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            // console.log(data)
            // console.log(JSON.stringify(data.field))
            $.ajax({
                url: '/login',  // 后端处理接口的 URL
                method: 'POST',
                data: JSON.stringify(data.field),
                success: function (response) {
                    // 处理成功响应
                    console.log(response);
                    if(response=='200'){
                        
                        layer.msg('登录成功');
                        setTimeout(() => {
                            window.location.href = "http://127.0.0.1:5000/home";
                        }, 1000);
                    }else if(response=='400'){
                        layer.msg('请先注册');
                    }
                },
                error: function (error) {
                    // 处理错误响应
                    console.log(response);
                    layer.msg(response);
                }
            });
            return false;
        });
    });
</script>

</html>

注册页面，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <style>
        #app{
            width: 500px;
            height: 500px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                        autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">复选框</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="写作">
                    <input type="checkbox" name="like[read]" title="阅读" checked>
                    <input type="checkbox" name="like[dai]" title="发呆">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="switch" lay-skin="switch">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div> -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button  class="layui-btn commit" lay-submit lay-filter="formDemo">注册</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <a class="layui-btn layui-btn-primary" href="/">首页</a>
                </div>
            </div>
        </form>
    </div>
    
</body>
<script>
    // console.log(layui,layer)
    let $ = layui.$;
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            // event.preventDefault();
            // layer.msg(JSON.stringify(data.field));
            console.log(JSON.stringify(data.field));
            // console.log(data)
            console.log(JSON.stringify(data.field))
            layui.$.ajax({
                url: '/register',  // 后端处理接口的 URL
                method: 'POST',
                // data: data.field,
                data: JSON.stringify(data.field),
                success: function (response) {
                    // 处理成功响应
                    console.log(response);
                    layer.msg(response);
                },
                error: function (error) {
                    // 处理错误响应
                    console.error(error);
                    layer.msg(error);
                }
            });
            
            return false;
        });
    });
    // let oCommit = document.getElementsByClassName('commit')[0];
    // oCommit.onclick = () => {
    //     layui.ajax({
    //         url: '/register2',  // 后端处理接口的 URL
    //         method: 'POST',
    //         data: JSON.stringify(data.field),
    //         success: function (response) {
    //             // 处理成功响应
    //             console.log(response);
    //             layer.msg('数据提交成功');
    //         },
    //         error: function (error) {
    //             // 处理错误响应
    //             console.error(error);
    //             layer.msg('数据提交失败');
    //         }
    //     });
    // }
</script>

</html>

切换登录注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <style>
        #app{
            width: 200px;
            height: 100px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <a class="layui-btn layui-btn-primary" href="login">登录</a>
        <a class="layui-btn layui-btn-primary" href="register">注册</a>

    </div>
</body>
</html>

虚拟环境下运行

python app.py

stdic
关注
专栏目录
Python Flask框架学习
Niandada的博客
04-24 1847
1.安装flask框架 在自己python的环境下直接通过pip安装，不写版本会默认最新版本，安装同时安装其他的库，属于flask的依赖包。 pip install flask 2.快速使用flask from flask import Flask # 创建Flask对象 app = Flask(__name__) # route（）函数告诉那个URL执行哪个函数 @app.route("/") def hello(): return "hello,flask！" if __name__ ==
学习python flask restful api 总结
steelzhong的专栏
12-26 247
python flask 框架学习总结
2024年Python Flask框架学习教程_python中的flask框架教程
2301_82244718的博客
04-30 1285
上述代码定义了一个根路由’/'，当用户访问根URL时，会执行index函数并返回’Hello, Flask!'文本。上述代码定义了一个路由’/hello’，当用户访问该URL时，会执行hello函数。使用request.args.get方法获取URL参数’name’的值，并返回相应的问候语。上述代码定义了一个动态路由’/user/'，当用户访问该URL时，会执行user函数，并将模板’user.html’渲染后的结果返回给客户端。上述代码判断当前模块是否为主模块，如果是，则执行app.run方法启动应用。
Python学习十二：Flask框架
huiguo_的博客
11-13 9830
Flask 依赖两个外部库：WerkZeug 和 Jinja2。WerkZeug 是一个WSGI(在web应用和多种服务器之间的标准Python 接口)工具集。Jinja2负责渲染模板。所以在安装Flask之前，需要安装这两个外部库，而最简单的方法就是使用 Virtualenv 创建虚拟环境。
Python——Flask基础学习
庄小焱
05-25 4613
摘要 由于公司的大家都是python来实现的项目的构建，因此本文也将来学习相关的python的相关的学习。本章将讲解的是Flask框架的学习。 Flask是由python实现的一个web微框架，让我们可以使用Python语言快速实现一个网站或Web服务。而且有对应的python3及python2版本。 1、安装Flask pip install flask 2、目录结构 flask-demo/ ├ run.py # 应用启动程序 ├ config.py
2024年Python Flask框架学习教程_python中的flask框架教程(1)
2301_82244718的博客
04-30 524
pip会自动从Python包索引中下载并安装Flask及其依赖项。注意：如果您使用的是Python 3，则使用pip3命令来代替pip。如果显示Flask的版本号，则安装成功。安装过程中可能会遇到一些问题，例如网络连接问题、依赖项安装失败等。通过上述步骤，您已经成功地安装了Python Flask框架。现在，您可以开始使用Flask来开发Web应用了。如果在安装过程中遇到问题，请参考Flask官方文档或在社区寻求帮助。祝您学习愉快，享受Flask开发的乐趣！
Python Flask框架学习笔记1
CCH2024的专栏
03-16 578
Python Flask框架学习笔记
【Python】Flask学习笔记
weixin_41783242的博客
10-07 707
该示例项目为具备基本功能的博客应用。（数据库用的是自带的sqlite3）
Python 库学习 —— Flask 基础学习
zcy的博客
07-09 9109
文章目录系列文章一、Flask简单介绍二、项目创建（进入调试模式/热部署）三、路由解析四、渲染模板五、表单提交 系列文章 Python 学习 01 —— Python基础 Python 库学习 —— urllib 学习 Python 库学习 —— BeautifulSoup4学习 Python 库学习 —— Re 正则表达式 Python 库学习 —— Excel存储（xlwt、xlrd） Python 学习 02 —— Python爬虫 Python 库学习 —— Flask 基础学习 一、Flask
Python Flask Web 框架入门
热门推荐
python学习者的博客
09-03 20万+
Flask是一个轻量级的基于Python的web框架。 本文适合有一定HTML、Python、网络基础的同学阅读。 1. 简介 这份文档中的代码使用 Python 3 运行。 是的，所以读者需要自己在电脑上安装Python 3 和 pip3。建议安装最新版本，我使用的是Python 3.6.4。 安装方法，可以自行谷歌或者百度。 建议在 linux 下实践本教程中命令行操作、执行代码。 2...
Python Flask学习框架代码
02-26
Python Flask学习框架代码 Flask是一个轻量级的Web服务程序框架，由Armin Ronacher开发，基于Werkzeug WSGI工具箱和Jinja2模板引擎。它以简洁、灵活著称，易于上手，适合小型项目或作为大型应用的基础架构。在你...
pythonFlask 学习文档有用自取
07-24
Flask 是一个用Python编写...整体而言，这份文档是一份详尽的Flask学习资源，它涵盖了从Flask的基础知识到高级用法的各个方面。对于希望学习和使用Flask进行Web开发的开发者来说，这份文档是学习Flask不可或缺的资料。
python flask开发的博客程序，可做毕业设计及入门学习参考
04-10
2. 终端创建python虚拟环境,python版本最好在3.6版本以上 flask initdb flask initdb --drop python3 -m venv venv 3. 激活虚拟环境 4. 运行以下命令安装依赖 5. 运行启动命令 6. 运行以下网址即可访问，默认端口号...
python Flask，mysql学校管理系统，毕业设计，学习项目
12-29
Flask加amis学校管理系统，功能：登录，修改密码，退出登陆，教师管理，班级管理，学生信息，增删改查。 技术：python，flask，amis，html，mysql。 环境python3，pycharm,mysql。
基于Python Flask的在线成绩发布学习平台开源项目
03-25
项目概述：基于Python Flask的在线成绩发布学习平台是一个开源项目，主要采用Python语言开发，同时融合了Shell脚本、HTML、CSS和JavaScript等技术。该项目包含22个文件，其中具体文件类型分布为：Shell脚本6个，...
Python3 解释器
Java_fenxiang的博客
10-05 322
Linux/Unix的系统上，一般默认的 python 版本为 2.x，我们可以将 python3.x 安装在/usr/local/python3目录中。安装完成后，我们可以将路径/usr/local/python3/bin添加到您的 Linux/Unix 操作系统的环境变量中，这样您就可以通过 shell 终端输...
task【XTuner微调个人小助手认知】
最新发布
m0_53291740的博客
10-07 700
下面我们将根据项目的需求一步步的进行修改和调整吧！在 PART 1 的部分，由于我们不再需要在 HuggingFace 上自动下载模型，因此我们先要更换模型的路径以及数据集的路径为我们本地的路径。为了训练过程中能够实时观察到模型的变化情况，XTuner 贴心的推出了一个。
（笔记）第三期书生·浦语大模型实战营（十一卷王场）--书生入门岛通关第2关Python 基础知识
haidizym的博客
10-02 504
学员闯关手册：https://aicarrier.feishu.cn/wiki/ZcgkwqteZi9s4ZkYr0Gcayg1n1g?课程视频：https://www.bilibili.com/video/BV1mS421X7h4/课程文档：https://github.com/InternLM/Tutorial/tree/camp3/docs/L0/Python。
遥感影像-实例分割数据集：iSAID 从切图到YOLO格式数据集制作详细介绍
GIS潮流
09-30 1358
开源数据集isaid标注包含实例分割，但是原始影像太大，很吃显存，一般显卡无法用原始影像直接训练，所以需要对影像进行裁剪，并生成对应的标签，因为想用yolo系列跑模型，所以将标签需要转为txt格式。
2023运维暑期Python Flask学习与实战指南
"2023运维暑假学习计划是一个针对22级运维学生的提升课程，主要涵盖Python基础、面向对象编程、Flask框架的学习，并通过实际项目实践爬虫技术、Web应用开发以及服务器配置，包括使用Git进行版本控制，利用Nginx进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值