webapi第二天

最新推荐文章于 2024-09-21 11:29:05 发布
最新推荐文章于 2024-09-21 11:29:05 发布
阅读量333 收藏
点赞数
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45356160/article/details/127993402
版权

webapi第二天


在这里插入图片描述

事件

在这里插入图片描述

事件监听

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

点名案例

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }

        .qs {

            width: 450px;
            height: 40px;
            color: red;

        }

        .btns {
            text-align: center;
        }

        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        // 数据数组
        let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let start = document.querySelector('.start')
        let end = document.querySelector('.end')
        let qs = document.querySelector('.qs')
        let btns = document.querySelector('.btns')
        let set = null
        let random = null
        start.addEventListener('click',function(){
            //设置定时器一直抽取名字
            set = setInterval(function(){
            random = getRandom(0,arr.length-1)
            qs.innerHTML = `${arr[random]}`
            },100)
        }) 
        end.addEventListener('click',function(){
            //set有作用域,直接访问是访问不到的,所以要
            //设置set为全局变量
            clearInterval(set)
            arr.splice(random,1)
            if(arr.length == 0){
                btns.style.display = 'none'               
            }
        })

    </script>
</body>

</html>

事件类型

在这里插入图片描述

小米搜索框案例(焦点事件)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
         ul {

            list-style: none;
        }.mi {
            position: relative;
            width: 223px;
            margin: 100px auto;
        }

        .mi input {
            width: 223px;
            height: 48px;
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
            border: 1px solid #e0e0e0;
            outline: none;
        }

        .mi .search {
            border: 1px solid #ff6700;
        }

        .result-list {
            position: absolute;
            left: 0;
            top: 48px;
            width: 223px;
            border: 1px solid #ff6700;
            border-top: 0;
            background: #fff;
        }

        .result-list a {
            display: block;
            padding: 6px 15px;
            font-size: 12px;
            color: #424242;
            text-decoration: none;
        }

        .result-list a:hover {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-list">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10S</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
        <script>
            let s = document.querySelector('input')
            let l = document.querySelector('.result-list')
            function a(){
                l.style.display = 'block'
                // 添加一个使她变色的类
                s.classList.add('search')
            }
            function b(){
                l.style.display = 'none'
                s.classList.remove('search')
            }
            s.addEventListener('focus', a)
            s.addEventListener('blur', b)

            // let l = document.querySelectorAll('.result-list li')
            // function a(){
            //     for(let i; i < l.length; i++){
            //         l[i]. 
            //     }
            // }
        </script>
    </div>
</body>
</html>

微博输入案例(文本事件)

在这里插入图片描述
获得的知识点:
得到文本的值可以采用area.value获得

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .weibo {
            position: relative;
            width: 400px;
            height: 400px;
        }
        textarea{
            position: absolute;
            right: 0;
            width: 350px;
            height: 350px;
        }
        p {
            position: absolute;
            bottom: 0;
            right: 0;
        }


    </style>
</head>
<body>
    <div class="weibo">
        <textarea name="weibo" id="area" cols="30" rows="10" maxlength="200"></textarea>
    <div class="fabu">
        <p><span></span>/200<button>发布</button></p>
    </div>
    </div>
    <script>
        // // id选择器
        // let area = document.querySelector('#area')
        // let f = document.querySelector('span')
        // function a(){
        //     let num = area.value.length
        //     f.innerHTML = `${num}`
        // }
        // area.addEventListener('input',a)
        


        //测试
        let area = document.querySelector('textarea')
        let f = document.querySelector('span')
        function a(){
            //获取文本内容的长度要 类名.value.length
            let num = area.value.length
            f.innerHTML = `${num}`
        }
        area.addEventListener('input',a)


    </script>
</body>
</html>

全选文本框(鼠标事件)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }
    </style>
