Flask学习以及前端应用

WUJI02

已于 2024-06-24 04:29:39 修改

阅读量310

点赞数 3

分类专栏：裁判文书大模型文章标签： flask 学习前端 css html

于 2024-06-24 04:17:24 首次发布

本文链接：https://blog.csdn.net/weixin_62628808/article/details/139910478

版权

裁判文书大模型专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Flask学习

一.安装

pip install flask

二.创建项目

from flask import Flask, render_template

app = Flask(__name__)

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

@app.route("/get/news")
# 函数名要进行修改
def get_news():
    # 默认去当前项目目录的templates文件夹中区找
    return render_template("news.html")

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

三.前端页面

3.1 div和span

div：一个人占一整行【块级标签】

span：自己多大占多少【行内标签】

<div>
    hello
</div>
<span>world!</span>

3.2 图片

自闭和标签

<img src="图片地址" />

关于设置图片的高度和宽度

<img src="图片地址" style="height:100px;width:200px" />
<img src="图片地址" style="height:10%;width:20%" />
<!-- 百分号用width可以进行等额变换-->

3.3 表格

<table border="1">
    <thead>
    <tr> <th>ID</th> <th>姓名</th> <th>爱好</th></tr>
    </thead>
    <tbody>
    <tr> <td>1</td> <td>ldm</td> <td>22</td></tr>
    </tbody>
</table>

3.4 表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户列表</h1>
<Table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>头像</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>详情</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            1
        </td>
        <td>
            <img src="/static/a1.jpeg" alt="" style="height: 50px">
        </td>
        <td>ldm</td>
        <td>www.com</td>
        <td>
            <a href="/get/news">点击查看详情</a>
        </td>
        <td>shit</td>
        <td>编辑 删除</td>
    </tr>
    <tr>
        <td>
            1
        </td>
        <td>
            <img src="/static/a1.jpeg" alt="" style="height: 50px">
        </td>
        <td>weh</td>
        <td>www.com</td>
        <td>
            <a href="/get/news">点击查看详情</a>
        </td>
        <td>shit</td>
        <td>编辑 删除</td>

    </tr>
    </tbody>
</Table>

</body>
</html>

3.5 input系列

<input typr="text" />
<input type="password">
<input type="file">
<!--单选框name相同的只能二选一-->
<input type="radio" name="h1">男
<input type="radio" name="h1">女
<!--复选框-->
<input type="checkbox" >ldm
<input type="checkbox">weh
<input type="checkbox">zw
<!--提交按钮-->
<input type="button" value="提交">    -->普通按钮
<input type="submit" value="提交">    -->提交表单

3.6 下拉框

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

</select>

3.7 多行文本

<!--写五行数据-->
<textarea rows="5"></textarea>

四. 网络请求

GET请求

现象：GET请求、跳转、向后台传入数据会拼接在URL上

注意：GET请求数据会在URL中体现

POST请求

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

五. form表单提交

页面上的数据想要提交到后台：

form标签包裹要提交的数据
- 提交方式：method=“get”
- 提交的地址：action=“/xxx/xxx/xx”
- 在form标签里面必须有一个submit标签
在form里面的一些标签：input、select、textarea

以GET方式提交

@app.route("/do/reg", methods=["GET"])
def do_register():
    # 接受数据
    print(request.args)
    return "注册成功"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
    <h1>用户注册</h1>

    <form method="get" action="/do/reg">
        用户名：<input type="text" name="user">
        密码：<input type="password" name="pwd">
        <input type="submit" value="submit提交">
    </form>
</body>
</html>

以POST方式提交

@app.route("/post/reg", methods=["POST"])
def post_register():
    # 接受数据
    print(request.form)
    return "POST注册成功"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
    <h1>用户注册</h1>

    <form method="post" action="/post/reg">
        用户名：<input type="text" name="user">
        密码：<input type="password" name="pwd">
        <input type="submit" value="submit提交">
    </form>
</body>
</html>

六.CSS样式

css、专门用来美化标签

1.css应用方式

1.在标签上应用

<div style="color:red;">中国</div>

2.在head标签中写style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>
<h1 class="c1">用户注册</h1>

<form method="post" action="/login">
    用户名：<input type="text" name="user">
    密码：<input type="password" name="pwd">
    <div>
        性别：
        <input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="2">女

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

3.写到文件中

最好是放到/static目录中，然后引用，文件格式为“样式表”（英语为stylesheet）

.c1{
    height:100px;
}

.c2{
    color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="commom.css" />
</head>
<body>
<h1 class="c1">用户注册</h1>
<h1 class="c2">用户注册</h1>
</body>
</html>

2.CSS选择器

在style中设置可以为固定标签设置统一的style

1.类选择器

选择的时候适用于就近原则，在style中的定义中，相同的color最终使用的是定义偏下的那一个

如果不想被覆盖想提升优先级：color:red !important;

.c1{
    height:100px;
}

2.id选择器（很少使用，因为在文件中只能有一个id，不可重复）

#c1{
    height:100px;
}
<div id="c1">
    niaho!
</div>

3.属性选择器

input[type='text']{
    border: 1px solid red;
}

.v1[xx="456"]{
    color:gold;
}
<input type="text">

<div class="v1" xx="123"></div>
<div class="v1" xx="456"></div>
<div class="v1" xx="789"></div>

4.后代选择器

.yy li{
    color:pink;
}
.yy > a{       //代表只有儿子中才会使用
    color:dodgerblue;
}
<div class="yy">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>

3.样式

1.高度和宽度

.c1{
    height:300px;
    width:500px;
}

注意事项

宽度支持百分比，高度不支持
行内标签：默认无效
块级标签：默认有效（而且右侧即使是空白也不会给其他占用）

2.块级和行内标签

块级
行内
css样式：标签->display:inline-block

利用display可以实现块级和行内标签的转换

3.字体和颜色

颜色
大小
加粗
字体格式

.c1{
    color:red;
    font-size:58px;
    font-weight:600;
    font-family: Microsoft Yahei;
}

4.文字对齐方式

text-align: center; /*水平方向居中*/
line-height: 59px; /*垂直方向居中*/

WUJI02

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Flask学习以及前端应用

选择的时候适用于就近原则，在style中的定义中，相同的color最终使用的是定义偏下的那一个。最好是放到/static目录中，然后引用，文件格式为“样式表”（英语为stylesheet）在form里面的一些标签：input、select、textarea。现象：GET请求、跳转、向后台传入数据会拼接在URL上。提交的地址：action=“/xxx/xxx/xx”在style中设置可以为固定标签设置统一的style。现象：提交数据不会再URL中体现，而是在请求体中。注意：GET请求数据会在URL中体现。
复制链接

扫一扫