python-web开发[10]之初始前端

最新推荐文章于 2024-03-11 17:37:40 发布

Jasminexjf

最新推荐文章于 2024-03-11 17:37:40 发布

阅读量2.2k

点赞数

分类专栏： web开发系列 Python学习文章标签： python 前端 flask

本文链接：https://blog.csdn.net/Jasminexjf/article/details/127458283

版权

Python学习同时被 2 个专栏收录

72 篇文章 2 订阅

订阅专栏

web开发系列

8 篇文章 3 订阅

订阅专栏

目的：开发一个平台(网站)
– 前端开发： HTML CSS JAVASCRIPT
– WEB框架：接受请求并处理
– MYSQL数据库：存储数据
1.1 快速上手：基于falsk web框架快速搭建一个网站

步骤1: 编写python代码
步骤2: 运行该py文件，然后点击下面的地址，跳转到浏览器，然后将“/show/jasminexjf/info”粘贴在上述地址的后缀。即可正确显示
步骤3: 该py文件一经执行，该网页就会一直存在。如果要消灭该网页不存在访问可能性，需要点击“红色方框”执行。
优化1：别人的网站 v.s. 自己写的朴素网站 – 简单排列，没有编排，没有字体区别。可在return中变更

return "这是<sapn style='color:red;'>Jasminexjf</span>的个人网站，欢迎来到<h1>我的频道</h1>"

结果如右👉：在这里插入图片描述

优化2: flask为了让我们写标签方便，可以支持将字符串写入文件中

from flask import Flask,render_template
app = Flask(__name__)
# 创建了网站/show/jasminexjf/info 和函数index的对应关系
# 以后用户在浏览器上访问 /show/jasminexjf/info 网站自动执行 index函数
@app.route("/show/jasminexjf/info")
def index():
    #  练习1：简单在浏览器页面上返回如下的字符串
    # return "这是<sapn style='color:red;'>Jasminexjf</span>的个人网站，欢迎来到<h1>我的频道</h1>"
    
    #  练习2： flask内部会自动打开templates文件夹，然后寻找相应的文档，并读取相应的内容进行展示返回给用户。
    #  default： 去当前项目目录的templates文件夹中寻找，可以修改寻找的目标文件夹名
    return render_template("jasminexjf001.html")
if __name__ == "__main__":
    app.run()

优化3: 学习浏览器能识别的<><>标签类型 — HTML标签(超文本传输语言)
- html格式：
  - head：包含meta编码定义、title定义(网页顶部的title)
  - body:
    - 标题格式
      ：

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>七级标题</h6>
</body>

     - **div span格式**

div: 一个人占一行[块级标签] (h标签也属于块级标签，一人占一行)
sapn: 自己有多大占多大[行内标签][内联标签]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习web开发</title>
</head>
<body>
    这是<h1>Jasminxejf</h1>的学习网站
    欢迎<h2>您</h2>来到我的<h3>频道</h3>
    <div>独自成一行1.0</div><div>独自成一行2.0</div>
    <sapn>独自成一行1.0</sapn><span>独自成一行2.0</span>
</body>
</html>

在这里插入图片描述

课程小结练习：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>学习web开发</title>
  </head>
  <body>
    <h1>中国运营商</h1>
    <div>
      <span style="color: red">发布时间：</span><span>2022-07-02 14:00</span>
    </div>
    <div>
      <span style="color: green">发布地点：</span><span>浙江省杭州市余杭区</span>
    </div>
    <h2>中国电信</h2>
    <div>
      这是中国电信的简介发展史：
    </div>
    <h2>中国移动</h2>
    <div>
      这是中国移动的简介发展史：
    </div>
    <h2>中国联通</h2>
    <div>
      这是中国联通的简介发展史：
    </div>
    <h2>中国铁塔</h2>
    <div>
      这是中国铁塔的简介发展史：
    </div>
  </body>
</html>

在这里插入图片描述

     - **超链接[行内标签]**

<a href = "https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E7%94%B5%E4%BF%A1%E9%9B%86%E5%9B%A2%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8/22287068">中国电信百度百科</a>
<a href = "https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E7%A7%BB%E5%8A%A8%E9%80%9A%E4%BF%A1%E9%9B%86%E5%9B%A2%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8/22294049">中国移动百度百科</a>
<a href = "https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E8%81%94%E5%90%88%E7%BD%91%E7%BB%9C%E9%80%9A%E4%BF%A1%E9%9B%86%E5%9B%A2%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8/501999">中国联通百度百科</a>
<a href = "https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E9%93%81%E5%A1%94%E8%82%A1%E4%BB%BD%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8/15764675">中国铁塔百度百科</a>

<a href = "http://127.0.0.1:5000/show/jasminexjf/info">点击跳转个人学习网站</a>
<a href = "/show/jasminexjf/info">点击跳转个人学习网站</a>

新增target参数
<a target="_blank" href = "http://127.0.0.1:5000/show/jasminexjf/info">点击跳转个人学习网站</a>

课程练习

from flask import Flask,render_template
app = Flask(__name__)
# 创建了网站/show/jasminexjf/info 和函数index的对应关系
# 以后用户在浏览器上访问 /show/jasminexjf/info 网站自动执行 index函数
@app.route("/show/jasminexjf/info")
def show():
    #  练习1：简单在浏览器页面上返回如下的字符串
    # return "这是<sapn style='color:red'>Jasminexjf</span>的个人网站，欢迎来到<h1>我的频道</h1>"
    
    #  练习2： flask内部会自动打开templates文件夹，然后寻找相应的文档，并读取相应的内容进行展示返回给用户。
    #  default： 去当前项目目录的templates文件夹中寻找，可以修改寻找的目标文件夹名
    return render_template("jasminexjf001.html")

