CMS可视化项目-iframe嵌套 token Object.keys(data).map()遍历对象包数组的数据 select下拉菜单

最新推荐文章于 2024-06-25 11:02:53 发布

学习吖

最新推荐文章于 2024-06-25 11:02:53 发布

阅读量1k

点赞数 1

分类专栏： node 文章标签： html css elementui ecmascript

本文链接：https://blog.csdn.net/weixin_68531033/article/details/124733923

版权

node 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

学习吖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CMS可视化项目-iframe嵌套 token Object.keys(data).map()遍历对象包数组的数据 select下拉菜单

iframe嵌套单页面iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 <style> /* iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 */ iframe{ width: 800px; height: 600px; display: block; margin: 100px auto; }
复制链接

扫一扫

专栏目录