</head>
<body>
    <table>
        <tr>
          <th class="allCheck">
            <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
          </th>
          <th>商品</th>
          <th>商家</th>
          <th>价格</th>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米手机</td>
          <td>小米</td>
          <td>￥1999</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米净水器</td>
          <td>小米</td>
          <td>￥4999</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="check" class="ck">
          </td>
          <td>小米电视</td>
          <td>小米</td>
          <td>￥5999</td>
        </tr>
      </table>
      <script>
        let a = document.querySelector('.allCheck input')
        let b =document.querySelectorAll('.ck')
        function p(){
            if(a.checked == true){
                for(let i = 0; i < b.length; i++){
                    b[i].checked = true   
                }
            }
            else{
                for(let i = 0; i < b.length; i++){
                    b[i].checked = false 
            }
        }
    }
    a.addEventListener('click',p)
      </script>
</body>
</html>

购物车加减(鼠标事件)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
      width: 80px;
    }

    input[type=text] {
      width: 50px;
      height: 44px;
      outline: none;
      border: 1px solid #ccc;
      text-align: center;
      border-right: 0;
    }

    input[type=button] {
      height: 24px;
      width: 22px;
      cursor: pointer;
    }

    input {
      float: left;
      border: 1px solid #ccc;

    }
    
    </style>
</head>
<body>
    <div>
        <input type="text" id="total" value= '1' readonly>
        <input type="button" value="+" id="add">
        <input type="button" value="-" id="reduce">
        </div>

        <script>
            //字符型
            console.log(typeof total.value)
            let a = document.querySelector('#add')
            let b = document.querySelector('#reduce')
            let t = document.querySelector('#total')
            function aa(){
               // t.value = t.value + 1
               //这样写有问题，字符型
               //这样写能隐式转换
               t.value++
            }
            function bb(){
                if(t.value != 1){
                b.disabled == false
                t.value--
                }
                else{
                    t.value = 1
                    b.disabled == true
                }
            }
            a.addEventListener('click',aa)
            b.addEventListener('click',bb)
            
            
        </script>
    
</body>
</html>

高阶函数

在这里插入图片描述

回调函数

在这里插入图片描述

环境对象

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

编程思想

在这里插入图片描述

综合案例

在这里插入图片描述
学到的知识:
classlist的运用
排他思想:全消灭,复活自己