@app.route("/getnew/jasminexjf/info")
def getnew():
    return render_template("jasminexjf002.html")

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

     - **图片[行内标签]**

# 外部网站的图片地址
<img src = "https://pic2.zhimg.com/80/v2-1f9b5ff05a650baa572bce36b0ba0c05_1440w.jpg"/>
# 自有目录上的图片地址(自有图片存储在static目录下)
<img src = "/static/test2.png"/>
# 图片风格设置
# 像素风格设置：
<img src = "https://pic2.zhimg.com/80/v2-1f9b5ff05a650baa572bce36b0ba0c05_1440w.jpg" style="height:300px;width:500px;"/> 
# 长宽百分比设置：
<img src = "https://pic2.zhimg.com/80/v2-1f9b5ff05a650baa572bce36b0ba0c05_1440w.jpg" style="height:10%;width:20%;"/>

     - 图片和超链接结合

<a target="_blank"href = "http://127.0.0.1:5000/show/jasminexjf/info">
  <img src = "https://pic2.zhimg.com/80/v2-1f9b5ff05a650baa572bce36b0ba0c05_1440w.jpg" style="height:10%;width:20%;"/>
</a>

     - 列表标签

# 无序列表
<ul>
  <li>中国移动</li>
  <li>中国联通</li>
  <li>中国电信</li>
  <li>中国铁塔</li>
</ul>
# 有序列表
<ol>
  <li>中国移动</li>
  <li>中国联通</li>
  <li>中国电信</li>
  <li>中国铁塔</li>
</ol>

     - 表格标签 【附属 案例】

<table>
    <thead>
      <tr> <th>id</th> <th>name</th> <th>age</th> </tr>
    </thead>
  
    <tbody>
      <tr> <th>001</th> <th>jane</th> <th>12</th> </tr>
      <tr> <th>002</th> <th>bob</th> <th>15</th> </tr>
      <tr> <th>003</th> <th>june</th> <th>14</th> </tr>
      <tr> <th>004</th> <th>july</th> <th>16</th> </tr>
      <tr> <th>005</th> <th>may</th> <th>18</th> </tr>
    </tbody>
</table>

     - input系列

<h2>搜索框输入系列</h2>
# 输入文本内容，常见的页面搜索框
     <input type="text">  
# 场景的平台登录 输入密码
     <input type="password"> 
# 选择文件上传
     <input type="file"> 
#以下两个实现单项选择，name必须一致，否则可多选
     <input type="radio" name="gender">男   
     <input type="radio" name="gender">女
# 以下实现可多个同时选择的 复选框
     <input type="checkbox">篮球   
     <input type="checkbox">足球
     <input type="checkbox">羽毛球
     <input type="checkbox">高尔夫
# 普通的按钮1: 点击提交/登录等button
     <input type="button" value="提交">
# 可提交表单的按钮2: 
     <input type="submit" value="提交">
# 指定输入多行文本
<textarea rows="6"> </textarea>

     - 下拉框系列

<select> # 单选
        <option>中国电信</option>
        <option>中国移动</option>
        <option>中国联通</option>
        <option>中国铁塔</option>
</select>

<select multiple>  # 多选
        <option>中国电信</option>
        <option>中国移动</option>
        <option>中国联通</option>
        <option>中国铁塔</option>
</select>

案例2: 用户注册
一些小总结
- 1、
- 2、一大堆标签
- 3、网络请求 【案例3: 非常完善的一个请求、获取数据的案例】
  - get请求、跳转、向后台传入数据会把会把请求需要的数据带到url上，并用?与参数整体进行分割，每个参数之间用&进行分割区分 (可以 url方法/表单提交方法实现)
  - post请求，不会将数据带到url上(比如平台登录校验时，并不带用户填写信息参数到url上。而通过【右键-检查】可以查找) (只能通过表单提交方法实现)
  - 提交表单的实现方法
    - form标签包含要提交的采集内容模块、submit信息
    - form标签内，可以定义get/post的method，然后指定要将信息提交的地址action
      - 如果选择get方法发送表单提交信息，在form中每个参数都需要指定name
- 4、总结性概述：
  - 上述文中实战中提到的标签 - html标签(超文本传输语言)
  - html标签有默认的方法和格式参数，但是是可以定义修改的
  - 上述html标签不是只能与flask进行融合使用，还有其他框架也可搭配使用。
  - html与编程语言无关。只要是写网站，做web开发，都要通过编程语言与html配合
    - java + html
    - c + html
    - python + html
    - php + html
  - html标签不止上述这些，还有很多。但上述已经包含了日常开发的90%标签。
案例3：案例主函数、两个html文件 + 一个主py函数

# 主py函数
from flask import Flask,render_template,request
app = Flask(__name__)

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

@app.route("/getregister/jasminexjf/info",methods = ["GET","POST"])
def getregister():
    if request.methods == 'GET':
        # 1.接收到用户通过get方法传递过来的信息
        print(request.args)
        # 2.给用户返回结果
        return render_template("jsaminexjf_regesiter02.html")
    else:
        return "注册成功"

@app.route("/postregister/jasminexjf/info",methods = ["POST"])
def postregister():
    # 1.接收到用户通过post方法传递过来的信息
    print(request.form)
    # 1.1 逐一获取用户填写的信息
    user = request.form.get("user")
    key = request.form.get("key")
    gender = request.form.get("gender")
    hobby = request.form.getlist("hobby")
    city = request.form.get("city")
    skill = request.form.getlist("skill")
    more = request.form.get("more")
    input_file = request.form.get("input_file")
    print(user,key,gender,hobby,city,skill,more,input_file)
    # 1.2 将用户提交的信息写入文件/数据库表中，然后用户登记注册

    # 2.给用户返回结果
    return "恭喜您，注册成功"

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