目的: 开发一个平台(网站)
– 前端开发: 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:
- 标题格式:
-
- html格式:
<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()
1.2 深入学习: 基于django框架(主要)
1.1 快速开发网站
pip install flask