iframe嵌套单页面
iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素
<style>/* iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 */iframe{width: 800px;height: 600px;display: block;margin: 100px auto;}</style></head><body><iframe src="./index1.html" frameborder="0"></iframe> </body>
iframe嵌套多页面
嵌套多页面,需要使用 iframe + a 标签
(1) a标签的target属性 : 在什么位置打开href网页
_self :当前页面打开
_blank :新页面打开
iframe标签name属性 :iframe标签中打开
(2)iframe标签嵌套多网页思路
a. 给iframe标签设置一个name属性
b 给a标签设置href决定条转什么网页,设置iframe标签name属性决定在 iframe标签跳转
<style>iframe{width: 800px;height: 600px;display: block;margin: 100px auto;}</style></head><body><!-- 嵌套多页面,需要使用 iframe + a 标签 (1) a标签的target属性 : 在什么位置打开href网页_self :当前页面打开_blank :新页面打开iframe标签name属性 :iframe标签中打开(2)iframe标签嵌套多网页思路a. 给iframe标签设置一个name属性b 给a标签设置href决定条转什么网页,设置iframe标签name属性决定在 iframe标签跳转--><a href="./index1.html" target="fm">页面1</a><a href="./index2.html" target="fm">页面2</a><a href="./index3.html" target="fm">页面3</a><iframe src="./index1.html" frameborder="0" name="fm"></iframe></body>
token实现
1..token是什么 ： 认证令牌
token是一串经过加密之后的字符串，相当于是用户一种身份认证令牌。类似于古代的腰牌,现代的工牌。 见到这个牌子，服务器才知道你是自己人，才会把数据响应给你。
2.token应用 ： 免登录
有了token之后，用户就不需要每一次访问网站都要先输入账号密码，才能拿到数据了。 而是只需要登录一次，以后拿着token，服务器就知道你是哪一个用户了。
2.token的工作流程
token工作流程分为三个步骤
第一步： 用户发送登录请求
第二步：服务器响应token,客户端将token存储在本地
第三步： 登录之后的所有请求，用户都需要在请求头中发送token
图解
使用步骤:
* 1. 接收 登录请求ajax时候得到的token,将其存放在本次存储中
```js
localStorage.setItem('mytoken', res.data.token )
```
* 2. 在 其他接口的请求头中添加Authorization,(使用axios框架添加请求头的方法如下)
```js
headers:{
'Authorization' : localStorage.getItem('mytoken')
}
```
*** `由于之后的每次ajax请求都需要 在请求头中添加,所有,推荐使用axios拦截器`
`在请求拦截器中加入`:
> //如果当前浏览器有token,就把token加到请求头中
> let mytoken = localStorage.getItem('mytoken')
> if (mytoken) {
> config.headers.Authorization = mytoken
> }
`在响应拦截器中加入`:
> //如果error.response.status == 401 说明token过期,获取没有token.
> //需要提示用户重新登录
> if (error.response.status == 401) {
> alert('请重新登录')
> location.href = './login.html'
> }
`具体代码如下`:
```js
// 2.1 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
//如果当前浏览器有token,就把token加到请求头中
let mytoken = localStorage.getItem('mytoken')
if (mytoken) {
config.headers.Authorization = mytoken
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 2.2 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
//如果error.response.status == 401 说明token过期,获取没有token.
//需要提示用户重新登录
if (error.response.status == 401) {
alert('请重新登录')
location.href = './login.html'
}
return Promise.reject(error);
});
```
(1)数组嵌套数组
(2)对象嵌套数组
Object.keys 静态方法 与map() 结合方法
数组嵌套数组
let arr = [{"id":"13922","name": "史磊","group": 1,"score": [91,55,94,30,""]},{"id":"13923","name": "史磊","group": 1,"score": [91,55,94,30,""]},{"id":"13924","name": "史磊","group": 1,"score": [91,55,94,30,""]},{"id":"13925","name": "史磊","group": 1,"score": [91,55,94,30,""]},{"id":"13926","name": "史磊","group": 1,"score": [91,55,94,30,""]}]document.body.innerHTML = arr.map(item=>`<tr><td>${item.id}</td><td>${item.name}</td><td>${item.score[0]}</td><td>${item.score[1]}</td><td>${item.score[2]}</td><td>${item.score[3]}</td><td>${item.score[4]}</td></tr><br>`).join('')
(2)对象嵌套数组
Object.keys(data)结合map()方法
let obj = {"13922": {"name": "史磊","group": 1,"score": [91,55,94,30,""]},"13923": {"name": "周娜","group": 2,"score": [51,75,90,"",""]},"13924": {"name": "龙明","group": 3,"score": [84,74,81,"",""]},"13925": {"name": "谭洋","group": 4,"score": [61,48,36,"",""]},"13926": {"name": "龙洋","group": 5,"score": [66,73,41,"",""]},}//(1)先使用Object.keys( 对象名 ) 获取所有的属性名// Object.keys( obj ).map(item=>{//console.log(item)//console.log( obj[ item ].name )//console.log( obj[ item ].score )// })document.body.innerHTML = Object.keys( obj ).map(item=>`<tr><td>${item}</td><td>${obj[ item ].name}</td><td>${obj[ item ].score[0]}</td><td>${obj[ item ].score[1]}</td><td>${obj[ item ].score[2]}</td><td>${obj[ item ].score[3]}</td><td>${obj[ item ].score[4]}</td></tr><br>`).join('')
select下拉菜单
1.select标签是form表单中特殊的标签 : 既是双标签， 也是表单元素
* 拥有双标签的属性: innerText 拥有表单元素的属性: value
2.select标签value值（选中值） : 到底是获取value还是获取innerText
2.1 select标签的value值， 不会获取自身的value， 而是获取option标签的value
2.2 如果option标签有value和innerText,则优先获取value
2.3 如果option标签没有value，则会获取innerText
3.一句话总结:
开发中, 一般把服务器需要的参数放在value中. 把用户看的数据放到innerText中。
<select name="" id="" value="111"><option value="1">湖北省</option><option value="2">湖南省</option><option value="3">广东省</option></select>
