python web笔记

目的：开发一个平台（网站）~ 前端开发：HTML、CSS、JavaScript~ Web框架：接收请求并处理~ Mysql数据库：存储数据的地方快速上手：基于Flask Web框架快速搭建一个网站出来深入学习：
基于Django（主要）

1.快速开放网站

pip install flask -i https://pypi.tuna.tsinghua.edu.cn/simple

from flask import Flaskapp = Flask(__name__) #创建类的对象#创建了网站 /show/info 和函数index（）的对应关系
#以后用户在浏览器上访问 /show/info，网站自动执行 index
@app.route("/show/info")
def index():return "中国联通"# return "heart.html" #返回 heart.html而不是网页所对应的内容if __name__ == '__main__':app.run()

2.HTML标签

2.1div和span

<div>内容</div>
<span>span标签</span>

div,一个人占一行（块级标签）
span,自己多大占多少（行内标签、内联标签）

2.2图片

Flask框架下显示本地所在图片~ 自己项目中创建：static目录（图片放在做个目录中）~ 引入图片<img src="/static/图片名称.jpg"(当前页面跳转)<img src="/static/图片名称.jpg" target="_blank">  (新的Tab页面打开)

2.3下拉框

下拉框（单选）
<select><option>上海</option><option>北京</option><option>南京</option>
</select>下拉框（多选）
<select multiple><option>上海</option><option>北京</option><option>南京</option>
</select>

2.4表单

<input text="file">

2.5多行文本

<textarea></textarea>

案例：用户注册

创建新项目

创建Flask代码

python代码

from flask import Flask,render_template,requestapp = Flask(__name__)
#将注册开始的页面和注册成功的页面进行一个整合
@app.route('/register',methods=['GET','POST'])
def register():if request.method =='GET':return render_template('register.html')else:username = request.form.get("username")passwd = request.form.get("passwd")sex = request.form.get("sex")hobby_list = request.form.getlist("hobby")  # 多个值city = request.form.get("city")skill_list = request.form.get("skill")  # 多个值more = request.form.get("more")print(username, passwd, sex, hobby_list, city, skill_list, more)# 保存到excel文件、数据库等等# 2.给用户返回结果return "注册成功"if __name__ == '__main__':app.run()

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title>
</head>
<body>
<h1>用户注册</h1>
<!--整合后-->
<form  method="post" action="/register">
<!-- <form method="post" action="/post/reg"> -->   <!--method get或者post方法   action 提交的地址--><div>用户名：<input type="text" name="username"></div><br><div>密码：<input type="password" name="passwd"></div><div>性别：<input type="radio" name="sex" value="man">男<input type="radio" name="sex" value="woman">女</div><div>爱好：<input type="checkbox" name="hobby" value="1">篮球<input type="checkbox" name="hobby" value="2">足球<input type="checkbox" name="hobby" value="3">乒乓球</div><div>城市：<select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="nanjing">南京</option></select></div><br><div>擅长领域：<select multiple name="skill"><option value="skill_1">打游戏</option><option value="skill_2">睡觉</option><option value="skill_3">吃饭</option><option value="skill_4">刷抖音</option></select></div><br><div>备注<textarea name="more"></textarea></div><br><div><!-- <input type="button" value="button按钮"> --> <!--普通的按钮--><input type="submit" value="submit按钮">  <!--提交表单--></div>
</form>
</body>
</html>

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

form标签包裹要提交数据的标签。
- 提交方式（method属性）：method=“get/post”
- 提交的地址(action属性)：action=“xxx/xxx/xx”
- 在form标签里面必须有一个< input text=“submit”> 标签

在form里面的一些标签：input/select/textarea

一定要写name属性 < input text=“submit” name=“xx”>

3.css样式

1.以文件形式写入
<link rel="stylesheet" href="/static/common.css">
2.直接在标签上写
<h1 style="{height:30px}">用户登录</h1>
3.写在head标签中
<style>.c1{height:30px;}
</style>
<h1 class="c1">用户登录</h1>

Flask框架的注意事项

每次修改之后性需要重新启动项目
规定有些文件必须要放在特定的文件夹
新建一个页面
- 函数
- HTML文件

4.属性选择器

<style>input[type='text']{border:1px solid red;}
</style>部分body代码
<input type="text">
<input type="password"> <!--添加css样式-->

