使用Flask web框架快速搭建一个网站（学习笔记1）

移动开发 2023-05-05 03:31:31 阅读次数: 0

1.快速开发网站

  • 创建一个新项目

  • 安装flask

conda install flask
conda list

  • 安装成功

  • 新创建一个文件web.py

from flask import Flask

# 实力化对象Flask
app = Flask(__name__)


# 创建了网址/show/info和函数index的对应关系
# 以后用户再浏览器访问/show/info时，网站自动执行函数index
@app.route("/show/info")
def index():
    return "hello world"


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

  • 关闭这个程序的运行（点击pycharm右上角的红色正方形），这个网站就无法访问停止。

  • 为了让网页更加美观，flask框架支持将标签写入一个文件，并访问。

from flask import Flask, render_template

# 实力化对象Flask
app = Flask(__name__)


# 创建了网址/show/info和函数index的对应关系
# 以后用户再浏览器访问/show/info时，网站自动执行函数index
@app.route("/show/info")
def index()
    # flask内部会自动打开这个文件，读取内容，并将内容返回给用户
    # 默认：去当前项目目录的templates文件夹中找。
    return render_template("index.html")


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

  • 在当前文件夹中创建一个文件夹templates，再templates目录下再创建一个index.html文件。

  • 再标签下添加

<h1>hello world</h1>

  • 再次运行web.py文件，"hello world"就变成了加粗加大的一集标题。

2.HTML标签

超文本传输语言（与浏览器搭配）

2.1编码（head）

<meta charset="UTF-8"><!--文字编码-->

2.2title（head）

<title>hot & cold</title><!--浏览器的标题-->

2.3标题

<h1></h1>
<h2></h2>
<h3></h3>

2.4div和span

<!--块级标签，无论有多少文字占据一行空间-->
<div>hello</div>
<div>world</div>
<!--行内标签，内链标签，文字有多少占多少空间-->
<span style="color:lightblue">hello</span>
<span style="color:lightblue">world</span>

2.5超链接

<!--超链接，跳转其他的网站时需要写全网址-->
<a href="https://www.baidu.com">百度</a>
<!--超链接，跳转到自己网站的其他地址-->
<a href="/goods/list">查看更多</a>

2.6图片

<!--显示网上的图片，如果不能显示就说明别人加了防盗链-->
<img src="xxxx"/>
<!--显示自己的图片，创建static目录，图片放在static里-->
<div>
    <!--设置大小，像素形式-->
    <img style="height:200px;width:200px" src="/static/xxx.jpeg" />
</div>
<div>
    <!--设置大小，只能用宽度设置百分比形式-->
    <img style="width:15%" src="/static/xxx.jpeg"/>
</div>

2.7列表

<!--无序列表-->
<ul>
    <li>KAI</li>
    <li>SEULGI</li>
    <li>JENO</li>
    <li>KARINA</li>
</ul>
<!--有序列表-->
<ol>
    <li>KAI</li>
    <li>SEULGI</li>
    <li>JENO</li>
    <li>KARINA</li>
</ol>

2.8表格

<table border="1">
    <!--表头-->
    <thead>
        <tr>    <th>ID</th> <th>name</th>   <th>age</th>    </tr>
    </thead>
    <!--表格内容-->
    <tbody>
        <tr>    <td>1111</td>   <td>Tina</td>   <td>20</td> </tr>
        <tr>    <td>1112</td>   <td>Jack</td>   <td>21</td> </tr>
        <tr>    <td>1111</td>   <td>Jeno</td>   <td>22</td> </tr>
    </tbody>
</table>

2.9input系列

<!--input系列-->
<!--1.纯文本框-->
<input type="text">
<!--2.密码框-->
<input type="password">
<!--3.选择文件-->
<input type="file">
<!--4.单选框-->
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<!--5.复选框-->
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">排球
<!--按钮 6.button普通按钮 7.submit提交表单的按钮-->
<input type="button" value="提交">
<input type="submit" value="提交">

2.10下拉框

<!--下拉框 多选加上multiple-->
<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
    <option>广州</option>
</select>

2.11多行文本框

<!--多行文本-->
<textarea rows="3"></textarea>

