前端与后端的概念
前端
任何与用户直接打交道的操作界面 都可以称之为前端>>>:接待员
后端
不直接与用户打交道 主要负责内部真正的业务逻辑的执行>>>:幕后操作者
前端学习之路
专业的前端也需要培训至少六个月 而我们作为后端开发工程师 前端只学最基本最核心的一块 目的不是为了让你直接可以从事前端 而是给你以后的工作提供方便
1.防止别人蒙你
2.可以自己编写简易的页面
3.逼急了甚至也可以转前端
前端三剑客
HTML 网页的骨架
CSS 网页的样式
JavaScript 网页的动态
"""
蜡笔小新光着身子 HTML
穿裙子 抹口红 CSS
丢根钢管 舞起来 JS
"""
前端前戏
1.编写服务端
2.浏览器充当客户端访问服务端
3.浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)
4.HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式
软件开发架构
cs架构:client-------->server
bs架构:browser------->server
# 前端其实就是bs端，页面就在浏览器中显示
'''我们学习前端只需要有浏览器即可，翻译前端代码的是浏览器'''
# 建议使用浏览器是：谷歌浏览器（兼容性是最好的）------->前端最难的就是解决兼容性问题
在浏览器中输入一个网址，到返回浏览器，渲染成页面，这个过程发生了那些事情
"""
1. 浏览器朝服务端发起请求
2. 服务端接收请求
3. 服务端开始处理请求，并返回数据
4. 数据返回给了浏览器，浏览器进行渲染，展示给用户
"""
# 浏览器就是万能的客户端，所以，浏览器有了，相当于客户端有了，我们就可以通过socket写一个服务端
浏览器是万能客户端，它可以充当很多服务端的客户端
# 浏览器是如何识别不同的服务端的?
'''是因为浏览器指定了统一的规则，你要是想让你的服务端和浏览器进行正常的交互，那么你就要遵循这个规则'''
# 这个规则就叫HTTP协议.
TCP/IP
HTTP协议
"""
超文本传输协议, 作用：就是规定了服务端和浏览器之间的数据交互格式.
"""
# 1. 四大特点
1. 基于请求和响应----------->浏览器发起请求-------->服务端做出响应
2. 基于TCP/IP协议之上的应用层协议
3. 无状态
# 网站在早期的时候是不需要登录的，新闻网站
'''不记录用户的信息，后来随着技术的发展，诞生了京东，支付宝，拼多多等，我们每个人要想使用这个网站，就必须登录，要登录，就要记录用户信息'''
# 能够记录用户信息的技术有：cookie、session、token...
4. 短链接
# 客户端和服务端建立链接之后，客户端发送一些请求，服务端响应一次，然后断开
# 长链接：一旦建立链接，不会立马断开，中间有间隔
'''客服系统------->长链接'''
# 2. 请求数据格式
2.1 请求首行(HTTP协议的版本号，请求方式)
2.2 请求头(一堆k:v键值对)
2.3 \r\n
2.4 请求体
'''不是所有的请求方式都有，get请求方式没有请求体，post请求方式有请求体'''
# 请求体里面放的都是一些敏感数据
# 3. 响应数据格式
3.1 响应首行(HTTP协议的版本号，响应状态码)
3.2 请求头(一堆k:v键值对)
3.3 \r\n
3.4 请求体
# 响应状态码
'''就是通过用一串简单的数字代码一段复杂的描述信息''' 404
1XX:服务端接收到消息正在处理
2XX:代表请求成功(200 OK)
3XX:重定向(向直接进入到A页面，但是内部自动跳转了B页面)
4XX:
404：请求资源不存在
403：没有权限
5XX:500 服务器内部错误
# 以后你想深入学习HTTP协议的话，推荐一本书：图解HTTP，图解TCP
# 补充：请求方式
1. get
# 朝服务端要数据
eg: 在网址栏里输入baidu.com
'''没有请求体，数据放在哪里了？跟在了网址的后面'''
https://www.baidu.com/s?k=v&k1=v1&k2=v2
https://www.baidu.com/s?wd=美女&ie=utf-8&
2. post
# 朝服务端提交数据
eg：你在登录网站的时候，输入用户名和密码，然后把用户名和密码提交到服务端进行验证
HTML简介
1.直接发送手写的数据
2.转为发送文件里面的数据
3.编写HTML出现特殊的现象
超文本标记语言:所见即所得(没有任何逻辑 是什么就是什么)
HTML概览
**1.HTML注释语法**
<!--注释内容--> 快捷方式： Ctrl + ?
**2.HTML文档结构**
<html> 固定格式 html包裹
<head>主要放跟浏览器交互的配置</head>
<body>主要放给用户查看的花里胡哨的内容</body>
</html>
**3.HTML标签分类**
单标签(自闭和标签)
<img/>
双标签
<h1></h1>
预备知识
1.网页信息数据一般也会存放于文件中
.html
2.pycharm支持前端所有类型的文件编写
内置有自动补全的功能 我们只需要专注于标签名的编写即可
3.html文件的打开
内置有自动调用浏览器的功能
标签的分类
<h1></h1>
<a></a>
<img />
# 双标签
<h1></h1>
<a></a>
# 单标签
<img />
head内常见标签
1.title网页小标题
2.meta定义网页源信息(很多配置)
<meta name="keywords" content="查询关键字">
<meta name="description" content="网页简介">
3.style内部支持编写css代码
<style>
h1 {
color: greenyellow;
}
</style>
4.link引入外部css文件
<link rel="stylesheet" href="mycss.css">
5.script支持内部编写js代码也可以引入外部js文件
<script>
prompt('好好活着','不要浪费生命')
</script>
<script src="myjs.js"></script>
ps:了解每个标签大致的作用即可
body内基本标签
1.标题系列标签
h1~h6
2.段落标签
p
3.其他标签
u 下划线
i 斜体
s 删除线
b 加粗
#ps:相同效果可能是有不同的标签实现的 不是独一无二的
4.换行与分割线
br 换行
hr 分割线
"""
标签的分类二
行内标签 u i s b
内部文本多大就占多大
块儿级标签 h系列 p div
独占一行
"""
常见符号
1. 空格
2.> 大于
3.< 小于
4.& &符
5.¥ ¥
6.© ©
7.® ®
body内布局标签
div
块儿级标签
span
行内标签
"""
标签之间可以相互嵌套 并且理论上可以无线套娃
块儿级标签内部可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
行内标签内部只能嵌套行内标签
"""
# 这两个标签一般在刚开始构建页面的时候用，主要用来占位置的.
# span占的是文本位置
'''这两个标签没有实际的意义'''
body内常用标签
"""
标签括号内填写的 什么=什么 称之为的标签的属性
1.默认属性
标签自带的 编写的时候有自动提示
2.自定义属性
用户自定义 编写不会有提示甚至会飘颜色
"""
a标签 链接标签
href
1.填写网址 具备跳转功能
href='url'
2.填写其他标签的id值 具备锚点功能
href='#id'
target
默认_self原网页跳转
_blank新建网页跳转
img标签 图片标签
src
1.填写图片地址
2.还有更多特性 目前没法讲
title
鼠标悬浮在图片上自动展示的文本
alt
图片加载失败提示的信息
width\height
图片的尺寸 两者调整一个即可 等比例缩放
列表标签
无序列表
<ul>
<li>手机</li>
<li>衣物</li>
<li>电子</li>
</ul>
ps:页面上所有有规则排列的横向或者竖向的数据 一般使用的都是无序列表
type属性：
● disc（实心圆点，默认值）
● circle（空心圆圈）
● square（实心方块）
● none（无样式）
有序列表
<ol type="I">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
ps:还可以通过type竖向切换数字
标题列表
<dl>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dd>小标题3</dd>
</dl>
表格标签
1.先写基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再写表头及表单数据
<tr> <!--一个tr标签就表示一行 -->
<th>编号</th> <!--th主要用于表头字段中 用来加粗显示 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td> <!--td主要用于表达数据中 -->
<td>jason</td>
<td>18</td>
</tr>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
</tbody>
</table>
属性:
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列（即合并单元格）
标签的两个重要属性
1. id
# 类似于人的身份证号，一个html文档中，id值不能重复，必须唯一
2. class
# 每一个标签都可以有class属性值，并且，每一个标签都可以有多个class值
3. 标签不光有id和class属性，还可以自定义属性
<div id='' class='' username='aa' password='123'></div>
表单标签
# 用在用户输入的数据、用户上传的数据等等都是通过form表单实现，它可以把用户输入的数据通过网络传给后端
form
# input标签是行内元素
'''通过改变input的type属性，来达到不同的输入类型'''
type:
text------>文本
password----->密文输入密码
date------>日期类型
radio: # 一组的单选框需要name值一样
<input type="radio" name="gender"> 男
checkbox: # 一组的复选要name值一样
<input type="checkbox" name="hobby" checked> 足球
# 单选可复选如果默认选中，只需要给标签加check属性
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="" selected>东京</option> # 选中selected
<option value="">东京1</option>
</select>
<p>
<textarea name="" id="" cols="30" rows="10"></textarea> # 获取大段文本框
</p>
'''
form表单中得按钮：
<input type="submit" value="提交"> 提交表单的功能
<input type="button" value="提交"> 没有任何功能
<input type="reset" value="按钮">
<button>提交</button>
'''
属性说明:
● name：表单提交时的“键”，注意和id的区别
● value：表单提交时对应项的值
○ type="button", "reset", "submit"时，为按钮上显示的文本年内容
○ type="text","password","hidden"时，为输入框的初始值
○ type="checkbox", "radio", "file"，为输入相关联的值
● checked：radio和checkbox默认被选中的项
● readonly：text和password设置只读
● disabled：所有input均适用
● placeholder：对输入框做一个说明解释
表单标签的补充说明
基于form表单发送数据
1.用于获取用户数据的标签至少应该含有name属性
name属性相当于字典的键
用户输入的数据会被保存到标签的value属性中
value属性相当于字典的值
2.如果不需要用户填写数据 只需要选择 那么我们需要自己填写value
<input type="radio" name="gender" value="male">
ps:没有name属性的标签 form表单会直接忽略 不会发送
3.针对input标签理论上应该配一个label标签绑定 但是也可以不写
<label for="d1">username:
<input type="text" id="d1">
</label>
<label for="d1">username:</label>
<input type="text" id="d1">
4.标签的属性如果和属性值相等 那么可以简写
<input type="file" multiple="multiple">
<input type="file" multiple>
5.针对选择类型的标签可以提前设置默认选项
<input type="radio" name="gender" checked="checked">
<input type="radio" name="gender" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" name="gender" checked>
<option value="" selected="selected">222</option>
<option value="" selected>222</option>
6.下拉框与文件上传可以复选
<input type="file" multiple>
<select name="" id="" multiple>
# 后端的代码大家混个脸熟即可，代码不需要掌握，flask框架写的
'''python中得框架：Django flask ... '''
# 先安装flask，然后在用
pip install flask
# form表单默认提交的请求方式是get，如何更改呢？
<form action="" method='post'>
action：
1. 什么都不写，默认提交到当前地址
2. 全写：http://127.0.0.1:5000/index/ # 朝这个完整地址提交数据
3. 只写后缀
/index/ # 它会自定拼接路径：ip:port/index/------->在django框架中会遇到
method='post' # 改变提交方式的
<input type="password" placeholder="请输入密码" name="password">
"""
每一个标签都应该有一个name属性，name属性的值相当于是字典的key，用户输入的值相当于是字典的v
"""
# 针对于用户选择的标签，都应该又一个value值
<input type="checkbox" name="hobby" value="1"> 篮球
<input type="checkbox" name="hobby" checked value="2"> 足球
<input type="checkbox" name="hobby" checked value="3"> 台球
# 针对于文件上传
'''
必须满足2个条件：
1. 请求方式必须是post
2. enctype属性：
类似以是提交数据的编码格式
1. urlencode----->默认的提交格式，它只能提交普通文本数据，不能提交文件等数据
2. form-data------>支持了提交文件数据，并且也可以提交普通文件数据
3. json------>{"k":"v"}
3. form表单只能提交2种
urlencode form-data
不能提交json格式的数据
4. enctype="multipart/form-data"
'''
flask代码
from flask import Flask,request
app = Flask(__name__)
# 路由地址----->网址栏里面地址后面的后缀
@app.route('/index/', methods=['GET', 'POST'])
def index():
# 接收前端提交过来的数据
print(request.form) # ----->form只能接收post提交的文本数据，不能接收get提交的数据
print(request.files) # 接收文件数据
file_obj = request.files.get('myfile')
file_obj.save(file_obj.filename)
return 'OK'
# 3. 启动框架
app.run()
浙公网安备 33010602011771号