基于flask做的用户注册界面一(无后台接收,无数据库)

2023-10-30

 

1.__init__.py文件界面(再此声明,完全是个人问题,一般__init__.py不能这样用)

#__init__.py文件
from flask import Flask

app = Flask(__name__)
debug = True

import apps.view

2.view.py文件

#view.py界面
from flask import render_template, request, redirect, session

from apps import app


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

@app.route('/regist', methods=["POST","GET"])
def regist():
    return render_template("user_regist.html")

3.app.py(运行)

from apps import app

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

接下来是HTML文件,用了模板渲染

1.公用模板(layout.html)用了JS,CSS渲染

<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>flask_web_regist</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    {% block css_style %}

    {% endblock %}
</head>
<body>


<div class="container">

    <!-- Static navbar -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <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="{{ url_for('index') }}">flask_web_regist</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                        <li id="nav-4"><a href="#">login</a></li>
                        <li id="nav-5"><a href="{{ url_for("regist") }}">regist</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </nav>

    {% block  content %}

    {% endblock %}

</div> <!-- /container -->

<div class="container">


</div> <!-- /container -->

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
{% block js_code %}

{% endblock %}

</body>
</html>

2.主页面(index.html)

{% extends "layout.html" %}

{% block content %}
<head>
</head>
<body>
<h1>flask_web</h1>

</body>
</html>
{% endblock %}

3.注册页面(regist.html)

{% extends "layout.html" %}

{% block content %}
<head>
</head>
<body>
<div class="container col-md-4" >
    <form role="form" method="post">
        <div class="form-group">
            <label for="user_name">用户名</label>
            <input type="text" id=user_name name="user_name " class="form-control">
        </div>
        <div class="form-group">
            <label for="user_pwd">用户密码</label>
            <input type="password" id=user_pwd name="user_pwd " class="form-control">
        </div>
        <div class="form-group">
            <label for="user_bir">用户生日</label>
            <input type="date" id=user_bir name="user_bir " class="form-control">
        </div>
        <div class="form-group">
            <label for="user_mail">用户邮箱</label>
            <input type="email" id=user_mail name="user_mail " class="form-control">
        </div>
        <div class="form-group">
            <label for="user_phone">用户电话</label>
            <input type="number" id=user_phone name="user_phone " class="form-control">
        </div>
        <div class="form-group">
            <label for="user_jianjie">用户简介</label>
            <input type="text" id=user_jianjie name="user_jianjie " row="3" class="form-control">
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-success" name="submit " value="提交表单">
        </div>
    </form>
</div>


</body>
</html>
{% endblock %}

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

基于flask做的用户注册界面一(无后台接收,无数据库) 的相关文章