<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .wrapper {
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }

    .tab {
      border: 1px solid #ddd;
      border-bottom: 0;
      height: 36px;
      width: 320px;
    }

    .tab li {
      position: relative;
      float: left;
      width: 80px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      border-top: 4px solid #fff;
    }

    .tab span {
      position: absolute;
      right: 0;
      top: 10px;
      background: #ddd;
      width: 1px;
      height: 14px;
      overflow: hidden;
    }

    .products {
      width: 1002px;
      border: 1px solid #ddd;
      height: 476px;
    }

    .products .main {
      float: left;
      display: none;
    }

    .products .main.active {
      display: block;
    }

    .tab li.active {
      border-color: blue;
      border-bottom: 0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <ul class="tab">
      <li class="tab-item active">国际大牌<span>◆</span></li>
      <li class="tab-item">国妆名牌<span>◆</span></li>
      <li class="tab-item">清洁用品<span>◆</span></li>
      <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
      <div class="main active">
        <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="#" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="#" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="#" alt="" /></a>
      </div>
    </div>
  </div>
  <script>
    let pic = ['imgs/guojidapai.jpg','imgs/guozhuangmingpin.jpg','imgs/qingjieyongpin.jpg','imgs/nanshijingpin.jpg']
    let tabitem = document.querySelectorAll('.tab-item')
    let img = document.querySelector('img')
    for(let i =0;i<tabitem.length;i++){
      tabitem[i].addEventListener('click',function(){
        img.src =` ${pic[i]} `
        //注意add加的是类名
        //排他思想,全消灭,复活自己
        for(let j = 0;j<tabitem.length;j++){
          tabitem[j].classList.remove('active')  
        }
        tabitem[i].classList.add('active')

      })
    }
  </script>
</body>

</html>
魏某某某
关注
Web APIs实用案例
WangZhang_521的博客
03-17 268
01-事件对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
c# 进阶之 WebAPI
满天星的博客
04-24 5137
c# 进阶之 WebAPIREST是设计风格而不是标准。webapi有自己的路由。webservice和wcf的协议都是soap协议，数据的序列化和反序列化都是soap的格式。而webapi是Json的数据传递webapi的优点有哪些？(1)非常适合做http的请求，前端与webapi交互特别方便(2)webapi更轻量因为使用的json数据来传递。(3)webapi很多时候是给前端提供数据的，因...
通过动态Controller实现从WCF到Web API的迁移.
素履独行 | 元培的个人博客
07-14 1473
在《又见AOP之基于RealProxy实现WCF动态代理》这篇文章中，我和大家分享了关于使用动态代理来简化WCF调用过程的相关内容，当时我试图解决的问题是，项目中大量通过T4生成甚至手动编写的“代理方法”。今天，我想和大家分享的是，如何通过动态的Controller来实现从WCF到Web API的迁移。为什么会有这个环节呢？因为我们希望把一个老项目逐步迁移到.NET Core上面，在这个过程中首当...
FastAPI第二天---参数校验
shelgi的博客
02-20 1832
文章目录FastAPI第二天1.参数校验1.1 查询参数校验1.2 路径参数校验和数值检验2.请求体3.中间件 FastAPI第二天 第一天讲了如何快速搭建api以及如何利用路由参数，今天就来丰富一下其他的基本功能 1.参数校验 不论是前端还是后端，都同时涉及到参数校验这个功能。前端可能只是进行一些简单的判断校验；但是如果有人恶意绕过网页，直接向后端路由发送请求，这个时候后端检验就显得尤为重要。因此，现在的Web框架也基本包含了参数校验功能。 1.1 查询参数校验 之前我们讲了查询参数，今天我们就要为查询参
WebApi 接口测试工具（自动生成文档）
hezheqiang的专栏
12-19 5026
C#进阶系列——WebApi 接口测试工具：WebApiTestClient 阅读目录 一、WebApiTestClient介绍 二、WebApiTestClient展示 三、WebApiTestClient使用 1、如何引入组件 2、如何使用组件 四、总结   正文 前言：这两天在整WebApi的服务，由于调用方是Android客户端，Android开发人员也不懂C#...
webapi html字符串,关于C# webapi ，接口返回字符串和json格式 ，返回值中有反斜杠...
weixin_36115496的博客
07-21 1099
最近遇到一个比较郁闷的问题，记录一下写了一个接口，想返回json 数据，但是返回值中总是带有反斜杠。。。 ，下面来看原因首先，配置 webapi的路由App_Start 文件夹下 ，WebApiConfig 修改一下： ps 个人习惯做如下修改config.Routes.MapHttpRoute(name: "DefaultApi",routeTemplate: "webapi/{control...
WebAPi接口安全之公钥私钥加密
李赛赛的专栏
01-08 2733
WebAPi使用公钥私钥加密介绍和使用 随着各种设备的兴起，WebApi作为服务也越来越流行。而在无任何保护措施的情况下接口完全暴露在外面，将导致被恶意请求。最近项目的项目中由于提供给APP的接口未对接口进行时间防范导致短信接口被怒对造成一定的损失，临时的措施导致PC和app的防止措施不一样导致后来前端调用相当痛苦，选型过oauth，https，当然都被上级未通过，那就只能自己写了，就很,,Ծㅂ
Vuejs+element+WebApi进阶之旅 一 ： 登陆
BSX_null
10-27 4527
公司最近不是特别忙，然后想把公司比较老的后台管理网站翻新一下。然后就想到了vuejs。对于一个从来没接触过前端的我来说，一开始简直是一脸懵逼，都不晓得怎么开始？？？第一天一直百度有关vuejs的有关内容，总感觉对于前端已经超出了我一直认为的：调调css、jq的认知范围了。 第二天 搭建了vuejs+element开发环境:https://blog.csdn.net/dream_broken/ar...
ASP.NET Core Web API发布部署IIS详细教程
技术杂谈，聚焦优质文章、开源项目、实用工具和学习、工作、面试心得分享。博客园推荐博客、阿里云专家博主，擅长于C#、.NET、.NET Core、Golang、TypeScript、Vue、Uni App、Angular开发。
08-16 1992
安装 .NET Core 托管捆绑包（Hosting Bundle）在将 .NET Core 应用程序部署到 IIS 时是一个必要的步骤。Internet Information Services (IIS) 是一种灵活、安全且可管理的 Web 服务器，用于托管 Web 应用（包括 ASP.NET Core）。在生产环境中展示 Swagger 通常是不推荐的，因为它可能会暴露你的 API 文档，增加安全风险。因为发布后运行的环境属于。
Web API (一)介绍
qq_43182390的博客
03-25 1393
Web API (一)介绍 一、Web API介绍 1.API介绍 （Application Programming Interface，应用程序编程接口）是一些预先定义的函数，只需直接调用使用即可。 2、Web API的概念 Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。 MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API 3、API 和 Web API 总结 API 是为我们
中享思途五天layui前后端设计课程，第二天1
03-22
而“第二天1”则进一步深入，以下是对第二天课程内容的详细解析： 在第二天的课程中，首先可能会讲解layui的模块化设计理念。layui的模块化使得开发者可以按需加载，降低了页面的负担，提高了性能。课程可能详细...
（webApi）草稿笔记不全面
weixin_47110697的博客
07-20 409
草稿笔记不全面
WebAPI——cookie与session遇到的问题
热门推荐
xcymorningsun的专栏
02-07 1万+
这两天要做一个用户登陆验证的接口，用MVC这种action和view结合的做的话比较好做，但是直接使用webapi做的过程中遇到了不少困难，这里和大家分享一下== 一、WebAPI中session与cookie操作 由于两者用的框架不一样，当然webapi有自己的操作方法。 string user = HttpContext.Current.Request
基于Java的简单WebAPI接口调用（中国气象数据网接口调用示例）
weixin_43772394的博客
06-04 5456
基于Java的简单WebAPI调用（中国气象数据网）一、介绍二、代码三、效果 一、介绍 对于简单的WebAPI调用步骤主要有： 找到要调用的API接口并得知相应参数 为URL添加参数发送相应请求 返回相应信息 对返回的JSON文件（一般是JSON）进行处理 举个例子： 在中国气象数据网 http://data.cma.cn/ 中，有API接口服务： 注册成功后有7天免费接口使用： 下面有详...
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 112
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
文件系统设计 - 开发文件系统 Store (上篇)
最新发布
qq_44746132的博客
09-21 290
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
Babel
小秀的博客
09-20 634
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
基于Vue 3组合函数的分页、搜索与排序实践 —— nbsaas-boot项目的实际应用
nbsaas-boot基于Request-Response的企业级快速开发框架
09-17 1917
Vue 3的组合函数是用于封装功能逻辑的一种模式。与Vue 2的选项式API不同，组合函数允许开发者将组件逻辑集中封装在独立的函数中，便于在不同的组件间共享。在大型项目中，像这样的电商系统，组件往往需要实现复杂的数据交互逻辑，例如分页、搜索、排序等功能。如果将这些功能重复写在多个组件中，代码将会变得臃肿且难以维护。组合函数可以有效解决这一问题。
RedisTemplate混用带来的序列化问题
咖啡煮码
09-18 726
RedisTemplate 不要乱用哦，否则极易出现序列化问题
七周七Web框架探索：从Sinatra到CanJS
第二天，书本介绍如何添加视图，涵盖了ERB、Mustache和Slim三种模板引擎的使用。第三天，进一步添加功能，如校验、块参数、过滤器，以及如何处理标签和正则表达式的路由。这一章的总结中，作者分析了Sinatra的优势和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值