说明:
- 本人的实验环境在云服务器(CentOS7操作系统)上,在VSCode软件上SSH远程连接云服务器进行代码编写
- 因为文章所有内容和代码是纯手敲的缘故,所以演示的代码可能跟
武沛齐(据说是小猪佩奇的远房表哥)
老师视频中的有所不同,但原理相同
目的: 开发一个平台- 前端开发: HTML CSS JavaScript- 接收请求并处理- Mysql数据库: 存储数据快速上手: 基于Flask Web框架快速搭建一个网站
深入学习:基于Django框架
python 安装 Flask web 框架
pip install flask
创建Flask的python目录
[root@hecs-33592 ~]# mkdir -p /root/python/FlaskWeb
[root@hecs-33592 ~]# cd /root/python/FlaskWeb
[root@hecs-33592 FlaskWeb]# pwd
/root/python/FlaskWeb
创建一个名为web.py
的python文件
from flask import Flaskapp = Flask(__name__)# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
@app.route("/show/info")
def index():return "中国联通"if __name__ == '__main__':app.run(host='0.0.0.0', port=5100, debug=False)
运行
[root@hecs-33592 ~]# /usr/bin/python3 /root/python/FlaskWeb/web.py
浏览器进行访问: http://[你的ip]:5100/show/info
这种 return 方式返回 HTML 内容的方式不方便进行管理,因此我们会引入
templates
模板
from flask import Flask, render_templateapp = Flask(__name__)# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
@app.route("/show/info")
def index():# 默认去当前目录的 templates 文件夹中找return render_template("index.html")if __name__ == '__main__':app.run(host='0.0.0.0', port=5100, debug=False)
创建templates
目录
mkdir /root/python/FlaskWeb/templates/
编写index.html
文件
Document
中国联通
重新运行Flask,浏览器刷新访问
当然这个
templates
目录也可以自定义名称
# 例如目录名称为"xxx"
app = Flask(__name__, template_folder="xxx")
Document
一级标题
二级标题三级标题四级标题五级标题
内容asd
这里就很有意思了,你可以选择跳转自己网站的地址,或者跳转外部的网站
我的联通
点击跳转自己的网站点击跳转别人的网站百度
然后需要修改web.py
文件
from flask import Flask, render_templateapp = Flask(__name__)# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
@app.route("/show/info")
def index():# 默认去当前目录的 templates 文件夹中找return render_template("index.html")# 新添加如下配置
@app.route("/get/news")
def get_news():# 默认去当前目录的 templates 文件夹中找return render_template("get_news.html")if __name__ == '__main__':app.run(host='0.0.0.0', port=5100, debug=False)
在templates
目录下新添加一个 get_news.html
文件
Document
我是内部链接
重新运行Flask,刷新页面
点击第一行后,跳转到如下页面
点击点击第二行后,跳转到百度
自行脑补百度页面哈
在新的 Tab 标签页打开链接
添加 target=“_blank”
我是内部链接
刷新浏览器
尝试访问服务器本地图片
在/root/python/FlaskWeb/
下新建目录static
放入一张图片dog.jpg
修改get_news.html
我是内部链接
刷新浏览器
跟刚才一样
然后可以调整一下图片的高度与宽度
我是内部链接
- 块级标签- - - 行内标签- - -
实现: 点击图片,跳转至指定页面
修改web.py
,增加get_product
from flask import Flask, render_templateapp = Flask(__name__)# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
@app.route("/show/info")
def index():# 默认去当前目录的 templates 文件夹中找return render_template("index.html")@app.route("/get/news")
def get_news():return render_template("get_news.html")@app.route("/get/product")
def get_product():return render_template("get_product.html")if __name__ == '__main__':app.run(host='0.0.0.0', port=5100, debug=False)
在templates
下新增一个get_product.html
Document
访问页面
点击图片进行url跳转
无序列表
- 中国移动
- 中国联通
- 中国电信
有序列表
- 中国移动
- 中国联通
- 中国电信
修改web.py
新增一个访问路径
@app.route("/get/table")
def get_table():return render_template("get_table.html")
在templates
页面下新建get_table.html
文件
Document
ID 姓名 年龄 10 张三 20 11 李四 20 12 王五 20 13 赵六 20
重新运行并访问页面
为表格增加边框
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/db209e4922ff461.png)
2.9 input系列
男
女
唱
跳
Rap
篮球
普通按钮
提交表单
2.10 下拉框
2.11 多行文本
用户注册
修改web.py
@app.route("/register")
def register():return render_template("register.html")
在templates
下新建register.html
Document
用户注册
用户名: 密码: 性别: 男 女爱好:唱跳Rap篮球城市:备注:
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/eb2b136523002e7.png)
顺便说一下 GET 方法与 POST 方法的区别
GET: 可通过URL/表单
提交
POST: 只能通过表单
提交,提交数据不在URL而是在请求体
中
案例: 用户注册
新建项目
在/root/python
下新建目录:
account
template
在account
下新建app.py
文件
from flask import Flask, render_templateapp = Flask(__name__)@app.route('/register')
def register():return render_template('register.html')if __name__ == '__main__':app.run(host='0.0.0.0', port=5200, debug=False)
在templates
下新建register.html
文件
Document
用户注册
运行,浏览器进行访问
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/5fbaa9b3fce8809.png)
表单可以提交的前提条件:
- 提交方式: method=“get”
- 提交地址: action=“/xxx/xxx/xxx”
- 在
form
标签里面必须有一个submit
标签 - 每个标签有
name
属性
接下来尝试接收用户提交的表单数据
GET 方式
修改app.py
,导入request
方法,使用/do/register
接收用户数据并展示
from flask import Flask, render_template, requestapp = Flask(__name__)@app.route('/register', methods=['GET'])
def register():return render_template('register.html')@app.route("/do/register", methods=['GET'])
def do_register():get_info = request.argsreturn get_infoif __name__ == '__main__':app.run(host='0.0.0.0', port=5200, debug=True)
修改templates
下的register.html
点击注册后跳转至路由/do/register
Document
用户注册
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/96ac5654069b9ba.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/de876047505bd2.png)
POST 方式
修改app.py
@app.route("/post/register", methods=['POST'])
def post_register():get_info = request.formreturn get_info
修改register.html
用户注册
浏览器访问
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/e227d8b45afc6e7.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/b38aa6df6f5c56.png)
可以发现,跟上面的GET
方法不同的是, 提交后跳转的页面的URL
后并没有我们提交的参数,而是提交到了后台
表单数据提交优化
修改register.html
添加 name
与 value
属性
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/416790650410941.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/43c5aa996a602cc.png)
在控制台输出数据
修改app.py
@app.route("/post/register", methods=['POST'])
def post_register():get_info = request.formusername = 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")more = request.form.getlist("textarea")print(username, passwd, sex, hobby_list, city, more)return get_info
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/660c8c7fec3181f.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/ff03cf4d8d1d517.png)
整合GET
与POST
方法
![在这里插入图片描述](https://img-blog.csdnimg.cn/ea0679ddcf084771a08055e4c6bf9ad1.png)
将上面图片中的内容整合
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/4453d83a293304.png)
@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")more = request.form.getlist("textarea")print(username, passwd, sex, hobby_list, city, more)get_info = request.argsreturn get_info
3.CSS样式
3.1 快速上手
3.2 CSS应用方式
1. 在标签上
2. 在 head 标签的 style 上
...
Document
用户注册
...
3. 写到文件中
- common.css
.c1 {color: red;
}
调用common.css
...
Document
用户注册
...
3.3 选择器
1. ID选择器
#c1 {color: red;
}
2. 类选择器
.c1 {color: red;
}
3. 标签选择器
div{color: red;
}xxx
4. 属性选择器
下面的例子中,所有的text
类型的input
都会生效
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/c05d4538ad58f0b.png)
还有另一种方式,看下面的例子
...
...abc
...
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/797e3443bb4fcb0.png)
5. 后代选择器
这个选择器很有意思,你可以指定标签让它下面对应的标签全部生效,也可以指定标签让他下面的n级标签生效,具体看例子
我是div里面的h2
我是div外面的h2
...
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/be4b9872aa20f2c.png)
如果只想让第一层的h1
生效,可以添加>
号
![在这里插入图片描述](https://img-blog.csdnimg.cn/6809b78b88ad4a43b64c73f7ea60c376.png)
关于样式的覆盖问题
当一个标签引用了多个 css 样式时,可能会遇到样式属性重复的问题
我是天才
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/21a476ccd4187c.png)
观察到,c3生效,而c2没有生效,这是因为c3在c2的下面,会将上面的c2属性覆盖掉
如果不想让上面的被覆盖掉怎么办呢?
可以在对应的属性后面添加!important
![在这里插入图片描述](https://img-blog.csdnimg.cn/1b6e0ed2816c4a798baf3e0089c9064a.png)
3.4 样式
1. 高度和宽度
.c4 {height: 300px;width: 500px;}
注意事项:
- 支持百分比
- 行内标签: 默认无效
- 块级标签: 默认有效(右边的剩余空白区域也会被占用)
2. 块级和行内标签
display:inline-block
使行内标签对 height 和 width 生效
...联通
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/c4714fdcac76a76.png)
块级与行内标签的转换
移动联通
注意:
- 块级标签 + 块级&行内标签
3. 字体和对齐方式
设置字体颜色/大小/粗细/字体样式
Document
4. 浮动
如果在块级标签中,加入了float
属性,那么这个块级标签奖不会再占用一整行,而是自己有多大就占用多大
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/56701848818bbaf.png)
如果你让标签浮动起来之后,就会脱离文档流。
例如下面的例子中,我们给div的父标签赋予了一个蓝色的背景,但是你不会看到蓝色背景。因为他被浮动的div字标签挡住了。
解决办法: 在同级子标签的最下面添加 style="clear: both;"
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/18390e23627ed46.png)
5. 内边距
padding-top | padding-left | padding-right | padding-botton
Document
helloworld
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/8ef9ae580155f48.png)
其实上面的四个上下左右的padding可以简写为padding: 20px 20px 20px 20px
,顺序为上右下左(顺时针方向)
6. 外边距
margin
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/8cb0546f54d8.png)
7. hover
Document
字体碰到鼠标变成绿色边框碰到鼠标变成绿色鼠标放我这里触发显示二维码
8. after
Document
张三
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/bb660a60459af06.png)
after一般像下面这样用,不用每次都写stype="clear: both;"
Document
123
9. position
- fixed
- relative
- absolute
9.1 fixed
返回顶部
.back {position: fixed;width: 60px;height: 60px;border: 1px solid red;right: 50px;bottom: 50px;}
对话框
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/106bbcd97a0b080.png)
9.2 relative和absolute
在小米商城
案例的基础上进行测试
....app{position: relative;}.app .download {position: absolute;display: none;height: 100px;width: 100px;}.app:hover .download {display: block;}
...
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/d9377e96f9927b2.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/877c2783175c9.png)
10. border
Document
我是虚线~我是实线~左边框是绿色,上下右边框是红色我是透明色,鼠标碰到我边框会变色哦~
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/25715d1ac36cf.png)
11. 背景色
background-color: bisque;
无需多言☺
注意: 以上不是所有的CSS样式,这些是最常用的标签
4.案例: 小米商城
4.1 小米顶部
小米商城
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/09ba8b762cfca01.png)
4.2 二级菜单
小米商城
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/e4ed3a6e7a1b9ce.png)
4.3 推荐区域
小米商城
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/1cc40bfb9e6e0df.png)
5. Bootstrap
别人已经帮忙写好的CSS样式
使用方式:
- 下载Bootstrap
- 使用:
- 在页面上引入 Bootstrap
- 编写HTML时,按照Bootstrap的规定来编写或者自定制
由于我没有下载Pycharm,无法本地实时测试,我使用的VSCode进行的编辑,所以我继续使用Flaskweb进行页面的访问测试
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/11b9aa9698da831.png)
5.1 初识Bootstrap
下载地址: https://v3.bootcss.com/
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/bf97ee46b3c569f.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/191045e0186f9fd.png)
BaiDuNetDisk Download:
链接:https://pan.baidu.com/s/1rcZldkNHrpC11f2plUv-rg?pwd=mh5b
提取码:mh5b
下载完成后解压,目录如下:
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/84832d22e098fcc.png)
在服务器中创建必要的目录
[root@hecs-33592 python]# cd bootstrap/
[root@hecs-33592 bootstrap]# ls
main.py templates
[root@hecs-33592 bootstrap]# mkdir static
[root@hecs-33592 bootstrap]# cd static/
[root@hecs-33592 static]# ls
[root@hecs-33592 static]# mkdir css
[root@hecs-33592 static]# mkdir js
[root@hecs-33592 static]# mkdir img
[root@hecs-33592 static]# mkdir plugins[root@hecs-33592 static]# tree /root/python/bootstrap/
/root/python/bootstrap/
├── main.py
├── static
│ ├── css
│ ├── img
│ ├── js
│ └── plugins
└── templates
我会把刚刚下载好的bootstrap-3.4.1-dist.zip
解压放到plugins
下
[root@hecs-33592 plugins]# ls
bootstrap-3.4.1-dist.zip
[root@hecs-33592 plugins]# unzip bootstrap-3.4.1-dist.zip
[root@hecs-33592 plugins]# mv bootstrap-3.4.1-dist bootstrap-3.4.1
[root@hecs-33592 plugins]# tree bootstrap-3.4.1
bootstrap-3.4.1
├── css
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js├── bootstrap.js├── bootstrap.min.js└── npm.js
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/af8d233148fc5.png)
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/5e3a2d12e2693b1.png)
接下来使用已经写好的导航栏
链接地址: https://v3.bootcss.com/components/
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/a42301515682d4b.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/26f712cdb804800.png)
复制上面的代码
Document
访问效果如下:
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/da4cce1e4f526f6.png)
其实你仔细看会发现这个导航栏是有圆角
的
接下来我们去掉圆角
F12
调试页面
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/b900357892128a6.png)
覆盖.navbar
样式
再次访问就没有圆角了
可以在相应的位置进行修改,代码部分自己测试修改哈
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/6120f10848371.png)
5.2 栅格系统
栅格系统介绍
整体划分为了12
格
大致分为四种风格
.col-xs-
.col-sm-
.col-md-
.col-lg-
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/dce624fde88a4b9.png)
响应式:根据页面的宽度,动态的改变布局
- .col-sm- : 750px
- .col-md- : 970px
- .col-lg- : 1170px
非响应式:
- .col-xs-
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/2dcb67ed0ba5270.png)
列偏移
col-sm-offset-
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/9bf9e94364b05fe.png)
5.3 container
- container
左边右边
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/e1dfc586442e236.png)
- container-fluid
左边右边
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/5b2beba0a7999d5.png)
5.4 面板
地址: https://v3.bootcss.com/components/#panels
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/6dd60ebd17ec378.png)
左边Panel heading without titlePanel contentPanel heading without titlePanel contentPanel heading without titlePanel content
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/3844686f3218f06.png)
5.5 媒体对象
添加媒体对象
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/eff47d255f1147f.png)
由于官方文档给的示例代码不全,所以可以F12查看源码,复制页面中的样式
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/debe8e8edc9fc5b.png)
Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.
Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.
Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.
Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/98899b5fcf1b074.png)
5.6 分页
链接: https://v3.bootcss.com/components/#pagination
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/77add968bd6de5d.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/d82ba92522eb7f7.png)
案例: 登录
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/1641f7d9ed41267.png)
- 宽度 + 区域居中
- 内边距
Document 用户登录
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/4fd6adc3cb050de.png)
案例: 后台管理
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/db42dc34d94fdea.png)
5.7 图标
上面的后台管理案例中,Bootstrap提供的图标不是太够用,我们需要一个专业做图标的网站
地址: https://fontawesome.dashgame.com/
下载
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/e995a4ea0905845.png)
下载好后,上传至服务器的static/plugins
下并解压
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/c8b07cb362896f1.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/9912aeaa443c907.png)
打开网址https://fontawesome.dashgame.com/
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/323b151f27ef79d.png)
放在代码的这里
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/8a4f02c7243c662.png)
访问
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/42b3951e12a7d24.png)
以此类推,很简单
优化
针对前面的导航页面进行优化
Document Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.
2022-12-07 poker 1234Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.
Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.
Middle aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus.
最新推荐Panel contentPanel heading without titlePanel contentPanel heading without titlePanel content
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/b071ab25465071b.png)
5.8 Bootstrap实现动态效果
依赖:
- JQuery
- Javascript
JQuery 是 Javascript 的类库
下载JQuery: https://jquery.com/download/
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/08cb9a5fb67dff5.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/8ee2b338027ff4d.png)
因为我的项目在服务器中,所以我可以在服务器中使用wget
命令直接下载
放在static/js
下
[root@hecs-33592 js]# pwd
/root/python/bootstrap/static/js
[root@hecs-33592 js]# wget https://code.jquery.com/jquery-3.6.1.min.js
--2022-12-07 14:08:39-- https://code.jquery.com/jquery-3.6.1.min.js
Resolving code.jquery.com (code.jquery.com)... 69.16.175.42, 69.16.175.10, 2001:4de0:ac18::1:a:1a, ...
Connecting to code.jquery.com (code.jquery.com)|69.16.175.42|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 89664 (88K) [application/javascript]
Saving to: ‘jquery-3.6.1.min.js’100%[========================================================================================================================================================================>] 89,664 209KB/s in 0.4s 2022-12-07 14:08:40 (209 KB/s) - ‘jquery-3.6.1.min.js’ saved [89664/89664]
以之前的导航页面做演示
放在body
标签中的最下面
...
浏览器刷新访问
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/be7d9e8bd328b45.png)
接下来看一下Javascript
地址: https://v3.bootcss.com/javascript/
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/03d2ad3db009ed8.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/0c5a718f5c48701.png)
Modal title
...
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/4d4251e24b9cd9d.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/c1e6c234efd8e6.png)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/8253dcfc27a1d5d.png)
可以观察一下这个是怎么实现点击跳出窗口的
上面的代码中,data-toggle="modal" data-target="#myModal"
,点击按钮后会寻找带有id=myModal
的标签
Modal title
...
因此我们可以知道,使用其他的标签一样可以触发点击跳转
将右上角的注册按钮设置为点击跳转窗口
注册
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/db59fc334b11b25.png)
6. Javascript
意义: 实现动态效果
先准备基础目录,拷贝之前的bootstrap
目录
[root@hecs-33592 python]# cp -r bootstrap javascript
删除javascript
中无用的html
文件
[root@hecs-33592 python]# cd javascript/
[root@hecs-33592 javascript]# ls
main.py static templates
[root@hecs-33592 javascript]# cd templates/
[root@hecs-33592 templates]# ls
01.html 02.html 03.html 04.html 05.html
[root@hecs-33592 templates]# rm -rf ./*
首先编写一个小样例
Document
大标题内容
访问测试
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/596a71082372888.png)
跳出对话框
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/529729138ce9.png)
更改,使用confirm
浏览器刷新访问
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/39997d6cd8b0953.png)
6.1 代码位置
js代码的存在形式:
-
在当前HTML文件中
- head中
- body中(推荐)
注意: 如果写在了head
中,body
的html
代码不会执行,会先执行head
中的javascript
之后,才会显示html
代码
-
在其他js文件中,导入使用(一般放在 body 中)
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/860e63f5304e4.png)
6.2 注释
- HTML的注释
- CSS的注释
/* 注释内容 */
- Javascript的注释
// 注释内容/* 注释内容 */
6.3 变量
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/c18efb4a5f1d6e9.png)
6.3.1 字符串类型
//声明
var name = "helloworld";
var name = String("helloworld");
常见功能
var name = "中国联通"
var v1 = name.length;
var v2 = name[0];
var v3 = name.trim(); //去除空白
var v4 = name.substring(0,2) //切片, 前取后不取
案例: 跑马灯
Document
欢迎中国联通领导poker莅临指导
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/568fa9ebd06189e.png)
6.3.2 数组
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);//操作
var v1 = [11,22,33,44];v1[1]
v1[0] = "poker"//追加
v1.push("联通"); //尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通"); //头部追加 ["联通",11,22,33,44]
v1.splice(索引,0,元素);
v1.splice(1,0,"中国"); //指定位置追加 [11,"中国",22,33,44]//删除
v1.pop(); //尾部删除
v1.shift(); //头部删除
v1.splice(索引位置,1);
v1.splice(2,1); //索引为 2 的元素删除 [11,22,44]//循环
var v1 = [11,22,33,44];
//循环的是索引
for(var index in v1){//data=v1[index]...
}for(var i=0; i...
}
案例: 动态数据
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/a2f4dc03a089bf4.png)
6.3.3 对象(字典)
info = {"name":"poker","age":18,
}info = {name:"poker",age:18
}info.age;
info.name = "toker"info["age"]
info["name"] = "toker";delete info["age"]//循环
for(var key in info){//key值 data=info[key]...
}
案例: 动态表格
Document
ID 姓名 年龄
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/ca7fa71442e0c36.png)
6.4 条件语句
if (条件) {...
}else{...
}if (条件) {...
else if (条件){...
}else{...
}
6.5 函数
function func(){...
}//执行
func()
6.6 DOM
DOM 是一个模块,模块可以对HTML页面中的标签进行操作
//根据 ID 获取标签
var tag = doucment.getElementById("xx");//获取标签中的文本
tag.innerText//修改标签中的文本
tag.innerText = "hhhhhhh";
如标题 6.3.2 中的案例
事件的绑定
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/058f2b499766ea2.png)
还有很多的DOM
操作没有介绍,我们后面会使用JQuery
来实现DOM
的功能,所以这里的内容了解即可
7. JQuery
JQuery是一个JavaScript的第三方模块(第三方类库)
- 基于JQuery自己开发一个功能
- 现成的工具依赖JQuery, 例如: Bootstrap动态效果
JQuery的安装方式参考本文的 5.8 Bootstrap实现动态效果
7.1 快速上手
Document
中国联通
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/02e2f8596abd8.png)
7.2 寻找标签(直接)
7.2.1 ID选择器
中国联通
中国联通
中国联通
JQuery操作:
$("#txt")
7.2.2 样式选择器
中国联通
中国联通
中国联通
JQuery操作:
$(".c1")
7.2.3 标签选择器
中国联通
中国联通
中国联通
JQuery操作:
$("h1")
7.2.4 层级选择器
123
JQuery操作:
$(".c1 .c2 h1")
7.2.5 多选择器
123
123
456
JQuery操作:
$("#c1,#c2,li")
7.2.6 属性选择器
JQuery操作:
$("input[name='n1']")
7.3 寻找标签(间接)
7.3.1 找到上一个兄弟
北京上海深圳广州
JQuery操作:
$("#c1").prev() //上一个
$("#c1")
$("#c1").next() //下一个
$("#c1").next().next() //下一个的下一个
$("#c1").siblings() //所有的
7.3.2 找父子
北京浦东新区静安区奉贤区深圳广州北京上海深圳广州
JQuery操作:
$("#c1").parent() //父亲
$("#c1").parent().parent() //父亲的父亲$("#c1").children() //所有的儿子
$("#c1").children(".p10") //所有的儿子中寻找class=p10$("#c1").find(".p10") //所有的子孙中寻找class=p10
$("#c1").children("div") //所有的儿子中寻找标签 div
案例: 菜单的切换
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/ebfaf1b8bfb9e40.png)
功能升级: 只允许有一个是展开的
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/f85afc0136f9248.png)
7.4 值的操作
内容
JQuery操作:
$("#c1").text() //获取文本内容
$("#c1").text("abc") //设置文本内容$("#c2").val() //获取用户输入的值
$("#c2").val("嘿嘿嘿") //设置值
案例: 动态创建数据
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/fa16ab39b2106a8.png)
7.5 事件
- 百度
- 谷歌
- 搜狗
在JQuery可以删除指定的标签
当页面框架加载完成之后执行代码
案例: 表格操作
Document
ID 姓名 年龄 1 poker 1 poker 1 poker 1 poker
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/3af27c9233c28a.png)
8. 前端整合
- HTML
- CSS
- Javascript
Document Modal title
...
案例: 添加数据页面
人员信息录入功能,需要提供用户信息:
- 用户名
- 年龄
- 薪资
- 部门
- 入职时间
…
对于时间的选择: 插件(datetimepicker),或者可以直接使用
Document
![在这里插入图片描述](http://pics.8red.cn/cnyexian/202406/a59acb0976f5728.png)
相关内容
热门资讯
122.(leaflet篇)l...
听老人家说:多看美女会长寿 地图之家总目录(订阅之前建议先查看该博客) 文章末尾处提供保证可运行...
育碧GDC2018程序化大世界...
1.传统手动绘制森林的问题 采用手动绘制的方法的话,每次迭代地形都要手动再绘制森林。这...
育碧GDC2018程序化大世界...
1.传统手动绘制森林的问题 采用手动绘制的方法的话,每次迭代地形都要手动再绘制森林。这...
Vue使用pdf-lib为文件...
之前也写过两篇预览pdf的,但是没有加水印,这是链接:Vu...
PyQt5数据库开发1 4.1...
文章目录 前言 步骤/方法 1 使用windows身份登录 2 启用混合登录模式 3 允许远程连接服...
Android studio ...
解决 Android studio 出现“The emulator process for AVD ...
Linux基础命令大全(上)
♥️作者:小刘在C站 ♥️个人主页:小刘主页 ♥️每天分享云计算网络运维...
再谈解决“因为文件包含病毒或潜...
前面出了一篇博文专门来解决“因为文件包含病毒或潜在的垃圾软件”的问题,其中第二种方法有...
南京邮电大学通达学院2023c...
题目展示 一.问题描述 实验题目1 定义一个学生类,其中包括如下内容: (1)私有数据成员 ①年龄 ...
PageObject 六大原则
PageObject六大原则: 1.封装服务的方法 2.不要暴露页面的细节 3.通过r...
【Linux网络编程】01:S...
Socket多进程 OVERVIEWSocket多进程1.Server2.Client3.bug&...
数据结构刷题(二十五):122...
1.122. 买卖股票的最佳时机 II思路:贪心。把利润分解为每天为单位的维度,然后收...
浏览器事件循环
事件循环 浏览器的进程模型 何为进程? 程序运行需要有它自己专属的内存空间...
8个免费图片/照片压缩工具帮您...
继续查看一些最好的图像压缩工具,以提升用户体验和存储空间以及网站使用支持。 无数图像压...
计算机二级Python备考(2...
目录 一、选择题 1.在Python语言中: 2.知识点 二、基本操作题 1. j...
端电压 相电压 线电压
记得刚接触矢量控制的时候,拿到板子,就赶紧去测各种波形,结...
如何使用Python检测和识别...
车牌检测与识别技术用途广泛,可以用于道路系统、无票停车场、车辆门禁等。这项技术结合了计...
带环链表详解
目录 一、什么是环形链表 二、判断是否为环形链表 2.1 具体题目 2.2 具体思路 2.3 思路的...
【C语言进阶:刨根究底字符串函...
本节重点内容: 深入理解strcpy函数的使用学会strcpy函数的模拟实现⚡strc...
Django web开发(一)...
文章目录前端开发1.快速开发网站2.标签2.1 编码2.2 title2.3 标题2.4 div和s...