基于flask做的用户注册界面一（无后台接收，无数据库）

最新推荐文章于 2023-05-06 22:19:15 发布

旖旎沐心

最新推荐文章于 2023-05-06 22:19:15 发布

阅读量373

点赞数 1

分类专栏： FLASK 文章标签： flask html5

本文链接：https://blog.csdn.net/m0_48669897/article/details/113796435

版权

FLASK 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客展示了如何利用Python的Flask框架创建一个简单的Web应用，包括一个主页和注册页面。`__init__.py`初始化Flask应用并设置调试模式，`view.py`定义了路由和视图函数，`index.html`和`regist.html`为模板文件，使用了Bootstrap进行布局和样式设计。注册页面包含表单元素，用于用户输入个人信息。

摘要由CSDN通过智能技术生成

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 %}