3.网络请求

  • 在浏览器的URL中输入地址，回车，访问

  • 浏览器向后段发送请求时

  • GET请求【URL方法/表单提交】

  • 现象：跳转、向后台传入数据，数据会拼接在URL上

  • 比如，在百度中搜索时，就会发送GET请求

  • POST请求【表单提交】

  • 现象：提交数据不会出现在URL中，而是出现在请求体中

  • 比如，进行登录的时候，会发送POST请求

  • 页面上的数据想要提交到后台，需要满足以下条件：

  • form标签必须包裹那些要提交的数据，并且这些标签需要有name属性

  • 提交的方式：method="get"

  • 提交的地址：action="/xxx/xxx/xx"

  • 在form标签里面必须要有submit标签

<form method="get" action="/do/reg">
    <div>
        用户名：<input type="text" name="username">
    </div>
    <div>
        密码：<input type="password" name="userpassword">
    </div>
    <input type="submit" value="xxx">
</form>

案例：用户注册

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/reg', methods=['GET'])
def do_register():
    # 1.接收用户通过GET形式发送的数据
    print(request.args)
    # 2.给用户返回结果
    return "注册成功"


@app.route('/post/reg', methods=['POST'])
def post_register():
    # 1.接收用户通过GET形式发送的数据
    print(request.form)
    # 2.给用户返回结果
    return "注册成功"


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

  • register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <h1>【GET】注册</h1>
    <form method="get" action="/do/reg">
        <div>
            用户名：<input type="text" name="username">
        </div>
        <div>
            密码：<input type="password" name="userpwd">
        </div>
        <input type="submit" value="注册">
    </form>
    <h1>【POST注册】</h1>
    <form method="post" action="/post/reg">
        <div>
            用户名：<input type="text" name="username">
        </div>
        <div>
            密码：<input type="password" name="userpwd">
        </div>
        <input type="submit" value="注册">
    </form>
</body>
</html>

  • 如果使用POST形式的注册，输入好用户名和密码后，点击注册，会显示“注册成功”。上面的URL变为http://127.0.0.1:5000/post/reg

  • 但一般来说，注册时的操作是POST请求

案例：登陆和注册结合

from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == "GET":
        return render_template("register.html")
    else:
        # 1.接收用户通过GET形式发送的数据
        print(request.form)
        username = request.form.get("username")
        userpwd = request.form.get("userpwd")
        sex = request.form.get("sex")
        hobby = request.form.get("hobby")
        city = request.form.get("city")
        notes = request.form.get("notes")
        print(username, userpwd, sex, hobby, city, notes)
        # 2.给用户返回结果
        return "注册成功"


@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == "GET":
        return render_template("login.html")
    else:
        # 1.接收用户通过GET形式发送的数据
        print(request.form)
        username = request.form.get("username")
        userpwd = request.form.get("userpwd")
        print(username, userpwd)
        # 2.给用户返回结果
        return "登陆成功"


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

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <h1>【POST注册】</h1>
    <form method="post" action="/register">
        <div>
            用户名：<input type="text" name="username">
        </div>

        <div>
            密码：<input type="password" name="userpwd">
        </div>

        <div>
            性别：
            <input type="radio" name="sex" value="man">男
            <input type="radio" name="sex" value="woman">女
        </div>

        <div>
            爱好：
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" name="hobby" value="football">足球
            <input type="checkbox" name="hobby" value="volleyball">排球
        </div>

        <div>
            城市：
            <select name="city">
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="guangzhou">广州</option>
            </select>
        </div>
        <div>
            备注：<textarea name="notes"></textarea>
        <div>
            <input type="submit" value="注册">
        </div>
        <a href="/login">去登陆</a>
    </form>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登陆</title>
</head>
<body>
    <h1>登陆</h1>
    <form method="post" action="login">
        <div>
            姓名：<input type="text" name="username">
        </div>
        <div>
            密码：<input type="password" name="userpwd">
        </div>
        <div>
            <input type="submit" value="登陆">
        </div>
        <a href="/register">还没有账号？去注册</a>
    </form>

</body>
</html>

4.总结

1.网站请求流程

2.HTML标签

h/div/span/a/img/ul/ol/li/table/input/textarea/select/form

猜你喜欢

转载自blog.csdn.net/qyqyqyi/article/details/128709680
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022