WebAPIs-day6

已于 2022-05-08 13:29:37 修改
阅读量549 收藏
点赞数
分类专栏： Web API实用案例 文章标签： javascript 前端
于 2022-05-07 22:18:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JOUKELOVE/article/details/124594584
版权

在这里插入图片描述

文章目录

一、Window对象

目标：学习window对象的常见属性，知道各个BOM对象的功能含义

在这里插入图片描述

1. BOM（浏览器对象模型）

在这里插入图片描述

2. 定时器-延时函数

在这里插入图片描述
体验延迟函数：

<body>
    <button>解除定时器</button>
    <script>
        let btn = document.querySelector('button')
        let timer = setTimeout(function(){
            alert('我是延迟函数')
        },3000) // 在生效时间前点击按钮解除延迟函数则它不会执行
        // 仅执行一次
        btn.addEventListener('click',function(){
            clearTimeout(timer)
        })
    </script>
</body>

在这里插入图片描述

<body>
    <div><img src="../素材/images/ad.png" alt=""></div>
    <script>
        let off = document.querySelector('div')
        let timer = setTimeout(function(){
            off.style.display = 'none'
        },5000)
    </script>
</body>

在这里插入图片描述
补充知识点： 递归函数 自己调用自己就是递归函数

在这里插入图片描述
注意递归函数一定要添加退出条件，避免函数出现死递归的情况

两个定时器的对比
在这里插入图片描述

3. JS执行机制

在这里插入图片描述

结果都是:（因为setTimeout是异步任务，要放到两个同步任务结束后再执行）
1111
3333
2222

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在延迟函数生效前点击，输出结果为：
1
2
4
3
在延迟函数生效后点击，输出结果为：
1
2
3
4

在这里插入图片描述
重点：事件循环的概念（面试）

4. location对象

在这里插入图片描述
在这里插入图片描述

4.1 案例-页面跳转

在这里插入图片描述

    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 本身就是一个链接，如果直接点击，就会进行跳转 -->
    <a href="https://blog.csdn.net/JOUKELOVE/article/details/124072494?spm=1001.2014.3001.5501">支付成功后，<span>5</span>秒之后跳转</a>
    <script>
        let num = 5
        let a = document.querySelector('a')
        let timer = setInterval(function(){
            num--
            a.innerHTML = `支付成功后，<span>${num}</span>秒之后跳转`
            // location.href = 'https://blog.csdn.net/JOUKELOVE/article/details/124072494?spm=1001.2014.3001.5501'
            if(num === 0) {
                clearInterval(timer)
                // 跳转页面
                location.href = 'https://blog.csdn.net/JOUKELOVE/article/details/124072494?spm=1001.2014.3001.5501'
            } 
        },1000)

        
    </script>
</body>

在这里插入图片描述
location,search可以拿到问号后面的参数，location.href得到完整的地址
在这里插入图片描述

示例：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
reload等价于刷新按钮
在这里插入图片描述
点击按钮触发reload对网页进行刷新
在这里插入图片描述

5. navigator对象

在这里插入图片描述

6. history对象

简单了解一下即可
在这里插入图片描述

二、swiper插件

重点是学会如何使用插件
swiper.com.cn 是一个专门做轮播图的技术网站

在这里插入图片描述
在这里插入图片描述
如果同一个页面会有多个轮播图，最好还是给每个设置独立的名字（如在后缀加类名one、two等），方便管理设置

三、本地存储

在这里插入图片描述
重点学习localStorage
在这里插入图片描述

<body>
    <script>
        // 存储数据(简单数据可以直接进行存储) localStorage.setItem('键','值')
        localStorage.setItem('uname','jokerxue')
        // 获取数据
        // localStorage.getItem('键')
        console.log(localStorage.getItem('uname'))
        // 删除数据
        localStorage.removeItem('uname')
    </script>
</body>

存储复杂数据需要用JSON格式

在这里插入图片描述
在这里插入图片描述

// 1. 存储复杂数据类型
let obj = {
	uname: 'JokerXue',
	age: 20,
	address: '太合音乐'
}
// （1）复杂数据类型一定要转换为json字符串再进行存储
//（本地存储只能存储字符串，所以要转换为JSON格式的字符串）
localStorage.setItem('obj', JSON.stringify(obj))

