gin49sz

导航

 

1.快速开发网站

render_template是Flask框架的一个函数,用于渲染模板并生成动态的HTML文件

app = Flask(name, template_floder(''路径''))

构造一个Flask类赋给app,

template_floder修改寻找模板的默认路径,默认是当前目录下的templates文件(没有 则需要创建一个目录文件)

from flask import Flask,render_template

app = Flask(__name__) #实例化一个Flask类并赋予app

#创建网址/show/info和函数index的对应关系
#当用户访问/show/info,网站自动执行index
@app.route("/show/info")
def index():
    return render_template("index.html")

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

对应的HTML文件

<!DOCTYPE html>
<html>
<head>
    <title>MyPage</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Hello, World!</h1>
    <p><span style="color: aqua;">Aha!</span>This is a sample web page.This is the changes</p>
</body>
</html>

2.浏览器能识别的标签

2.1只能在<head>里

<meta charset='UTF-8'>编码

<title>头显示

<div>
	<h1>Hello, World!</h1>#占据一整行
</div>

2.2在<body>内

<h1>~<h6>级标题
<div>块级标签,一个占一行
<span>行内标签

<div>
    <p>
        <span style="color: aqua;">Aha!</span>
        <span>This is a sample web page.This is the changes</span>
    </p>
</div>

练习题 运用<div>和<span>

<!DOCTYPE html>
<html>
<head>
    <title>MyPage</title>
    <meta charset="UTF-8">
</head>
<body>
    <div>
        <h3>Time:8:53</h3>
    </div>
    <div>
        <p>
            <span style="color:#39c5bb;">Aha!</span>
            <span>I made a web with Flask</span>
        </p>
        <p>
            There will be inserted some words...
        </p>
    </div>    
    <div>
        <h3>Time:8:53</h3>
    </div>
    <div>
        <p>
            <span style="color:#39c5bb;">Aha!</span>
            <span>I put some words in here</span>
        </p>
        <p>
            There will be inserted some words...
        </p>
    </div> 

</body>
</html>

2.4超链接

<a href="">用于跳转页面

<a href="https://cn.bing.com">Click here to jump</a>

用于自己网站的跳转

<a href="http://127.0.0.1:5000/get/news">Click here to jump</a>

更简洁的写法

<a href="/get/news">Click here to jump</a>

target="_blank"点击链接不在本页面跳转,生成新的标签页

<a href="/list/goods" target="_blank">Click here to show you some goods</a>

2.5图片

<img src="">用于添加标签,是自闭和标签,因此没有</img>

<img src="https://ts1.cn.mm.bing.net/th?id=OIP.yMArSeOqnCJvLqSZpAzq7wAAAA&w=298&h=204&c=12&rs=1&qlt=99&pcl=faf9f7&o=6&dpr=1.3&pid=MultiSMRSV2Source">

用于自己网站的图片(本地图片)

-需要在本目录下创建一个static目录文件用于存放

-在自己网页中引用地址<img src="/static/图片.jpg">

可以使用width和height来调整图片大小

<img src="/static/helloworld.jpg" width="400" height="200">

小结

划分

块级标签

<div></div>
<h1></h1>~<h6><h6>

行内标签

<span></span>
<a></a>
<img />

嵌套

<a href="Link" target="_blank"><img src="ImgLink"></a>#target=_blank用于生成新的标签页,不在当前页面跳转

2.6列表标签

无序号(块级标签)

<ul>
    <li></li>
    <li></li>
</ul>

有序号(块级标签)

<ul>
    <li></li>
    <li></li>
</ul>

2.7表格标签

<table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>name</th>
                <th>age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>S1001</td>
                <td>Zhang San</td>
                <td>19</td>
            </tr>
            <tr>
                <td>S1002</td>
                <td>Li Si</td>
                <td>20</td>
            </tr>
            <tr>
                <td>S1003</td>
                <td>Wang Wu</td>
                <td>21</td>
            </tr>
        </tbody>
    </table>

