Flask基础学习(-)
  JiJ96DoSHEh4 2023年11月02日 47 0
1.快速开发一个网站

python 安装 Flask web 框架,新建一个web.py文件

pip install flask

from flask import Flask

app = Flask(__name__)

# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
@app.route("/show/info")
def index():
    return "中国联通"

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5100, debug=False)

运行上面程序结果:

Flask基础学习(-)_flask

浏览器进行访问: http://127.0.0.1:5100/show/info

Flask基础学习(-)_用户注册_02

1.1return 方式返回HTML内容的方式不方便进行管理, 因此引入templates模板
from flask import Flask, render_template

app = Flask(__name__)

# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
@app.route("/show/info")
def index():
    # return "中国联通"
    # 默认去当前目录的 templates 文件夹中去找
    return render_template("index.html")

if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5100, debug=False)
1.2 新建templates文件夹和index.html文件

Flask基础学习(-)_flask_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>china</title>
</head>
<body>
    <h1>中国联通</h1>
</body>
</html>

重新运行并访问

Flask基础学习(-)_html_04

1.3 上面的templates目录也可以改为其它名称,但一般不会修改
例如目录名称为"temp_model"
app = Flask(__name__, template_folder="temp_model")
2.标签
2.1 编码
<meta charset="UTF-8">

2.2 title
<title>china</title>
2.3 标题
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h1>
    <h3>三级标题</h1>
    <h4>四级标题</h1>
    <h5>五级标题</h1>
</body>
2.4 div和span标签
<div>div:占一整行(块级标签)</div> 
<span>span: 用多少占多少(行内标签/内联标签)</span>
<span>两个 span 标签不在同一行,页面显示时会在同一行,中间以一个空格分隔</span>
<span>两个 span 标签在同一行,页面显示时会在同一行,中间没有空格,连着</span>
2.5 超链接,跳转到内部网站或外部网站
<a href="http://www.baidu.com">点击跳转</a>

修改后的web代码

from flask import Flask, render_template

app = Flask(__name__)

# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
@app.route("/show/info")
def index():
    # return "中国联通"
    # 默认去当前目录的 templates 文件夹中去找
    return render_template("index.html")
# 新添加如下配置
@app.route("/get/news")
def get_news():
    # 默认去当前目录的 templates 文件夹中找
    return render_template("get_news.html")

if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5100, debug=False)

修改后的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>china</title>
</head>
<body>
   <a href="/get/news">点击跳转自己的网站</a></br>
   <a href="http://www.baidu.com">点击跳转外部网站</a>
</body>
</html>

在templates目录下新建的get_news.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>china</title>
</head>
<body>
   <h1>我是内部网站</h1>
</body>
</html>

重新运行Flask,刷新页面

Flask基础学习(-)_flask_05

点击第一行后,跳转到如下页面,点击第二行跳转到百度

Flask基础学习(-)_用户注册_06

2.6 在新的 Tab 标签页打开链接,下面代码也涉及到标签嵌套
<a href="http://www.jd.com" target="_blank">
    <img src="https://img0.baidu.com/it/u=242767209,2541342896&fm=253&fmt=auto&app=138&f=JPEG" style="width: 150px;"/>
</a>

运行代码,点击图片跳转到jd

Flask基础学习(-)_用户注册_07

2.7 尝试访问本地图片

新建一个文件夹并放一张图片

Flask基础学习(-)_用户注册_08

修改get_new文件

Flask基础学习(-)_用户注册_09

Flask基础学习(-)_用户注册_10

修改图片尺寸后再次访问

<img height="100"; width="200" src="/static/image1.jpg">

Flask基础学习(-)_flask_11

2.8 无序列表
<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>

修改get_new文件,查看运行结果

Flask基础学习(-)_html_12

2.9 有序列表
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

Flask基础学习(-)_html_13

2.10 表格

修改web01.py新增一个访问路径

@app.route("/get/table")
def get_table():
    return render_template("get_table.html")

在templates页面下新建get_table.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr><th>ID</th><th>姓名</th><th>年龄</th></tr>
        </thead>
        <tbody>
            <tr><td>10</td><td>天蓬元帅</td><td>855</td></tr>
            <tr><td>11</td><td>齐天大圣</td><td>956</td></tr>
            <tr><td>12</td><td>卷帘大将</td><td>756</td></tr>
            <tr><td>13</td><td>唐三藏</td><td>35</td></tr>
        </tbody>
    </table>
</body>
</html>

运行结果

Flask基础学习(-)_flask_14

2.11 input标签
<!-- 文本与密码 -->
<input type="text" /><br/>
<input type="password" /><br/>

<!-- 选择文件 -->
<input type="file" /><br/>

<!-- 单选框 -->
<input type="radio" name="n1" />男<br/>
<input type="radio" name="n1" />女<br/>

<!-- 复选框 -->
<input type="checkbox" />python<br/>
<input type="checkbox" />java<br/>
<input type="checkbox" />c<br/>
<input type="checkbox" />php<br/>

<!-- 按钮 -->
<input type="button" value="提交"/>  普通按钮<br/>
<input type="submit" value="提交"/>  提交表单<br/>

Flask基础学习(-)_用户注册_15

2.12 下拉框
<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

Flask基础学习(-)_用户注册_16

用户注册

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

在templates下新建register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>用户注册</h1>
    <div>
        用户名: <input type="text" />
    </div>
    <div>
        密码: <input type="password" />
    </div>
    <div>
        性别: <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女
    </div>
    <div>
        爱好:
        <input type="checkbox">读书
        <input type="checkbox">看电影
        <input type="checkbox">骑行
    </div>
    <div>
        城市:
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>深圳</option>
        </select>
    </div>
    <div>
        备注: <textarea cols="30" rows="10"></textarea>
    </div>
    <div>
        <input type="button" value="button提交">
        <input type="submit" value="submit提交">
    </div>
</body>
</html>

Flask基础学习(-)_html_17

2.13 用户注册案例

新建app.py文件

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/register', methods=['GET'])
def register():
    return render_template('register.html')

@app.route("/do/register", methods=['GET'])
def do_register():
    get_info = request.args
    return get_info

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5200, debug=True)

修改templates下的register.html,点击注册后跳转至路由/do/register

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>用户注册</h1>
    <form action="/do/register" method="get">
        <div>
            用户名: <input type="text" name="username">
        </div>
        <div>
            密码: <input type="password" name="passwd">
        </div>

        <input type="submit" value="提交">
    </form>
</body>
</html>

Flask基础学习(-)_flask_18

Flask基础学习(-)_html_19

  • POST 方式
@app.route("/post/register", methods=['POST'])
def post_register():
    get_info = request.form
    return get_info

修改register.html

<body>
    <h1>用户注册</h1>
    <form action="/post/register" method="post">
        <div>
            用户名: <input type="text" name="username">
        </div>
        <div>
            密码: <input type="password" name="passwd">
        </div>
        <input type="submit" value="提交">
    </form>
</body>

Flask基础学习(-)_html_20

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  1BVmdlLr07sm   2023年11月30日   65   0   0 HTMLcss
  TT40eGNn6pmm   2023年11月02日   42   0   0 HTML官网数据
JiJ96DoSHEh4
最新推荐 更多