注意：重复导致的覆盖问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.c1{border: 1px solid red;color: red !important; /*不让绿色覆盖红色*/}.c2{color: green ; }</style>
</head>
<body><div class="c1 c2">中国联通</div>
</body>
</html>

5.css样式深入学习

5.1高度和宽度

注意事项：

宽度，支持百分比
行内标签：默认无效
块级标签：默认有效

5.2块级标签和行内标签

display:inline-block (既具有行内标签的特性又具有块级标签的特性)
display:inline （转化为行内标签）
display:block （转化为块级标签）

5.3浮动（float）

如果你让标签浮动起来之后，就会脱离文档流。不让其脱离文档流，可以设置style=“clear:both;”。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a1{border: 1px solid red;width:80px;height:50px;float: left;}.a{background-color: aqua;}</style>
</head>
<body><div class="a"><div class="a1"></div><div class="a1"></div><div class="a1"></div><div style="clear: both;"></div> <!--使其不因为浮动而脱离文档流--></div>
</body>
</html>

总结

内容居中

文本居中，文本会在这个区域中居中。

<div style="width:180px;background-color: pink;text-align: center;">你好呀</div>

区域居中、自己有宽度+margin:0 auto;

<div style="width:1000px;margin: 0 auto;">你好呀</div>

父标签没有高度或没有宽度，会被子标签支撑起来。

5.4hover（伪类）

鼠标放在某个元素上显示某中效果。

5.5after（伪类）

在某个标签的内容后面追加某些内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1:after{content: "真漂亮呀！";}</style>
</head>
<body><div class="c1">唐嫣</div>
</body>
</html>

一些重要的应用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.clearfix:after{content: "";display: block;clear: both;  /*以上三行与下面的clear:both效果相同，都是为了避免使用float而导致的脱离文档流即清除浮动*/}</style>
</head>
<body><div class="clearfix"><div class="item">1</div><div class="item">2</div><div class="item">3</div><!-- <div style="clear:both"></div> --></div>
</body>
</html>

5.6position

fixed

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.back{position: fixed;width: 40px;height: 80px;border: 1px solid bisque;right: 50px;bottom: 80px;}</style>
</head>
<body>
<div style="height:1000px;background-color: #bf5758"></div>
<div class="back"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{padding: 0;margin: 0;}.dialog{position: fixed;height: 300px;width: 500px;background-color: white;left:0;right: 0;margin: 0 auto;top:200px;z-index: 1;}.mask{background-color: black;position: fixed;left: 0;top:0;right:0;bottom: 0;opacity: 0.7;/*透明度*/z-index: 0;/*层叠顺序*/}</style>
</head>
<body>
<div style="height:1000px;">asdffgajjjjjJjjJ</div>
<div class="mask"></div>
<div class="dialog"></div>
</body>
</html>

relative absolute 相对进行显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{width: 400px;height: 240px;border:1px solid orange;position: relative;}.c2{width: 50px;height: 50px;background-color:olivedrab;position: absolute;right: 0;top:0;}</style>
</head>
<body>
<div class="c1"><div class="c2"></div>
</div>
</body>
</html>