2.8input系列

<input type="">输入,自闭和标签,行内标签

type=text 文本输入框

type=password 密码框

type=file 选择文件框

type=radio 单选框 name标签一样就只能选一个

type=checkbox 复选框

type=button value=按钮内容--普通按钮

type=submit 也是按钮--提交表单

<div>
    <h3>输入内容</h3>
    <p>账号 <input type="text"></p>
    <p>密码 <input type="password"></p>
    <p>上传文件 <input type="file"></p>
    <p>您的性别 <input type="radio" name="gender">男 <input type="radio" name="gender">女</p>
</div>

2.9下拉框

<select>下拉框(单个)

<select mutiple>下拉框(多个)

2.10多行文本

<textarea rows=3>支持三行内容的多行文本输入框

案例:用户注册

网络请求的两种方式

GET请求和POST请求
GET请求【URL方法,表单方法】:输入地址、跳转链接、向后台传入数据数据会拼接在URL上
POST请求【表单方法】:向后台提交表单,数据不体现在URL中,体现在请求体中

@app.route('/register', methods=['GET'])

用form标签包裹内容,只有form包裹的内容可以被提交

<form method="get" action="/registersuccess">
    Account: <input type="text" name="account">
    Password: <input type="password" name="password">
    <input type="submit" value="Submit">
</form>

name提交的属性名,method提交的方式,action提交的地址。以GET的方式接收返回的结果,request.args是包含元组的列表

form flask import request
@app.route('/registersuccess', methods=['GET'])
def register_success():
    #接收结果
    print(request.args)
    #返回结果
    return render_template('register_success.html')

以POST的方式接收返回的结果,request.args是包含元组的列表,只有用户交互的标签才可以返回到后台

@app.route('/post_registersuccess', methods=['POST'])
def register_success():
    #接收结果
    print(request.form)
    #返回结果
    return render_template('post_register_success.html')

实例:用户注册表单

<form method="post" action="/post_registersuccess">
            <div>
                Account: <input type="text" name="account">
                Password: <input type="password" name="password">
                <br>
                Gender: 
                <input type="radio" name="gender" value="male">Male
                <input type="radio" name="gender" value="female">Female
            </div>
            <div>
                Favorite thing:
                <input type="checkbox" name="hobby" value="basketball">Basketball
                <input type="checkbox" name="hobby" value="football">Football
                <input type="checkbox" name="hobby" value="tennis">Tennis
                <input type="checkbox" name="hobby" value="Reading">Reading
            </div>
            <div>
                From city:
                <select name="city">
                    <option value="Shanghai">Shanghai</option>
                    <option value="Nanjin">Nanjin</option>
                    <option value="Shaanxi">Shaanxi</option>
                </select>
            </div>
            <div>
                Skills:
                <select multiple name="skill">
                    <option value="p">Programing</option>
                    <option value="a">Arting</option>
                    <option value="m">Managing</option>
                </select>
            </div>
            <div>
                Tips:<textarea name="tips" rows="2"></textarea>
            </div>
            <input type="submit" value="Submit">
        </form>

获得用户返回的值,单个用get,多个用getlist

request.form.get("name")

根据用户的请求方式返回页面(将submit也发送到/register)

@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == "GET":     #将POST请求和GET请求都发送到这个地址,然后根据请求方式的不同展示不同页面
        return render_template('register.html')
    else:
        account = request.form.get("account")
        password = request.form.get("password")
        gender = request.form.get("gender")
        hobby = request.form.getlist("hobby")
        city = request.form.get("city")
        skill = request.form.getlist("skill")
        return 'success'

相同的请求,例如登录和返回成功,注册和返回成功可以放在一个页面,不同的功能不要放在同一个页面

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == "GET":
        return render_template('login.html')
    else:
        return 'login success'
posted on 2024-02-16 13:21  树深时见鹿nnn  阅读(28)  评论(0编辑  收藏  举报