文章目录

前端开发1.快速开发网站2.标签2.1 编码2.2 title2.3 标题2.4 div和span2.5 超链接2.6 图片小结标签的嵌套2.7 列表2.8 表格2.9 input系列2.10 下拉框2.11 多行文本用户注册案例: 用户注册GET 方式POST 方式表单数据提交优化

3.CSS样式3.1 快速上手3.2 CSS应用方式1. 在标签上2. 在 head 标签的 style 上3. 写到文件中

3.3 选择器1. ID选择器2. 类选择器3. 标签选择器4. 属性选择器5. 后代选择器关于样式的覆盖问题

3.4 样式1. 高度和宽度2. 块级和行内标签3. 字体和对齐方式4. 浮动5. 内边距6. 外边距7. hover8. after9. position9.1 fixed9.2 relative和absolute

10. border11. 背景色

4.案例: 小米商城4.1 小米顶部4.2 二级菜单4.3 推荐区域

5. Bootstrap5.1 初识Bootstrap5.2 栅格系统5.3 container5.4 面板5.5 媒体对象5.6 分页案例: 登录案例: 后台管理5.7 图标优化5.8 Bootstrap实现动态效果

6. Javascript6.1 代码位置6.2 注释6.3 变量6.3.1 字符串类型案例: 跑马灯6.3.2 数组案例: 动态数据6.3.3 对象(字典)案例: 动态表格

6.4 条件语句6.5 函数6.6 DOM事件的绑定

7. JQuery7.1 快速上手7.2 寻找标签(直接)7.2.1 ID选择器7.2.2 样式选择器7.2.3 标签选择器7.2.4 层级选择器7.2.5 多选择器7.2.6 属性选择器

7.3 寻找标签(间接)7.3.1 找到上一个兄弟7.3.2 找父子

案例: 菜单的切换7.4 值的操作案例: 动态创建数据7.5 事件案例: 表格操作

8. 前端整合案例: 添加数据页面

前端开发

说明:

本人的实验环境在云服务器(CentOS7操作系统)上,在VSCode软件上SSH远程连接云服务器进行代码编写因为文章所有内容和代码是纯手敲的缘故,所以演示的代码可能跟武沛齐(据说是小猪佩奇的远房表哥)老师视频中的有所不同,但原理相同

目的: 开发一个平台

- 前端开发: HTML CSS JavaScript

- 接收请求并处理

- Mysql数据库: 存储数据

快速上手:

基于Flask Web框架快速搭建一个网站

深入学习:

基于Django框架

1.快速开发网站

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 Flask

app = 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_template

app = 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")

2.标签

2.1 编码

2.2 title

Document

2.3 标题

一级标题

二级标题

三级标题

四级标题

五级标题

2.4 div和span

内容

asd

div: 占一整行(块级标签)span: 用多少占多少(行内标签/内联标签)

两个 span 标签不在同一行,页面显示时会在同一行,中间以一个空格分隔两个 span 标签在同一行,页面显示时会在同一行,中间没有空格,连着

2.5 超链接

这里就很有意思了,你可以选择跳转自己网站的地址,或者跳转外部的网站

我的联通

点击跳转自己的网站

点击跳转别人的网站百度

然后需要修改web.py文件

from flask import Flask, render_template

app = 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”

python Django web开发(一) - 前端  第1张

2.6 图片

我是内部链接

python Django web开发(一) - 前端  第2张

刷新浏览器

尝试访问服务器本地图片

在/root/python/FlaskWeb/下新建目录static 放入一张图片dog.jpg 修改get_news.html

我是内部链接

python Django web开发(一) - 前端  第3张

刷新浏览器

跟刚才一样

然后可以调整一下图片的高度与宽度

我是内部链接

python Django web开发(一) - 前端  第4张

小结

- 块级标签

-

-

- 行内标签

-

-

- python Django web开发(一) - 前端  第5张

标签的嵌套

实现: 点击图片,跳转至指定页面

修改web.py,增加get_product

from flask import Flask, render_template

app = 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

python Django web开发(一) - 前端  第1张

访问页面 点击图片进行url跳转

2.7 列表

无序列表

  • 中国移动
  • 中国联通
  • 中国电信

有序列表

  1. 中国移动
  2. 中国联通
  3. 中国电信

2.8 表格

修改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

重新运行并访问页面

为表格增加边框

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

篮球

城市:

备注:

顺便说一下 GET 方法与 POST 方法的区别 GET: 可通过URL/表单提交 POST: 只能通过表单提交,提交数据不在URL而是在请求体中

案例: 用户注册

新建项目 在/root/python下新建目录:

accounttemplate

在account下新建app.py文件

from flask import Flask, render_template

app = 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

用户注册

运行,浏览器进行访问

表单可以提交的前提条件:

提交方式: method=“get”提交地址: action=“/xxx/xxx/xxx”在form标签里面必须有一个submit标签每个标签有name属性

接下来尝试接收用户提交的表单数据

GET 方式

修改app.py,导入request方法,使用/do/register接收用户数据并展示

from flask import Flask, render_template, request

app = 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.args

return get_info

if __name__ == '__main__':

app.run(host='0.0.0.0', port=5200, debug=True)

修改templates下的register.html

点击注册后跳转至路由/do/register

Document

用户注册

用户名:

密码:

POST 方式

修改app.py

@app.route("/post/register", methods=['POST'])

def post_register():

get_info = request.form

return get_info

修改register.html

用户注册

用户名:

密码:

浏览器访问 可以发现,跟上面的GET方法不同的是, 提交后跳转的页面的URL后并没有我们提交的参数,而是提交到了后台

表单数据提交优化

