前后端数据交互
1-1 初识前后端通信
- 前后端通信是什么
- 前后端数据交互的过程
- 浏览器和服务器之间数据交互的过程
- 后端向前端发送数据
- 访问页面
- 前端向后端发送数据
- 用户注册
1-2 前后端通信的过程与概念解释
1.前后端通信的过程
- 前后端通信是在请求-响应中完成的
- 概念及解释
- 前端
- 浏览器端
- 客户端：只要能和服务器通信的就叫客户端
- 后端：服务器端
1-3 前后端的通信方式
<a href="www.baidu.com">百度</a>
<form action="https://www.imooc.com" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="登录">
</form>
<script>
// 1.使用浏览器访问网页
// 浏览器地址栏输入网址 按下回车
// 2.HTML标签
// link/img/script
// 浏览器在解析HTML标签的时候遇到一些特殊标签 会再次向服务器发送请求
// 还有一些标签 浏览器解析的时候 不会向服务器发送请求 但是用户可以使用他们向服务器发送请求
// a/form
</script>
HTTP协议
2-1 初识HTTP
- http是什么
- 超文本传输协议 HyperText Transter Protocol
- 超文本：原先一个个单一的文本 通过超链接将其联系起来 由原先的单一的文本变成了可无限延伸 扩展的超文本 立体文本
- http请求响应的过程
2-2 HTTP报文
- http报文是什么
- 浏览器向服务器发送请求时 请求本身就是信息叫请求报文
- 服务器向浏览器发送响应时传输的信息叫响应报文 2.HTTP报文格式 请求 请求头(起始行+首部) 请求体 (Get请求没有请求体) 响应 响应头(起始行+首部) 响应体
2-3 HTTP方法
// 1.常用的http方法
// 浏览器发送请求时采用的方法 和响应无关
// GET POST PUT DELETE
// 用来定义对资源采取什么样的操作的 有各自的语义
// get获取数据
// 获取资源（文件）
// post创建数据
// 注册
// put修改数据
// 修改密码 个人信息
// delete删除数据
// 删除一条评论
// 增删改查
//这些方法虽然有各自的语义 但并不是强制的
// 3.RESTful接口设计
// 一种接口设计风格 充分利用http语义
// 通过id获取用户信息 使用GET方法
// https://www.imooc.com/getUser?id=1
// GET
// https://www.imooc.com/getUser?id=1
// 注册新用户 使用post方法
// https://www.imooc.com/api/http/addUser
// POST
// https://www.imooc.com/api/http/addUser
2-4 GET和POST方法的对比
// 1.语义
// GET 获取数据
// POST 创建数据
// 2.发送数据
// GET通过地址在请求头中携带数据
// 能携带的数据量和地址的长度有关系 一般最多就几K
// POST既可以通过地址在请求头中携带数据 也可以通过请求体携带数据
// 能携带的数据量理论上是无限的
// 携带少量数据 可以使用GET请求 大量的数据可以使用POST请求
// 3.缓存
// GET可以被缓存 POST不会被缓存
// 4.安全性
// GET和POST都不安全
// 发送密码或其他敏感信息时不要使用GET 主要是避免直接被他人窥屏或通过历史记录找到你的密码
2-5 HTTP状态码
1.http状态码是什么？
- 定义服务器对请求头的处理结果 是服务器返回的 2.http状态码的定义 100-199 代表请求已被接受 需要继续处理 200-299 成功 300-399 重定向 www.imooc.com www.imooc.com
301 Moved Permanently 永久性重定向 302 Move Temporaily 临时性重定向 304 NOT Modified 没有修改 400-499 404 Not Found 500-599 服务器错误 500 internal server error
Cookie
3-1 初识cookie
// 1.cookie是什么
// cookie全称http cookie 简称cookie
// 是浏览器存储数据的一种方式
// 因为存储在用户本地 而不是存储在服务器上 是本地存储
// 一般会随着浏览器每次请求发送到服务器上
// 2.cookie有什么用
// 利用cookie跟踪统计用户访问该网站的习惯 比如什么时间访问 访问了哪些页面 在每个网页的停留时间等
// 3.浏览器中操作cookie
// 不要在cookie保存密码或敏感信息
3-2 Cookie的基本用法
// 写入cookie
// document.cookie = `username=ZS`
// document.cookie = `age=18`
// document.cookie = `username=ZS; age=18`
// 2.读取cookie
console.log(document.cookie);
// 读取的是一个由名值对构成的字符串 每个名值对之间 由`;`（一个分号一个空格）隔开
// username='zs'; age=18
3-3 Cooike的属性
<script>
// 1.Cookie的名称 (name)和值(value)
// 最重要的两个属性 创建Cookie时必须填写 其他属性可以使用默认值
// Cookie的名称或值如果包含非英文字母 则写入时需要使用encodeURIComponent()编码 读取时使用
// decodeURIComponent()解码
document.cookie=`username=${encodeURIComponent('张三')}`
document.cookie=`${encodeURIComponent('用户名')}=${encodeURIComponent('张三')}`
// 一般名称使用英文字母 不要用中文 值可以用中文 但是要编码
// 2.失效(到期)时间
// 对于失效的Cookie会被浏览器清除
// 如果没有设置失效(到期)时间 这样的Cooike称为会话Cookie
// 它在内存中 当会话结束 也就是浏览器关闭时 Cookie消失
// expires
// 值是日期类型
// document.cookie=`username=alex; expires=${new Date(
// `2100-1-01 00:00:00`
// )}`
// max-age
// 值为数字 表示当前时间+多少秒后过期 单位是秒
// document.cookie = `username=alex; max-age=5`
// document.cookie = `username=alex; max-age=${24 * 3600 *30}`
// 如果max-age的值是负数或0，cookie会被删除
// document.cookie = `username=alex; max-age=0`
// 3.Domain域
// Domain限制了访问cookie的范围
// document.cookie = `username=alex; domain=www.imcooc.com`
// www.imcooc.com m.imcooc.com
// 父域：.imcooc.com
// 4.path 路径
// path限定了访问cookie的范围(同一域名下)
// 使用JS只能读写当前路径和上级路径的cookie 无法读写下级路径的cookie
// document.cookie = `username=alex; path='course/list'`
// 当name domain path属性都相同时才是同一个cookie
// httpOnly
// 设置了httpONLY属性的cookie不能通过JS去访问
// secure
// secure限定了只有在使用https而不是http的情况下才可以发送给服务端
// domain path secure都要满足条件 还不能过期的cookie才能随着请求发送到服务器端
</script>
3-4 cookie的封装
// 写入cookie
const set = (name,value,{maxAge,domain,path,secure}={})=>{
let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
if(typeof maxAge==='number'){
cookieText+=`; max-age=${maxAge}`
}
if(domain){
cookieText+=`; domain=${domain}`
}
if(path){
cookieText+=`; path=${path}`
}
if(secure){
cookieText+=`; secure=${secure}`
}
document.cookie = cookieText
}
// 通过name属性获取cookie的值
const get = name=>{
name=`${encodeURIComponent(name)}`
const cookies= document.cookie.split('; ');
for(const item of cookies){
const [cookieName,cookieValue] = item.split('=');
if(cookieName===name){
return decodeURIComponent(cookieValue)
}
}
return
}
// 根据name domain path删除cookie
const remove =(name,{domain,path}={})=>{
set(name,'',{domain,path,maxAge:-1})
}
export {set,get,remove}
3-5 Cookie的注意事项
1.前后端都可以创建cookie 2.cookie有数量限制
- 每个域名下的cookie数量有限
- 当超过单个域名限制后 再设置cookie 浏览器就会清除以前设置的cookie 3.cookie有大小限制
- 每个cookie的存储容量很小 最多只有4kb左右
localstorage
4-1 初识localstorage
- localstorage是什么
- localstorage也是一种浏览器存储数据的方式（本地存储）它只是存储在本地 不会发送到服务器端
// 单个域名下的localstorage总大小有限制
// 在浏览器中操作localstorage
// localstorage的基本用法
// console.log(localStorage);
localStorage.setItem("username",'alex')
localStorage.setItem("username",'zs')
localStorage.setItem("age",18)
localStorage.setItem("sex",'male')
// length
console.log(localStorage.length);
// getItem()
console.log(localStorage.getItem('username'));
console.log(localStorage.getItem('sex'));
console.log(localStorage.getItem('age'));
// removeItem()
localStorage.removeItem('username')
localStorage.removeItem('age')
// 删除不存在的key不报错
localStorage.removeItem('aa')
// clear()清除
localStorage.clear()
// 获取不存在的返回null
console.log(localStorage);
4-2 使用localstorage实现自动填充
<form action="https://www.imooc.com" method="post" id="login">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="登录" id="btn">
</form>
<script>
// 使用localstorage实现自动填充
const loginForm = document.getElementById('login')
const btn = document.getElementById('btn')
const username = localStorage.getItem('username')
if(username){
loginForm.username.value = username
}
btn.addEventListener('click',e=>{
e.preventDefault()
localStorage.setItem('username',loginForm.username.value);
loginForm.submit()
})
</script>
4-3 localstorage的注意事项
1.localstorage的存储期限 localstorage是持久化的本地存储 除非手动清除 （比如通过JS删除或者清除浏览器清除缓存）否则数据是永远不会过期的
sessionStorage 当会话关闭（比如关闭浏览器）的时候 sessionStorage中的数据会被清空 sessionStorage.setItem('username','alex'); console.log(sessionStorage.getItem('username')); sessionStorage.removeItem('username') sessionStorage.clear()
localStorage键和值的类型 localstorage存储的键和值只能是字符串类型 不是字符串类型也会转换为字符串类型再存进去 localStorage.setItem({},18) console.log(typeof localStorage.getItem('[object Object]'),localStorage.getItem('[object Object]')); console.log({}.toString()); 3.不同域名下能否共用localstorage 不同域名不能共用localstorage的
4，localstorage的兼容性 IE7以下版本不兼容localstorage