小米商城下载app

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0;margin: 0;}img {width: 100%;height: 100%;}.header {height: 40px;background: #333;font-size: 12px;}.header .lef {float: left;}.header .rig {float: right;}.header a {line-height: 40px;text-decoration: none;display: inline-block;color: #b0b0b0;}.header a:hover {color: white;}.site-header {height: 100px;}.container {width: 1226px;margin: 0 auto;}.site-header .container {height: 100px;}.site-header .ht {height: 100px;}.site-header .logo {width: 100px;float: left;}.site-header .menu-list {float: left;}.site-header .research {float: right;}.site-header .logo a {display: block;}.site-header .logo img {width: 56px;height: 56px;padding-top: 22px;}.site-header .menu-list a {line-height: 100px;text-decoration: none;padding: 26px 10px 38px;color: #333;font-size: 16px;}.site-header .menu-list a:hover {color: #ff6700;}.app{position: relative;}.app .download{position: absolute;width: 100px;height: 100px;display: none;}.app:hover .download{display: block;}</style>
</head>
<body>
<div class="header"><div class="container"><div class="lef"><a href="https://www.mi.com/">小米官网</a><a href="https://www.mi.com/">小米商城</a><a href="https://www.mi.com/">MIUI</a><a href="https://www.mi.com/">loT</a><a href="https://www.mi.com/">云服务</a><a href="https://www.mi.com/">天星数科</a><a href="https://www.mi.com/">有品</a><a href="https://www.mi.com/">小爱开放平台</a><a href="https://www.mi.com/">企业团购</a><a href="https://www.mi.com/">资质证件</a><a href="https://www.mi.com/">协议规则</a><a href="https://www.mi.com/" class="app">下载app<div class="download"><img src="/static/download.png"></img></div></a><a href="https://www.mi.com/">Select Location</a></div><div class="rig"><a href="https://www.mi.com">登录</a><a href="https://www.mi.com">注册</a><a href="https://www.mi.com">消息通知</a></div><div style="clear:both;"></div></div>
</div>
<div class="site-header"><div class="container"><div class="ht logo"><a href="https://www.mi.com/"><img src="/static/logo.png" alt=""></a></div><div class="ht menu-list"><a href="https://www.mi.com/">Xiaomi手机</a><a href="https://www.mi.com/">Redmi手机</a><a href="https://www.mi.com/">电视</a><a href="https://www.mi.com/">笔记本</a><a href="https://www.mi.com/">平板</a><a href="https://www.mi.com/">家电</a><a href="https://www.mi.com/">路由器</a><a href="https://www.mi.com/">服务中心</a><a href="https://www.mi.com/">社区</a></div><div class="ht research"></div><div style="clear: both;"></div></div>
</div>
</body>
</html>

6.Bootstrap框架

6.1导航（重写相关效果的代码）

6.2栅格系统

https://v3.bootcss.com/css/#grid

把整体划分成了12格

分类

响应式,根据屏幕大小

.col-sm-   750px
.col-md-   970px
.col-lg-   1170px

非响应式

<div class="col-xs-6">1</div>
<div class="col-xs-6">2</div>

列偏移

 <div class="row"><div class="col-md-4" style="background-color: green">.col-md-4</div><div class="col-md-4 col-md-offset-4" style="background-color: #2aabd2">.col-md-4 .col-md-offset-4</div>
</div>

6.3container 区域居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body><div class="container clearfix"> <!--clearfix避免float而脱离文档流 --><div class="col-sm-9" style="background-color: green">左边</div><div class="col-sm-3" style="background-color: #2aabd2">右边</div><!-- <div style="clear: both"></div>--> <!--避免float而脱离文档流--></div></body>
</html>

6.4面板

<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body">Panel content</div>
</div>
<div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body">Panel content</div>
</div>
<div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body">Panel content</div>
</div>

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
<div class="container clearfix"> <!--clearfix避免float而脱离文档流 --><div class="col-sm-9"><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODVhOTYxYzk4ZSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NWE5NjFjOThlIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus.</div></div><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODVhOTYxYzk4ZSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NWE5NjFjOThlIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus.</div></div><div class="media"><div class="media-left"><a href="#"><img class="media-object" data-src="holder.js/64x64" alt="64x64"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODVhOTYxYzk4ZSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NWE5NjFjOThlIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"data-holder-rendered="true" style="width: 64px; height: 64px;"></a></div><div class="media-body"><h4 class="media-heading">Media heading</h4>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Craspurus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputatefringilla. Donec lacinia congue felis in faucibus.</div></div><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul></nav></div><div class="col-sm-3"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body">Panel content</div></div><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body">Panel content</div></div><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body">Panel content</div></div></div>
</body>
</html>

6.5案例：用户登录

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.account {width: 500px;border: 1px solid #5bc0de;margin: 0 auto;margin-top: 200px;padding: 10px 20px;border-radius: 5px;box-shadow: 5px 5px 5px #aaa;display: none;}.click:hover .account{display: block;}.account h2 {text-align: center;}.a1 {margin-right: 45px;}.a2 {margin-right: 100px;}</style>
</head>
<body>
<div class="click"><button type="button" class="btn btn-primary btn-lg active">点我登录</button><div class="account"><h2>用户登录</h2><form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">QQ</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="请输入QQ号"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label class="a1"><input type="checkbox">自动登录</label><label class="a1"><input type="checkbox">记住密码</label><label class="a1"><input type="checkbox" style="display: none">找回密码</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary a2">安全登录</button><button type="submit" class="btn btn-primary a2">重置所有</button></div></div></form></div>
</div>
</body>
</html>

6.6案例：后台管理系统

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.navbar {border-radius: 0;}</style>
</head>
<body>
<div><!--导航--><nav class="navbar navbar-inverse"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">中国移动</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">中国联通 <span class="sr-only">(current)</span></a></li><li><a href="#">中国电信</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li></ul></div></div></nav><div class="container"><div class="panel panel-default"><div class="panel-heading">表单区域</div><div class="panel-body"><form class="form-inline"><div class="form-group"><label class="sr-only" for="exampleInputEmail3">Email address</label><input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"></div><div class="form-group"><label class="sr-only" for="exampleInputPassword3">Password</label><input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"></div><button type="submit" class="btn btn-success">保存</button></form></div></div><div class="panel panel-default"><div class="panel-heading">列表数据</div><table class="table table-bordered table-striped table-hover"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>操作</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td><a href="" class="btn btn-primary btn-xs">编辑</a><a href="" class="btn btn-danger btn-xs">删除</a></td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td><a href="" class="btn btn-primary btn-xs">编辑</a><a href="" class="btn btn-danger btn-xs">删除</a></td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td><a href="" class="btn btn-primary btn-xs">编辑</a><a href="" class="btn btn-danger btn-xs">删除</a></td></tr></tbody></table></div><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul></nav></div>
</div>
</body>
</html>

6.7图标

https://fontawesome.dashgame.com/

6.8Bootstrap依赖

Bootstrap依赖javascript的类库，jQuery

在页面上应用jquery
在页面上应用Bootstrap中的javaScript类库

7.JavaScript基础

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.whole{width: 500px;}.whole .header{background-color: gold;border: 1px solid azure;height: 100px;}</style>
</head>
<body><div class="whole"><div class="header" onclick="myFuc()">标题</div><div class="menus">内容</div><script type="text/javascript">function myFuc(){// alert("你好呀"); //警告框confirm("你好呀");  //确认框}var name="小李";   //定义变量console.log(name)  //在控制台输出变量</script></div>
</body>
</html>

7.1字符串类型

//声明
var name = "小亮";
var name = String("小亮");

//常见功能
var name = "中国联通 ";
var v1 = name.length;
var v2 = name[0];//没有-1    var v2= name.charAt(0); 功能相同
var v3 = name.trim();/*去除空格*/
var v4 = name.substring(0,2);  //切片 前取后不取

案例：跑马灯

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<span id="txt">欢迎各位领导莅临指导</span>
<script>function show(){//1.去HTML中找到某个标签并获取内容（DOM）var tag = document.getElementById("txt");var dataString = tag.innerText;//2.拿到第一个字符并且添加在最后面var firstString = dataString[0];var otherString = dataString.substring(1,dataString.length);var newString = otherString + firstString;//3.更新tag.innerText = newString;}//javascript中的定时器 ,1s执行一次show函数setInterval(show,1000);</script>
</body>
</html>

7.2数组（python-列表）

//定义
var v1 = [11,22,33,44];
var v1 = Array([11,22,33,44]);

//操作
var v1 =[11,22,33,44];
v1[1] //获取相关数据
v1[0] = "高倩";//重新赋值
v1.push("联通"); //在尾部追加  [ 11, 22, 33, 44, "联通" ]
v1.unshift("联通");//前面追加  [ "联通", 11, 22, 33, 44 ]
v1.splice(索引位置,0,插入的内容);  //在指定位置插入
v1.splice(0,0,"你好呀");//在指定位置插入 [ "你好呀", 11, 22, 33, 44 ]
v1.pop();  //尾部删除 [ 11, 22, 33 ]
v1.shift(); //头部删除 [ 22, 33, 44 ]
v1.splice(索引位置,1); //指定位置删除

var v1 =[11,22,33,44];
//数组循环 方法1
for (var index in v1){var data = v1[index];console.log(data);
}
//数组循环 方法2  和c语言比较像
for (var i=0;i<v1.length;i++){var  data = v1[i];console.log(data);
}

案例：动态创建网页数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul id="city"></ul>
<script>var cityList =["北京","上海","南京","广东"];for (var index in cityList){var citydata = cityList[index];//1.创建li标签var tag = document.createElement("li");//2.在标签中加入相关内容tag.innerText = citydata;//3、在ul标签中加入相关内容var parentTag = document.getElementById("city");parentTag.appendChild(tag);}
</script>
</body>
</html>

7.3对象（python-字典）

var info={"name":"高倩","age":18,
};var info={name:"高倩","age":18,
};

//操作
info.age;
info.name ="小李";info["age"];
info["name"] = "小李";delete info["age"];  //删除某个键

案例：动态表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1px"><thead><tr><td>ID</td><td>姓名</td><td>年龄</td></tr></thead><tbody id="body"></tbody>
</table>
<script>var info ={id:1,name:"小鹿",age:19,};var tr = document.createElement("tr");for (var key in info){var text = info[key];var td = document.createElement("td");td.innerText = text;tr.appendChild(td);}var bodytag = document.getElementById("body");bodytag.appendChild(tr);
</script>
</body>
</html>

7.4案例：事件绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="button" value="点击添加" onclick="add_info()">
<ul id="body"></ul>
</body>
<script>function add_info() {var list = ["中国联通", "中国移动", "中国电信"];for (var index in list) {var text = list[index];var li = document.createElement("li");li.innerText = text;var ulTag = document.getElementById("body");ulTag.appendChild(li);}}
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txt">
<input type="button" value="点击添加" onclick="add_info()">
<ul id="body"></ul>
<script>function add_info() {//1.获取input标签输入的内容var textTag = document.getElementById("txt");var text = textTag.value;if (text.length>0) {//2.创建li标签var li = document.createElement("li");li.innerText = text;//3.将li标签的内容添加到ul标签中去var ulTag = document.getElementById("body");ulTag.appendChild(li);//4.将input输入的内容清空textTag.value = "";} else {alert("输入内容不能为空");}}
</script>
</body>
</html>

8.jQuery

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 id="txt">中国联通</h1>
<script src="static/js/jquery.min.js"></script><script>//利用jQuery中的功能实现某些效果//1.找到id=txt的标签$("#txt");//2.内容修改$("#txt").text("广西联通");</script>
</body>
</html>

8.1查找标签(直接寻找)

ID选择器

<h1 id="txt">中国联通</h1>
<script>
$("#txt");
</script>

样式选择器（类选择器）

<h1 class="txt">中国联通</h1>
<script>
$(".txt");
</script>

标签选择器

<h1 id="txt">中国联通</h1>
<div clsss="c1">中国移动</div>
<script>
$("h1");
</script>

层级选择器

<h1 id="txt">中国联通</h1>
<div clsss="c1"><div class="c2"><span></span><a>中国移动</a></div>
</div>
<script>
$(".c1 .c2 a");
</script>

多选择器

<h1 id="txt">中国联通</h1>
<div clsss="c1"><div class="c2"><span></span><a>中国移动</a></div>
</div>
<script>
$("#txt,span");
</script>

属性选择器

<input type="text" name="n1"/>
<input type="text" name="n1"/>
<input type="text" name="n2"/>
<script>
$("input[name='n1']");
</script>

8.2间接寻找

找兄弟标签

<div><div>北京</div><div id="c1">上海</div><div>深圳</div><div>广州</div>
</div>
<script>$("#c1").prev(); //找到上海的上一个兄弟元素$("#c1").next();  //找到上海的下一个兄弟元素   深圳$("#c1").next().next();  //找到广州$("#c1").siblings();  //所有的兄弟元素
</script>

找父标签

<div>
<div><div>北京</div><div id="c1"><div>青浦区</div><div class="p10">宝山区</div><div>浦东新区</div></div><div>深圳</div><div>广州</div>
</div>
<div><div>山西</div><div>陕西</div><div>河南</div><div>河北</div>
</div>
</div>
<script>
$("#c1").parent();   //父标签
$("#c1").parent().parent();  //父标签的父标签$("#c1").children(); //所有子标签
$("#c1").children(".p10");  // 所有子标签中class="p10"的标签
$("#c1").find(".p10");
</script>

8.3案例：菜单切换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.menus {width: 200px;height: 800px;border: 1px solid red;}.menus .header {height: 30px;background-color: gold;cursor: pointer; /*点击时会变成小手*/}.menus .content a {display: block;}.hide {display: none;}</style>
</head>
<body>
<div class="menus"><div class="a1"><div class="header" onclick="clickMe(this);">上海</div><div class="content hide"><a>宝山区</a><a>青浦区</a><a>浦东新区</a><a>普陀区</a></div></div><div class="a1"><div class="header" onclick="clickMe(this);">北京</div><div class="content hide"><a>海淀区</a><a>朝阳区</a><a>大兴区</a><a>昌平区</a></div></div><div class="a1"><div class="header" onclick="clickMe(this);">广东</div><div class="content hide"><a>荔湾区</a><a>天河区</a><a>南沙区</a><a>福田区</a></div></div><div class="a1"><div class="header" onclick="clickMe(this);">河南</div><div class="content hide"><a>二七区</a><a>金水区</a><a>龙亭区</a><a>老城区</a></div></div>
</div><script src="static/js/jquery.min.js"></script>
<script>function clickMe(self) {var hashide = $(self).next().hasClass("hide");if (hashide) {//$(self); 表示当前点击的鼠标//  $(self).next(); //下一个兄弟标签$(self).next().removeClass("hide"); //删除样式} else {$(self).next().addClass("hide"); //添加样式} //删除样式}}
</script>
</body>
</html>

//样式2
<script src="static/js/jquery.min.js"></script>
<script>function clickMe(self) {// var hashide = $(self).next().hasClass("hide");// if (hashide) {//     //$(self); 表示当前点击的鼠标//     //  $(self).next(); //下一个兄弟标签//     $(self).next().removeClass("hide"); //删除样式// } else {//     $(self).next().addClass("hide"); //添加样式// } //删除样式}$(self).next().removeClass("hide");$(self).parent().siblings().find(".content").addClass("hide");}
</script>

8.4值的操作

<h1 id="a1">你好</h1>
<script>
$("#a1").text();  //获取标签中的内容
$("#a1").text("你好");   //修改标签中的内容
</script>

<input type="text" id="c2">
$("#c2").val();   //获取用户输入的值
$("#c2").val("你好");   //修改

8.5案例：输入内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="txtuser" placeholder="请输入用户名">
<input type="text" id="txtpasswd" placeholder="请输入密码">
<input type="button" value="提交" onclick="info()">
<ul id="view">
</ul>
<script src="static/js/jquery.min.js"></script>
<script>function info(){var user = $("#txtuser").val();var passwd = $("#txtpasswd").val();var contentString = user + "--"+passwd;//1.创建li标签并加入内容var liTag = $("<li>").text(contentString);//2.把li标签添加到ul标签中$("#view").append(liTag);}
</script>
</body>
</html>

8.6事件

案例：绑定事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>百度</li><li>谷歌</li><li>搜狗</li>
</ul>
<script src="static/js/jquery.min.js"></script>
<script>$("li").click(function () {var tagtext = $(this).text();console.log(tagtext);})
</script>
</body>
</html>

8.7jQuery中删除某个标签

<div id="a1">你好呀
</div>
<script>
$("#a1").remove();
</script>

8.8当页面的框架加载完成后，自动就执行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>百度</li><li>谷歌</li><li>搜狗</li>
</ul>
<div id="a1">你好呀</div>
<script src="static/js/jquery.min.js"></script>
<script>$(function () {//当页面的框架加载完成后，自动就执行$("li").click(function () {var tagtext = $(this).text();console.log(tagtext);})})$("div").click(function () {$(this).remove();})
</script>
</body>
</html>

8.9案例：表格操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1px"><thead><tr><th>ID</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>小李</td><td><input type="button" value="删除" class="delete"></td></tr><tr><td>2</td><td>小李</td><td><input type="button" value="删除" class="delete"></td></tr><tr><td>3</td><td>小李</td><td><input type="button" value="删除" class="delete"></td></tr><tr><td>4</td><td>小李</td><td><input type="button" value="删除" class="delete"></td></tr></tbody>
</table>
<script src="static/js/jquery.min.js"></script>
<script>$(function () {$(".delete").click(function () {$(this).parent().parent().remove();})})
</script>
</body>
</html>

9.前端整合

html
css
javascript和jQuery
BootStrap（动态效果依赖jQuery）

案例：添加页面数据

人员信息录入功能：

用户名、年龄、薪资、部门、入职时间（*）

对于时间的选择：不能输入；选择；（插件）datepicker

下载插件

应用插件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css"><link rel="stylesheet" href="static/plugins/bootstrap-datepicker-1.9.0/css/bootstrap-datepicker.css">
</head>
<body>
<form class="form-horizontal container"><div class="row"><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">用户</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="用户名"></div></div></div><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">年龄</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="年龄"></div></div></div></div><div class="row"><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">薪资</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="薪资"></div></div></div><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">部门</label><div class="col-sm-10"><select class="form-control">部门<option value="">IT部</option><option value="">销售部</option><option value="">运营部</option></select></div></div></div></div><div class="row"><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">入职时间</label><div class="col-sm-10"><input type="text" id="dt" class="form-control" placeholder="入职时间"></div></div></div></div><div class="row"><div class="col-xs-6"><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">提交</button></div></div></div></div></form>
<script src="static/js/jquery.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<script src="static/plugins/bootstrap-datepicker-1.9.0/js/bootstrap-datepicker.js"></script>
<script src="static/plugins/bootstrap-datepicker-1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script>$(function () {$("#dt").datepicker({format:"yyyy-mm-dd",startDate: "0",language:"zh-CN",autoclose:true})})
</script>
</body>
</html>

10.Mysql数据库

10.1数据库操作

创建数据库

create database 数据库名;

切换数据库

use 数据库名;

创建数据表

create table 数据表名(字段1 数据类型,字段2 数据类型,...);

create table tb1(id int not null auto_increment primary key,  -- 不为空，自增，主键name varchar(16),age int
);

查看表结构

desc tb1;

删除表

drop table 表名;

常用数据类型：

tinyint

有符号，取值范围：-128～127,【默认】
无符号，取值范围：0～255
age tinyint -- 有符号
age tinyint unsigned  -- 无符号

int -- 有符号
int unsigned -- 无符号

bigint：有符号，无符号

float

double

decimal

准确的小数值，m是数字总个数（负数不算），d是小数点后个数，m最大值为65，d最大值为30


> * char(m)：定长字符串，速度快;m代表**字符串**的长度，最多可容纳255个字符。
>
> * varchar(m):可变字符串，节省空间;m代表**字符**的长度。最大65535字节/3(一个字符3个字节)=最大的m
>
> * text:一般情况下，长文本会用此数据类型，例如：文章，新闻。
>
> * mediumtext
>
> * longtext> * datetime:精确到秒
> * date:精确到天#### 10.2数据行操作* 新增数据~~~mysql
-- 单条
insert into 表名(列名，列名) values(值，值);
-- 多条
insert into 表名(列名，列名) values(值，值),(值，值);

删除数据

delete from 表名;
delete from 表名 where 条件;

修改数据

update 表名 set 列名=值;
update 表名 set 列名=值,列名=值;
update 表名 set 列名=值 where 条件;

查询数据

select * from 表名;
select 列名 from 表名;
select 列名 from 表名 where 条件;

10.2案例：员工管理

使用mysql命令创建数据库，数据表
Pyhon代码实现：
- 添加用户
- 删除用户
- 查看用户
- 更新用户信息

添加数据：

#添加单条数据
import pymysql
# 1.连接Mysql
conn = pymysql.connect(host="127.0.0.1",port=3306,user="root",passwd="123456",charset="utf8",database="unicom")
# 2.使用 cursor() 方法创建一个游标对象 cursor
cursor = conn.cursor()  #元组里面嵌套元组
# cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  #列表里面嵌套字典
#3.发送指令
# 执行sql语句
cursor.execute("insert into admin(username,password,mobile) values('xiaoli','xl123','15136975476')")
# 提交到数据库执行
conn.commit()
# 4.关闭
cursor.close()
conn.close()

#使用变量传值的方式插入数据
import pymysqlwhile True:user = input("请输入用户名：")if user.upper() == "Z":breakpwd = input("请输入密码：")mobile = input("请输入手机号：")# 1.连接Mysqlconn = pymysql.connect(host="127.0.0.1",port=3306,user="root",passwd="123456",charset="utf8",database="unicom")# 2.使用 cursor() 方法创建一个游标对象 cursorcursor = conn.cursor()  #元组里面嵌套元组# cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  #列表里面嵌套字典#3.发送指令# 执行sql语句# cursor.execute("insert into admin(username,password,mobile) values('小李','xl123','15134975476')") # 加载1条数据sql = "insert into admin(username,password,mobile) values(%s,%s,%s)"cursor.execute(sql,[user,pwd,mobile])# 提交到数据库执行conn.commit()# 4.关闭cursor.close()conn.close()

查询数据：

import pymysql# 1.连接数据库
conn = pymysql.connect(host="127.0.0.1",port=3306,user="root",passwd="123456",database="unicom")
cursor = conn.cursor()  #元组里面嵌套元组
# cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  #列表里面嵌套字典
# 2.执行sql语句
cursor.execute("select * from admin where id > %s",[2,])
data_list = cursor.fetchall() # 获取所有记录列表,以元组来存储
for data in data_list:print(data)
# 3.关闭
cursor.close()
conn.close()

删除数据:

import pymysql# 1.连接Mysql
conn = pymysql.connect(host="127.0.0.1",port=3306,user="root",passwd="123456",charset="utf8",database="unicom")# 2.使用 cursor() 方法创建一个游标对象 cursor
cursor = conn.cursor()  #元组里面嵌套元组
# cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  #列表里面嵌套字典#3.发送指令
# 执行sql语句
cursor.execute("delete from admin where id=%s",[6,])
# 提交到数据库执行
conn.commit()
# 4.关闭
cursor.close()
conn.close()

修改数据

import pymysql# 1.连接Mysql
conn = pymysql.connect(host="127.0.0.1",port=3306,user="root",passwd="123456",charset="utf8",database="unicom")# 2.使用 cursor() 方法创建一个游标对象 cursor
cursor = conn.cursor()  #元组里面嵌套元组
# cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)  #列表里面嵌套字典#3.发送指令
# 执行sql语句
cursor.execute("update admin set mobile=%s where id=%s",["15137645789",3,])
# 提交到数据库执行
conn.commit()
# 4.关闭
cursor.close()
conn.close()

11.Django

创建项目（打开终端）

django-admin startproject 项目名

创建应用

python manage.py startapp 应用名

12.ORM

创建、修改、删除数据库中的表（不用写写SQL语句），无法创建数据库。
操作表中的数据

12.1在mysql中创建数据库

12.2连接数据库（修改根目录下的settings.py,修改如下内容）

DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql',  # 数据库引擎'NAME': 'orm',  # 下一步创建的数据库名称'HOST': '127.0.0.1',  # 数据库地址，本机 ip 地址 127.0.0.1'PORT': 3306,  # 端口'USER': 'root',  # 数据库用户名'PASSWORD': '123456',  # 数据库密码}
}

12.3django操作表

创建表
删除表
修改表

创建表(在models.py中)：

class UserInfo(models.Model):name = models.CharField(max_length=32)password = models.CharField(max_length=64)age = models.IntegerField()

-- mysql
create table app01_userinfo(id bigint(20) auto_increment primary key,name vachar(32),password varcgar(64),age int
);

将创建的模型同步到数据库系统中去（在终端输入）：

python manage.py makemigrations  #同步前的准备工作
python manage.py migrate

删除，修改表可通过注释相关内容或者增加相关内容之后在终端再次执行以上命令。

12.4案例：员工管理系统

12.4.1新建项目

12.4.2创建app

创建

python manage.py startapp app01
或者用pycharm-tools-Run manage.py task... 输入startapp app01(点击)

注册app(根目录下settings.py-INSTALLED_APPS )

12.4.3设计表结构（django）

12.4.4在Mysql中生成表

使用SQLyog创建数据库

修改配置，连接Mysql(settings.py)

DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql',  # 数据库引擎'NAME': '员工管理系统',  # 下一步创建的数据库名称'HOST': '127.0.0.1',  # 数据库地址，本机 ip 地址 127.0.0.1'PORT': 3306,  # 端口'USER': 'root',  # 数据库用户名'PASSWORD': '123456',  # 数据库密码}
}

django命令生成数据库表

python manage.py makemigrations  #同步前的准备工作
python manage.py migrate
或者用pycharm-tools-Run manage.py task... 输入makemigrations  migrate(点击)

12.4.5静态文件管理

12.4.6部门管理

12.4.7模板的继承

{% extends 'base.html' %}
{% block content %}
{% endblock %}

12.4.8用户管理

新建用户：

原始方法

- 用户提交数据没有校验
- 页面上应该有错误提示
- 页面上每一个字段都需要我们重新写一遍
- 关联的数据，需要手动获取并且循环之后才展现在页面上

django组件（Form组件-比较简便、ModelForm组件-很简便）