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>