一、初识网站
flask，轻量级框架
django，重武器，内部提供了很多方面的工具
1）安装flask》pip install flask
验证flask是否安装成功》from flask import Flask，当导入flask包没有任何报错时，表示flask已经安装成功了。
2）安装flask-sqlalchemy包
flask-sqlalchemy包是为 Flask 应用增加的 SQLAlchemy 支持的扩展。
SQLAlchemy是Python编程语言下的一款开源软件。提供了SQL工具包及对象关系映射（ORM）工具，SQLAlchmy采用了类似于Java里Hibernate的数据映射模型，2006发行后成为Python社区中最广泛使用的ORM工具之一，不亚于Django的ORM框架。
先安装sqlalchemy，打开windows的命令行：pip install sqlalchemy
3）然后安装flask-sqlalchemy》pip install flask-sqlalchemy
验证flask-sqlalchemy是否安装成功》如果导入包时没有任何报错，表示安装成功
pycharm》新建项目》pythonFlask》app.py
from flask import Flask
app = Flask(__name__)
# http://127.0.0.1:5000/index
@app.route("/index")
def index():
return "你好"
# http://127.0.0.1:5000/login
@app.route("/login")
def login():
return "hello"
if __name__ == '__main__':
app.run()
运行
D:\anaconda3\python.exe D:/project-pycharm/pythonFlask/app.py
* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
浏览器打开http://127.0.0.1:5000/
http://127.0.0.1:5000/index
http://127.0.0.1:5000/login
二、前端部分
1、HTML（超文本标记语言），标签
a
p
div
2、CSS，样式
style='color:red;'
3、JavaScript，页面的动态效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
你<h1 style='color:red;'>好{{n1}}</h1> <a href='https://www.baidu.com'>百度</a>
<input type="button" value="点我" onclick="clickMe()" />
<script>
function clickMe(){
alert(123);
}
</script>
</body>
</html>
4、模块+框架的基础上来进行开发 https://v3.bootcss.com/css
三、HTML标签
3.1、三种打开方式
1）通过网站去运行（项目最终的运行方式）
2）通过本地网站运行（本地打开+Pycharm）
3）其他方式（本地文件打开）
3.2、标签
1）head标签
<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 修改Title名称 -->
<title>大米商城</title>
<!-- Title上加入图表 -->
<link rel="icon" href="favicon.ico">
<!-- 加入关键字 -->
<meta name="keywords" content="Xiaomi,redmi,Xiaomi11 Ultra,Redmi Note 9,Xiaomi MIX Alpha,小米商城">
<!-- 加入网页简介 -->
<meta name="description" content="小米官网直营小米公司旗下所有产品，包括Xiaomi手机系列Xiaomi 11 Ultra、MIX FOLD，Redmi 红米系列Redmi Note 9、Redmi K40 Pro，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持.">
</head>
<body>
<a>asdfghjkl</a>
</body>
</html>
2）body标签分类
块级标签：“霸道标签”，一个标签占一行，例如：<h1>中国</h1>
常见的有：h1，div，table，ul，ol
行内标签：“温顺”，自己有多到就占多大，例如：<a href="">中国梦</a>
常见的有：a，span，img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>中国</h1>
<a href="">中国梦</a>
</body>
</html>
3.3 div和span标签
没有任何的自带的特效，非常素 。
后期学习CSS样式后+div素的标签，构造很多的其他的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- <h1>中国</h1>-->
<!-- <a href="">中国梦</a>-->
<!-- 使用CSS修饰，背景颜色为红色，内容颜色为白色-->
<div style="background-color: red;color: white">北京</div>
<div>上海</div>
<div>深圳</div>
<span>河北</span>
<span>廊坊</span>
<span>石家庄</span>
</body>
</html>
3.4h系统
h1-h6，标签，标题
CSS加入效果
3.5 a标签
超链接，网站点击跳转。
<!-- a标签为超链接标签，点击内容跳转到相应地址-->
<a>思江-博客园</a>
<!-- 跳转到当前页面-->
<a href="https://www.c.com/liunaixu/">思江-博客园</a>
<!-- 跳转到其他页面-->
<a href="https://www.cs.com/liunaixu/" target="_blank">思江-博客园</a>
锚点：在网页地址里有#代表使用了a标签的锚点，使用如下
<h1>目录</h1>
<a href="#n1">第1节：XXXX故事</a>
<a href="#n2">第2节：XXXX故事</a>
<a href="#n3">第3节：XXXX故事</a>
<a href="#n4">第4节：XXXX故事</a>
<div id="n1" style="background-color: bisque;height: 1000px">第1节：我看了好几个测评，直线8/90满配那种 好家伙，各种双爆攻击的，石化打控制的 就只看到一个是堆了4w4血的 我寻思钟离怎么看都是个纯堆血套盾辅助啊？要攻击干嘛？ 我现在钟离只有1级，但可以看到血量是所有1级角色里...</div>
<div id="n2" style="background-color: red;height: 1000px">第2节：我看了好几个测评，直线8/90满配那种 好家伙，各种双爆攻击的，石化打控制的 就只看到一个是堆了4w4血的 我寻思钟离怎么看都是个纯堆血套盾辅助啊？要攻击干嘛？ 我现在钟离只有1级，但可以看到血量是所有1级角色里...</div>
<div id="n3" style="background-color: brown;height: 1000px">第3节：我看了好几个测评，直线8/90满配那种 好家伙，各种双爆攻击的，石化打控制的 就只看到一个是堆了4w4血的 我寻思钟离怎么看都是个纯堆血套盾辅助啊？要攻击干嘛？ 我现在钟离只有1级，但可以看到血量是所有1级角色里...</div>
<div id="n4" style="background-color: pink;height: 1000px">第4节：我看了好几个测评，直线8/90满配那种 好家伙，各种双爆攻击的，石化打控制的 就只看到一个是堆了4w4血的 我寻思钟离怎么看都是个纯堆血套盾辅助啊？要攻击干嘛？ 我现在钟离只有1级，但可以看到血量是所有1级角色里...</div>
3.6 img标签
显示图片
<!-- 显示图片 ：img src="图片地址"-->
<!--读取网路地址：有时候遇到无法展示的图片（网页加取防盗链）-->
<img src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF" />
<!--读取本地地址：注意路径../表示上一级目录开始找-->
<img src="../image/1.jpg" />
执行结果如下
<!-- 设置图片大小：style,只设置一个值按照等比例放缩-->
<img src="../image/1.jpg" style="width: 200px"/>
<!-- 设置图片大小：style,设置两个值-->
<img src="../image/1.jpg" style="width: 200px;height: 200px"/>
3.7 表格
需求制作一个类似于Excel的表格，如下
代码如下
执行结果如下
格式化代码，使其更规范
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- 加入边框border-->
<table border="1">
<!-- 制作表头-->
<thead>
<!-- 表头第一行，列名称-->
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<!-- 表体里内容 -->
<tr>
<th>001</th>
<th>liusijiang1</th>
<th>31</th>
</tr>
<tr>
<th>002</th>
<th>liusijiang2</th>
<th>32</th>
</tr>
<tr>
<th>003</th>
<th>liusijiang3</th>
<th>33</th>
</tr>
<tr>
<th>004</th>
<th>liusijiang4</th>
<th>34</th>
</tr>
<tr>
<th>005</th>
<th>liusijiang5</th>
<th>35</th>
</tr>
</tbody>
</table>
</body>
</html>
在excel中有合并单元格的操作，在代码中使用colspan合并列和rowspan合并行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- 加入边框border-->
<table border="1">
<!-- 制作表头-->
<thead>
<!-- 表头第一行，列名称-->
<tr>
<!-- 使用colspan合并3列-->
<th colspan="3">人员信息表</th>
</tr>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<!-- 表体里内容 -->
<tr>
<th>001</th>
<th>liusijiang1</th>
<th>31</th>
</tr>
<tr>
<th>002</th>
<th>liusijiang2</th>
<th>32</th>
</tr>
<tr>
<th>003</th>
<th>liusijiang3</th>
<th>33</th>
</tr>
<tr>
<th>004</th>
<th>liusijiang4</th>
<!-- 使用rowspan合并2行-->
<th rowspan="2">34</th>
</tr>
<tr>
<th>005</th>
<th>liusijiang5</th>
</tr>
</tbody>
</table>
</body>
</html>
运行结果如下：
3.8 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--没有序号的列表-->
<ul>
<li>北京</li>
<li>上海</li>
<li>北乌鲁木齐</li>
</ul>
<!--有序号的列表-->
<ol>
<li>北京</li>
<li>上海</li>
<li>北乌鲁木齐</li>
</ol>
</body>
</html>
运行结果如下：
标签的嵌套，来完成我们所需的功能：例如：点击图片跳转到一个连接里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的嵌套</title>
</head>
<body>
<!--点击图片跳转到一个新的连接-->
<a href="https://www.cs.com/liunaixu/">
<img src="../image/1.jpg" style="width: 200px" />
</a>
</body>
</html>
div展示嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的嵌套</title>
</head>
<body>
<div>
<!--点击图片跳转到一个新的连接-->
<a href="https://www.cs.com/liunaixu/">
<img src="../image/1.jpg" style="width: 200px" />
</a>
<a href="https://www.cs.com/liunaixu/">
<img src="../image/1.jpg" style="width: 200px" />
</a>
</div>
<div>
<a href="https://www.cs.com/liunaixu/">
<img src="../image/1.jpg" style="width: 200px" />
</a>
</div>
</body>
</html>
以上都是用来做数据的展示，不包含交互的功能（输入内容，例如搜索功能）
3.9 input输入功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input系列</title>
</head>
<body>
<!--文本框text-->
<input type="text" />
<!--密码框password-->
<input type="password" />
<!--复选框-->
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<!--单选框：二选一的情况要加入相同的属性如：name="n"-->
<input type="radio" name="n"/>
<input type="radio" name="n"/>
<!--上传文件-->
<input type="file">
</body>
</html>
3.10 下拉框：select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--使用select展示下拉框-->
<select>
<option>北京</option>
<option>上海</option>
<option>新疆</option>
<option>呼和浩特</option>
</select>
<!--使用multiple选择多个选项-->
<select multiple>
<option>北京</option>
<option>上海</option>
<option>新疆</option>
<option>呼和浩特</option>
</select>
</body>
</html>
运行结果
3.11 多行文本框：testarea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--textarea多行文本框：rows控制行数，cols控制列数-->
<textarea cols="5" rows="5"></textarea>
</body>
</html>
运行结果
注意：对于用于用户交互的标签来说，如果想要将数据提交到某个地方，需要将这些全部包括在form标签中。
根据method的不同（get、post），数据传递的方式不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.cs.com/liunaixu/" method="get">
<input type="text" name="v1">
<input type="password" name="v2">
<input type="submit" value="提交">
</form>
</body>
</html>
当method=“get”把参数放在url上如下所示：
当method="post"把参数隐藏传递，如下所示可以找到提交的参数：
总结：想要提交数据必须具备三要素：
1）form标签需要将用户交互的标签包裹。
2）需要type="submit"按钮，来出发提交表单的动作。
3）内部用户交互的标签必须有name属性，以利于传参，form标签必须有action（代表提交地址）、method（提交方式get/post）
四、4.1 案例：米商城
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<a href="https://www.mi.com/index.html">小米商城</a>
<a href="https://home.miui.com/" target="_blank">MIUI</a>
<a href="https://iot.mi.com/" target="_blank">IoT</a>
<a href="https://www.mi.com/index.html" target="_blank">云服务</a>
</div>
<div>
<!-- 将搜索框放到一行里 方案二：-->
<form action="https://www.mi.com/index.html" method="get">
<a href="https://www.mi.com/index.html">
<img src="../image/favicon.ico" style="height: 40px;">
</a>
<a href="https://www.mi.com/index.html">小米手机</a>
<a href="https://www.mi.com/index.html">红米手机</a>
<a href="https://www.mi.com/index.html">电视</a>
<a href="https://www.mi.com/index.html">笔记本</a>
<!-- 将搜索框放到一行里 方案一：<form action="https://www.mi.com/index.html" method="get" style="display: inline">-->
<input type="text" placeholder="请输入关键字" name="keyword" />
<input type="submit" value="搜索" />
</form>
</div>
</body>
</html>
4.2 案例：米商城的网站版
关于图片的处理：
1）本地方式打开，图片可以放在任意目录，html引入时，根据相对路径引入。
2）Flask网站打开：
文件存储位置，必须在static目录。
在HTML中引入时，必须/static/图片名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
</head>
<body>
<div>
<a href="https://www.mi.com/index.html">小米商城</a>
<a href="https://home.miui.com/" target="_blank">MIUI</a>
<a href="https://iot.mi.com/" target="_blank">IoT</a>
<a href="https://www.mi.com/index.html" target="_blank">云服务</a>
</div>
<div>
<!-- 将搜索框放到一行里 方案二：-->
<form action="https://www.mi.com/index.html" method="get">
<a href="https://www.mi.com/index.html">
<img src="../static/favicon.ico" style="height: 40px;">
</a>
<a href="https://www.mi.com/index.html">小米手机</a>
<a href="https://www.mi.com/index.html">红米手机</a>
<a href="https://www.mi.com/index.html">电视</a>
<a href="https://www.mi.com/index.html">笔记本</a>
<!-- 将搜索框放到一行里 方案一：<form action="https://www.mi.com/index.html" method="get" style="display: inline">-->
<input type="text" placeholder="请输入关键字" name="keyword"/>
<input type="submit" value="搜索"/>
</form>
</div>
</body>
</html>
运行app.py结果如下：
案例：米商城的网站版+提交搜索数据
1）在index.html页面中编辑要跳转到的页面地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
</head>
<body>
<div>
<a href="https://www.mi.com/index.html">小米商城</a>
<a href="https://home.miui.com/" target="_blank">MIUI</a>
<a href="https://iot.mi.com/" target="_blank">IoT</a>
<a href="https://www.mi.com/index.html" target="_blank">云服务</a>
</div>
<div>
<!-- 将搜索框放到一行里 方案二：-->
<form action="http://127.0.0.1:5000/search" method="get">
<a href="https://www.mi.com/index.html">
<img src="../static/favicon.ico" style="height: 40px;">
</a>
<a href="https://www.mi.com/index.html">小米手机</a>
<a href="https://www.mi.com/index.html">红米手机</a>
<a href="https://www.mi.com/index.html">电视</a>
<a href="https://www.mi.com/index.html">笔记本</a>
<!-- 将搜索框放到一行里 方案一：<form action="https://www.mi.com/index.html" method="get" style="display: inline">-->
<input type="text" placeholder="请输入关键字" name="keyword"/>
<input type="submit" value="搜索"/>
</form>
</div>
</body>
</html>
2）在app.py 中编辑search函数
from flask import Flask,render_template,request
app = Flask(__name__)
# http://127.0.0.1:5000/index
@app.route("/index")
def index():
return render_template('index.html')
# http://127.0.0.1:5000/search
# http://127.0.0.1:5000/search?keyword=111
@app.route("/search")
def search():
# 获得要搜索的关键字，从网页中输入数据传递给python
data = request.args.get('keyword')
print(data)
# 数据集中根据关键字搜索到数据，在页面上展示
db1 = "中国移动河北分公司"
db2 = "中国移动北京分公司"
return render_template("search.html",v1=db1,v2=db2)
if __name__ == '__main__':
app.run()
3）创建search.htnl页面，并编辑页面页面展示的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>搜索结果</h1>
<ul>
<li>{{v1}}</li>
<li>{{v2}}</li>
</ul>
</body>
</html>
4.3 案例：XX管理平台
1）注册
用户输入基本信息，信息存储到文件中。
2）用户的列表
读取文件，在页面上展示所有的账户信息。
from flask import Flask,render_template,request,redirect
app = Flask(__name__)
# 注册界面
@app.route("/register")
def register():
return render_template('register.html')
# 提交的数据：
# 接收数据：http://127.0.0.1:5000/do/register?suer=%E5%88%98%E6%80%9D%E6%B1%9F&pwd=123&gender=%E7%94%B7&city=22&hobby=01&hobby=02&hobby=03&more=1234567890
@app.route("/do/register")
def do_register():
# 一、在URL中获取数据
username = request.args.get('user')
password = request.args.get('pwd')
gender = request.args.get('gender')
city = request.args.get('city')
# 因为爱好有多个，所以在获取时以列表形式获得
hobby = request.args.getlist('hobby')
more = request.args.get('more')
# 字符串格式化
line = "{}|{}|{}\n".format(username,password,gender)
# 二、将获取的数据写入文件:1、打开文件。2、写入数据。3、关闭文件。
file_object = open("db.txt",mode='a',encoding='utf-8')
file_object.write(line)
file_object.close()
# 打印所有传递过来的值
# print(request.args)
# return "执行了注册"
return redirect("/user/list")
# return render_template('register.html')
# http://127.0.0.1:5000/user/list
@app.route('/user/list')
def user_list():
# 1、读取文件中的所有用户
# 刘思江|123|男
# 赵丽颖|123|女
# ["刘思江|123|男","赵丽颖|123|女"]
data_list = [] # 设定一个空列表
file_object = open("db.txt",mode='r',encoding='utf-8') # 打开文件
for line in file_object:
line = line.strip() # 读取文件内容使用strip()去除换行符
data_list.append(line) # 向空列表中加入数据
data_list_list = [] # 设定一个空列表
file_object = open("db.txt", mode='r', encoding='utf-8') # 打开文件
for line in file_object:
line = line.strip() # 读取文件内容使用strip()去除换行符
data_list_list.append(line.split("|")) # 向空列表中加入数据,使用split()按照|进行分割
#[["刘思江",123,"男"],["赵丽颖",123,"女"]]
# 2、在页面中展示出来
return render_template('user_list.html',v1=data_list,v2=data_list_list)
return "用户列表"
if __name__ == '__main__':
app.run()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<form action="/do/register" method="get">
<div>用户名：<input type="text" placeholder="请输入用户名" name="user"></div>
<div>密码：<input type="password" placeholder="请输入密码" name="pwd"></div>
<div>性别：
<!-- value值的设定value="1"-->
男 <input type="radio" name="gender" value="男"/>
女 <input type="radio" name="gender" value="女"/>
</div>
<div>
所在城市：
<select name="city" id="11">
<option value="11">北京</option>
<option value="22">河北</option>
<option value="33">河南</option>
<option value="44">江苏</option>
<option value="55">内蒙古</option>
</select>
</div>
<div>
<!-- 如果选择了多个爱好传值方式：hobby=01&hobby=02-->
爱好：
篮球<input type="checkbox" name="hobby" value="01"/>
足球球<input type="checkbox" name="hobby" value="02"/>
乒乓球<input type="checkbox" name="hobby" value="03"/>
</div>
<div>
其他信息：<textarea name="more"></textarea>
</div>
<div>
<input type="submit" value="提交" />
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
</head>
<body>
<h1>用户列表</h1>
<ul>
<!-- <li>{{v1[0]}}</li>-->
<!-- <li>{{v1[1]}}</li>-->
<!-- <li>{{v1[2]}}</li>-->
<!-- 如果列表中数据过多，不宜使用上面的方式，需要使用for循环读取数据-->
{% for item in v1%}
<li>{{item}}</li>
{% endfor %}
</ul>
<h1>用户表格</h1>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘思江</td>
<td>30</td>
<td>男</td>
</tr>
<tr>
<td>刘思江</td>
<td>31</td>
<td>男</td>
</tr>
<tr>
<td>刘思江</td>
<td>32</td>
<td>男</td>
</tr>
<!--使用for循环读取嵌套列表-->
{% for ele in v2%}
<tr>
<td>{{ele[0]}}</td>
<td>{{ele[1]}}</td>
<td>{{ele[2]}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