// (2) 取数据 可以使用 JSON.parse()  将json字符串转换为对象
//（获取过来的值是字符串，不是对象没法直接使用，因此我们首先把字符串转换为对象）
console.log(JSON.parse(localStorage.getItem('obj')))

在这里插入图片描述

sessionStorage仅作为一个了解即可
在这里插入图片描述

综合案例-本地存储学习信息

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
思路图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/user.css">
</head>

<body>
  <h1>新增学员</h1>
  <div class="info">
    姓名：<input type="text" class="uname">
    年龄：<input type="text" class="age">
    性别: <select name="gender" id="" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary">
    就业城市：<select name="city" id="" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>

    </select>
    <button class="add">录入</button>
  </div>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>1001</td>
        <td>欧阳霸天</td>
        <td>19</td>
        <td>男</td>

        <td>15000</td>
        <td>上海</td>
        <td>
          <a href="javascript:">删除</a>
        </td>
      </tr> -->
    </tbody>
  </table>
  <script>

    // 读取本地存储的数据 封装为函数
    // 需求1：读取本地存储的数据（封装为函数）
    // 如果本地存储有数据， 则返回 JSON.parse() 之后的对象
    // 如果本地存储没有数据，则默认写入三条数据，注意存储利用JSON.stringify() 存储JSON格式的数据
    function getLocalDate() {
      let data = localStorage.getItem('data')
      if (data) {
        return JSON.parse(data)  //  {xxxxx}
      } else {
        // 如果本地存储没有数据，则默认写入三条数据，注意存储利用JSON.stringify() 存储JSON格式的数据
        let arr = [
      { stuId: 1001, uname: '欧阳霸天', age: 19, gender: '男', salary: '20000', city: '上海' },
      { stuId: 1002, uname: '令狐霸天', age: 29, gender: '男', salary: '30000', city: '北京' },
      { stuId: 1003, uname: '诸葛霸天', age: 39, gender: '男', salary: '2000', city: '北京' },
    ]

        // 写入到本地存储里面
        localStorage.setItem('data',JSON.stringify(arr))

      }
    }
    // getLocalDate()

    //  1. 准备好数据后端的数据
     // 获取父元素 tbody
     let tbody = document.querySelector('tbody')
    // 添加数据按钮 
    // 获取录入按钮
    let add = document.querySelector('.add')
    // 获取各个表单的元素
    let uname = document.querySelector('.uname')
    let age = document.querySelector('.age')
    let gender = document.querySelector('.gender')
    let salary = document.querySelector('.salary')
    let city = document.querySelector('.city')
    // 渲染函数  把数组里面的数据渲染到页面中
    function render() {
       // 需求2：渲染模块
            // 先读取本地存储数据，然后渲染 给arr
       let arr = getLocalDate()

      // 先干掉以前的数据  让tbody 里面原来的tr 都没有
      tbody.innerHTML = ''
      // 在渲染新的数据
      // 根据数据的条数来渲染增加 tr  
      for (let i = 0; i < arr.length; i++) {
        // 1.创建tr  
        let tr = document.createElement('tr')
        // 2.tr 里面放内容
        // 把序列号设置为自定义属性data-id
        tr.innerHTML = `
        <td>${arr[i].stuId}</td>
        <td>${arr[i].uname}</td>
        <td>${arr[i].age}</td>
        <td>${arr[i].gender}</td>
        <td>${arr[i].salary}</td>
        <td>${arr[i].city}</td>
        <td>
          <a href="javascript:" data-id="${i}">删除</a>
        </td>
        `
        // 3.把tr追加给 tobdy  父元素.appendChild(子元素)
        tbody.appendChild(tr)


      }
    }
    // 页面加载就调用函数
    render()

    add.addEventListener('click', function () {
      // 需求3：添加模块
            // 注意，先取的最新的本地存储数据，然后追加
            let arr = getLocalDate()
            // 新增了数据，要把新数据存储到本地存储，别忘记转换
      
      // alert(11)
      // 获得表单里面的值   之后追加给 数组 arr  用 push方法
      arr.push({
        // 得到数组最后一条数据的学号 1003    + 1
        stuId: arr[arr.length - 1].stuId + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      })
      // console.log(arr)

      // 新增完之后，存储到仓库里
      localStorage.setItem('data', JSON.stringify(arr))


      // 重新渲染我们的函数
      render()
      // 复原所有的表单数据
      uname.value = age.value = salary.value = ''
      gender.value = '男'
      city.value = '北京'
    })


    // 删除操作， 删除的也是数组里面的数据 ， 但是我们用事件委托
    tbody.addEventListener('click', function (e) {
      // 需求4：删除模块
            // 注意，先取的最新的本地存储数据，然后追加
            // 新增了数据，要把新数据存储到本地存储，别忘记转换
            let arr = getLocalDate()
            
      // alert(11)
      // 我们只能点击了链接 a ，才会执行删除操作
      // 那我们怎么知道你点击了a呢？
      // 俺们只能点击了链接才能做删除操作
      // console.dir(e.target.tagName)
      if (e.target.tagName === 'A') {
        // alert('你点击了链接')
        // 删除操作  删除 数组里面的数据  arr.splice(从哪里开始删，1)
        // 我要得到a的id 需要
        // console.log(e.target.id)
        // 第一条数据不允许删除，避免程序错乱
        if(e.target.dataset.id === '0') {
          alert('当前数据不允许删除操作')
          return
        }
        arr.splice(e.target.dataset.id, 1)

        // 新增了数据，要把新数据存储到本地存储，别忘记转换
        // 存储到本地
        localStorage.setItem('data', JSON.stringify(arr))

        // 重新渲染我们的函数
        render()
      }
    })

  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