修改register.html

添加 name 与 value 属性

在控制台输出数据

修改app.py

@app.route("/post/register", methods=['POST'])

def post_register():

get_info = request.form

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)

return get_info

整合GET与POST方法

将上面图片中的内容整合

@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.args

return get_info

3.CSS样式

3.1 快速上手

python Django web开发(一) - 前端  第7张

3.2 CSS应用方式

1. 在标签上

python Django web开发(一) - 前端  第7张

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

还有另一种方式,看下面的例子

...

...

a

b

c

...

5. 后代选择器

这个选择器很有意思,你可以指定标签让它下面对应的标签全部生效,也可以指定标签让他下面的n级标签生效,具体看例子

我是div里面的h2

我是div外面的h2

...

如果只想让第一层的h1生效,可以添加>号

关于样式的覆盖问题

当一个标签引用了多个 css 样式时,可能会遇到样式属性重复的问题

我是天才

观察到,c3生效,而c2没有生效,这是因为c3在c2的下面,会将上面的c2属性覆盖掉 如果不想让上面的被覆盖掉怎么办呢? 可以在对应的属性后面添加!important

3.4 样式

1. 高度和宽度

.c4 {

height: 300px;

width: 500px;

}

注意事项:

支持百分比行内标签: 默认无效块级标签: 默认有效(右边的剩余空白区域也会被占用)

2. 块级和行内标签

display:inline-block 使行内标签对 height 和 width 生效

...

联通

块级与行内标签的转换

移动

联通

注意:

块级标签 + 块级&行内标签

3. 字体和对齐方式

设置字体颜色/大小/粗细/字体样式

Document

4. 浮动

如果在块级标签中,加入了float属性,那么这个块级标签奖不会再占用一整行,而是自己有多大就占用多大

Document

如果你让标签浮动起来之后,就会脱离文档流。 例如下面的例子中,我们给div的父标签赋予了一个蓝色的背景,但是你不会看到蓝色背景。因为他被浮动的div字标签挡住了。

解决办法: 在同级子标签的最下面添加 style="clear: both;"

5. 内边距

padding-top | padding-left | padding-right | padding-botton

Document

hello

world

其实上面的四个上下左右的padding可以简写为padding: 20px 20px 20px 20px,顺序为上右下左(顺时针方向)

6. 外边距

margin

7. hover

Document

字体碰到鼠标变成绿色

边框碰到鼠标变成绿色

鼠标放我这里触发显示二维码

python Django web开发(一) - 前端  第9张

8. after

Document

张三

after一般像下面这样用,不用每次都写stype="clear: both;"

Document

1

2

3

9. position

fixedrelativeabsolute

9.1 fixed

返回顶部

.back {

position: fixed;

width: 60px;

height: 60px;

border: 1px solid red;

right: 50px;

bottom: 50px;

}

对话框

Document

9.2 relative和absolute

在小米商城案例的基础上进行测试

...

.app{

position: relative;

}

.app .download {

position: absolute;

display: none;

height: 100px;

width: 100px;

}

.app:hover .download {

display: block;

}

...

10. border

Document

我是虚线~

我是实线~左边框是绿色,上下右边框是红色

我是透明色,鼠标碰到我边框会变色哦~

11. 背景色

background-color: bisque; 无需多言☺

注意: 以上不是所有的CSS样式,这些是最常用的标签

4.案例: 小米商城

4.1 小米顶部

小米商城

4.2 二级菜单

小米商城

4.3 推荐区域

小米商城

python Django web开发(一) - 前端  第13张

5. Bootstrap

别人已经帮忙写好的CSS样式

使用方式:

下载Bootstrap使用:

在页面上引入 Bootstrap编写HTML时,按照Bootstrap的规定来编写或者自定制

由于我没有下载Pycharm,无法本地实时测试,我使用的VSCode进行的编辑,所以我继续使用Flaskweb进行页面的访问测试

5.1 初识Bootstrap

下载地址: https://v3.bootcss.com/

BaiDuNetDisk Download:

链接:https://pan.baidu.com/s/1rcZldkNHrpC11f2plUv-rg?pwd=mh5b

提取码:mh5b

下载完成后解压,目录如下: 在服务器中创建必要的目录

[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

Document

接下来使用已经写好的导航栏 链接地址: https://v3.bootcss.com/components/ 复制上面的代码

Document

访问效果如下: 其实你仔细看会发现这个导航栏是有圆角的 接下来我们去掉圆角 F12调试页面 覆盖.navbar样式

再次访问就没有圆角了

可以在相应的位置进行修改,代码部分自己测试修改哈

5.2 栅格系统

栅格系统介绍

整体划分为了12格

大致分为四种风格

.col-xs- .col-sm- .col-md- .col-lg-

响应式:根据页面的宽度,动态的改变布局

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

非响应式:

.col-xs-

列偏移

col-sm-offset-

5.3 container

container

左边

右边

container-fluid

左边

右边

5.4 面板

地址: https://v3.bootcss.com/components/#panels

左边

Panel heading without title

Panel content

Panel heading without title

Panel content

Panel heading without title

Panel content

5.5 媒体对象

添加媒体对象

由于官方文档给的示例代码不全,所以可以F12查看源码,复制页面中的样式

5.6 分页

链接: https://v3.bootcss.com/components/#pagination

案例: 登录

宽度 + 区域居中内边距

Document

用户登录

案例: 后台管理

Document

表单区域

placeholder="jane.doe@example.com">

数据列表

注意: 以下内容是筛选出来的

#First NameLast Name操作
1MarkOtto

编辑

删除

2JacobThornton

编辑

删除

3Larrythe Bird

编辑

删除