随机推荐

  • Android 手机各大厂商的指纹设置界面

    开发中有的时候要跳转到指纹设置界面 Android厂商较多 基本都是定制化的操作 所以每个厂商的指纹设计界面各不相同 下面罗列几款市面上比较常用的手机厂商的指纹设置界面 并附上跳转方式 private final String SONY s
  • solidity智能合约的经典设计模式

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 设计模式是许多开发场景中的首选解决方案 本文将介绍五种经典的智能合约设计模式并给出 以太坊solidity实现代码 自毁合约 工厂合约 名称注册表 映射表迭代器和提款模式
  • Get value from agent failed:ZBX_TCP_READ() timed out(亲测)

    报错信息 Get value from agent failed ZBX TCP READ timed out 解决办法 1 查看服务和端口是否还在 2 查看zabbix agentd conf端配置文件 serverIP是否正确 3 查看
  • Java程序设计——UML类图

    目录 仅供参考 一 定义 二 类图示例 三 类之间的关系 类与类一共有如下几种关系 泛化 Generalization 实现 Realization 依赖 Dependence 关联 Association 聚合 Aggregation 组
  • eclipse project文件夹下 删除不掉文件夹或者文件的解决的方法

    对于新手来说 有时操作失误就会导致eclipse文件夹中的某些子文件夹或者文件无法删除 这种原因是 在project文件夹中 不是eclipse上显示的 是真实的物理磁盘上的 这个文件夹或者文件已经不存在了 所以在删除的时候报错 无法删除
  • python自动化办公——定制化将电子签名批量签写到PDF文件

    python自动化办公 定制化将电子签名批量签写到PDF文件 文章目录 python自动化办公 定制化将电子签名批量签写到PDF文件 1 安装依赖 2 需求分析 3 代码 1 安装依赖 首先需要下载所需要的库 pip install pdf
  • 树莓派CM4基于emmc安装Ubuntu系统及初始配置

    文章目录 安装前准备 CM4安装系统 参考资料 安装前准备 在树莓派官方手册CM板卡介绍中说明 开发板的供电电压为DC12V或5V 为了保证开发板USB接口的正常使用 开发板的供电电流应 1 2A CM4安装系统 补充说明 Ubuntu18
  • DCIC-赛题二赛后总结

    文章目录 赛题说明 赛题名称 赛题说明 任务解析 数据清单 算法分析 1 1 巡游车日均空驶率计算 1 2 网约车空驶率部分代码分析 1 3 结果与结果分析 2 1 订单运距与时长计算 2 2 结果与结果分析 3 1 上下客地点可视化实现
  • python 字符串 大小写转换 以及一系列字符串操作技巧

    总结 capitalize 首字母大写 其余全部小写 upper 全转换成大写 lower 全转换成小写 title 标题首字大写 如 i love python title I Love Python 转换大小写 和其他语言一样 Pyth
  • Anaconda--Python环境管理

    Anaconda是Python的一个开源发行版本 主要面向科学计算 预装了丰富强大的库 使用Anaconda可以轻松管理多个版本的Python环境 Download https www anaconda com download Anaco
  • 堆的节点总数n和叶结点数目的关系 (CLRS习题 6.1-7)

    来自算法导论 CLRS的一个习题 Chapter 6 Heap Sort Exercise6 1 7 Show that with the array representationfor storing an n element heap
  • TESTNG框架

    TestNG是一个设计用来简化广泛的测试需求的测试框架 从单元测试 隔离测试一个类 到集成测试 测试由有多个类多个包甚至多个外部框架组成的整个系统 例如运用服务器 编写一个测试的过程有三个典型步骤 编写测试的 业务逻辑并在代码中插入Test
  • Typora 含多图片笔记快速上传到 CSDN 上发表

    Typora 含多图片笔记快速上传到 CSDN 上发表 适用场景 解决方案 具体步骤 适用场景 在 Typora 里面记笔记 上传的图片是本地保存的 如果要将笔记上传到 CSDN 上发表的话 图片得一张一张地拖拽非常麻烦 解决方案 Typo
  • TypeScript快速上手

    简介 参考文档 https ts xcatliu com 阮一峰typescript入门教程 TypeScript JavaScript With Syntax For Types typescriptlang org typescript
  • Ubuntu上搭建RK3588开发环境

    目标 Ubuntu上搭建RK3588开发环境 并成功运行 测试其芯片性能 可参考连接 https wiki t firefly com zh CN Core 3588J started html x 16号之前完成打包Ubuntu系统 差一
  • String[] 插入元素数据

    String pIdStr request getParameter ids String projectIdList pIdStr split List
  • Mybatis报错mapkey is required解决方案

    Mybatis报错mapkey is required解决方案 问题背景 解决方案 总结 Lyric 几天都没有喝水也能活 问题背景 因为使用了mybatisX插件 导致检查报错mapkey is required 解决方案 1 关闭myb
  • vue中下载文件使用file-saver,文件错误excel无法打开

    最近使用到了file saver下载文件 通过axios调接口拿文件数据 再通过file saver下载文件 但就在我成功下载文件并打开时 提示这个信息 主要的原因就是没有设置响应的文件流类型为 blob 加上后就可以打开了
  • FreeRTOS config开始的宏

    FreeRTOSConfig h系统配置文件中可以自定义 FreeRTOS h中定义默认值 configAPPLICATION ALLOCATED HEAP 默认情况下FreeRTOS的堆内存是由编译器来分配的 将宏configAPPLIC
  • 基于flask做的用户注册界面一(无后台接收,无数据库)

    1 init py文件界面 再此声明 完全是个人问题 一般 init py不能这样用 init py文件 from flask import Flask app Flask name debug True import apps view