重点有两个，一是分辨它是自定义属性，二是得到属性值
dataset是一个集合，把属性都拿进来，但如果有多个自定义属性且想指定某属性时，要加目标属性的后缀，如box.dataset.index

今日总结

在这里插入图片描述

Rookie_wbe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webAPIs-day02笔记.md
12-06
webAPIs-day02笔记.md
.Net Core项目如何设置静态页面为项目的启动页面？
weixin_30315723的博客
06-14 1491
最近在使用Core的webApi作为服务器端的数据提供者，但是需要有自己的官网，来指导前端如何使用该接口，因为不想接入MVC这么大的框架，于是写了个静态页面挂上doc文档提供下载就行。 在项目的Startup.cs文件中的Configure方法中添加下列代码即可 DefaultFilesOptions defaultFilesOptions = new DefaultFilesOption...
ASP.NET Core基础之图片文件(一)-WebApi访问静态图片
最新发布
物联网大联盟
01-02 1577
怎么才能访问系统中的静态图片文件呢？
VB.NET WebApi 启动自动跳转到Swagger接口界面
岔路ko的博客
06-30 872
一、确认加载了MVC 二、添加Controllers/HomeController 三、添加 App_Start/RouteConfig.vb 四、调整 Global.asax 以上即可。
.net core webapi使用静态文件
醉酒的李白、的博客
03-04 2148
//启用静态文件 app.UseStaticFiles(); //发布时服务器注册静态资源 string fileUpload = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "ExcelTemplate"); if (!Directory.Exists(fileUpload)) { Directory.CreateDirectory(fileUpload); } app.UseStaticFiles(new StaticFileOption.
JavaWeb 过滤器应用之页面静态化
weixin_34195364的博客
10-07 86
页面静态化是把servlet请求的资源所做输出保存到html中, 然后重定向到 html 页面, 二次访问时,这个html已经存在,那么直接重定向,不用再去访问servlet! // StaticFilter public class StaticFilter implements Filter{ private FilterConfig config; ...
WebAPI-day-01.md
10-23
自给学习整理的笔记，即可以为自给提供复习，也可以为大家提供帮助。喜欢请关注
day02_WebAPIs.md
07-22
黑马前端
WebAPI编程资料WebAPI 案例 代码 素材 笔记 作业资料.zip
08-04
day01_WebAPIs.ppt 随堂测试题 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素.html 06-执行事件步骤.html 07-操作...
Firefox OS App Day_Web APIs
03-22
该文档包含了HTML5的一些例子，包括Audio、canvas等简单demo。
WebWebWeb：制作Web API和静态文件服务器的最简便方法。 零依赖！
02-05
WebWebWeb 我们构建了最舒适的方法，使Web API和静态文件服务器在Twitch for Coding Cafe上运行！ WebWebWeb使您只需几行代码即可使用API超级轻松创建Web服务器。 如果您需要带有来自SSL证书的安全Web服务器，请签出 ，它会自动为您检索和更新它们，同时保持WebWebWeb的简单性！ Instafluff 喜欢这些项目吗？ 支持我的开源项目的最好方法是成为GitHub上的Comfy赞助商！ 快来Twitch上最舒适的角落与我们一起出去玩吧！ 使用说明 安装webwebweb npm install webwebweb --save 在端
c# webapi 跳转
weixin_34302798的博客
07-12 3528
c# webapi 跳转  public HttpResponseMessage Post(){    // ... do the job    // now redirect       HttpResponseMessage resp = new HttpResponseMessage(HttpStatusCode.Moved)        resp.Headers.Location = n...
asp.net WebApi 返回html页面
日志
08-24 7641
asp.net WebApi 返回html页面 public HttpResponseMessage Get(string id) { if (id.Contains("OID=")) { id = id.Replace("OID=", ""); } ...
Web用户的身份验证及WebApi权限验证流程的设计和实现
热门推荐
上步七星
01-18 5万+
前言：Web 用户的身份验证，及页面操作权限验证是B/S系统的基础功能，一个功能复杂的业务应用系统，通过角色授权来控制用户访问，本文通过Form认证，Mvc的Controller基类及Action的权限验证来实现Web系统登录，Mvc前端权限校验以及WebApi服务端的访问校验功能。 1. Web Form认证介绍 Web应用的访问方式因为是基于浏览器的Http地址请求，所以需要验证用
WebApi中将静态页面作为首页
12-26 778
WebApi中将静态页面作为首页 使用场景 在我的项目中使用Asp.Net WebApi作为后端数据服务，使用Vue作为前端Web，在服务器IIS上部署时需要占用两个端口，一个是80端口，用户在浏览器上从这个端口获取打包好的Web页面；另一个是8080端口，Web页面从此端口获取或提交数据，访问8080端口需要跨域。这种方式客户不认可，只能占用一个80端口，不允许其他端口开放，所以就将打...
webapis学生报名系统代码步骤
11-25
设计一个webapis学生报名系统的代码步骤如下： 1. 数据库设计：首先确定需要存储的数据，例如学生的基本信息，课程信息等。根据需求设计数据库表结构，并创建相应的表。 2. 后端接口设计：根据系统需求，设计后端接口，包括学生信息的录入、查询、修改和删除等功能。使用合适的编程语言，如Java、Python等，实现这些接口。 3. 前端界面设计：设计一个用户友好的前端界面，包括学生报名表单和查询功能。使用HTML、CSS、JavaScript等技术实现界面的布局和交互，确保用户能够方便地输入和查询信息。 4. 前后端交互：通过AJAX或其他技术，实现前后端的数据交互。前端向后端发送请求，后端处理请求并返回相应的数据。 5. 学生信息录入：在前端界面设计好的报名表单中，用户输入个人信息，通过调用后端接口将数据传递到后台。后台接收并验证输入的数据，并将学生信息存储到数据库中。 6. 学生信息查询：在前端界面设计好的查询功能中，用户输入需要查询的条件，通过调用后端接口将查询条件传递到后台。后台根据查询条件在数据库中查找匹配的学生信息，并将查询结果返回给前端。 7. 学生信息修改和删除：在前端界面设计好的修改和删除功能中，用户选择需要修改或删除的学生信息，并通过调用后端接口将相应的操作请求传递到后台。后台根据请求进行相应的操作，更新或删除数据库中的对应数据。 8. 错误处理和数据校验：在整个系统设计过程中，需要考虑错误处理和数据校验。在后端接口中，对输入的数据进行合法性检查，确保输入的数据符合要求。在前端界面中，对用户的输入进行格式验证，及时反馈给用户。 9. 安全性保障：为了保障系统的安全性，可以采用身份认证、权限控制等机制，确保只有授权的用户能够进行报名和查询等操作。 10. 测试和部署：在完成系统开发后，进行系统的测试和调试。确保系统的正确性和稳定性。最后将系统部署到服务器上，供用户使用。 以上是一个简单的webapis学生报名系统代码步骤，具体实现还需要根据具体需求进行调整和完善。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值