实训day7+day6

最新推荐文章于 2024-09-06 00:32:37 发布

今天没吃药感觉自己萌萌哒

最新推荐文章于 2024-09-06 00:32:37 发布

阅读量186

点赞数

分类专栏：实训日志

本文链接：https://blog.csdn.net/weixin_45038370/article/details/103550357

版权

实训日志专栏收录该内容

8 篇文章 0 订阅

订阅专栏

实训day6

一、连接swagger

	<!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>动态表格</title>
	    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	    <script>
	        //设置基础路径
	        var baseURL = 'http://localhost:8899';
	        //事件代理
	        $(function(){
	            //on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，
	            //最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。
	            //（支持动态绑定元素，即页面上元素有添加或变化后仍可绑定,前提是‘选择器’须是目标绑定元素的父元素）
	                $('tbody').on('click','button',function(event){
	                    //event 事件对象
	                    // console.log(this);
	                    // console.log(event.target);
	                    // console.log(event.currentTarget);
	                    // console.log($(this));//$符可将原生dom转为jequry对象
	                    // console.log(this.id);
	                    // console.log($(this).attr('flag'));
	                    var id = $(this).attr('flag');
	                    $.ajax({
	                        url:baseURL+'/CustomerService/deleteById',
	                        method:'post',
	                        data:{
	                            id:id
	                        },
	                        success:function(res){
	                            if(res.status === 200){
	                                alert(1);
	                                //查找数据，局部刷新页面
	                                toLoad();
	                                }else{
	                                    alert('删除错误');
	                                }
	                        },
	                        error:function(error){
	                            console.log(error);
	                            alert('删除错误');
	                        }
	                    })
	                })
	            }) 
	        toLoad();
	        function toLoad(){
	        //获取后台数据，加载到表格中
	        $.ajax({
	            url:baseURL + '/CustomerService/findAll',
	            method:'get',
	            data:{},
	            success:function(res){
	                console.log(res);
	                //清空tbody内容
	                $('tbody').empty();
	                res.data.forEach(function(item){
	                    //生成tr
	                    var newTr = $(`
	                    <tr>
	                        <td>`+item.id+`</td>
	                        <td>`+item.username+`</td>
	                        <td>`+item.realname+`</td>
	                        <td>`+item.status+`</td>
	                        <td>`+item.gender+`</td>
	                        <td><button flag="`+item.id+`">删除</button></td>
	                    </tr>
	                    `); 
	                    //追加tr
	                    $('tbody').append(newTr);
	                });
	
	            },
	            error:function(error){
	                console.log(error);
	            }
	        })
	        
	     }
	       
	    </script>
	    <style>
	        /* 标签选择器 */
	        table{
	            border: px solid #444;
	            /* 合并边框 */
	            border-collapse: collapse;
	            width: 400px;    
	        }
	        td,th{
	            border: 1px solid #444;
	            text-align: center;
	        }
	    </style>
	
	</head>
	<body>
	    <h3>动态表格</h3>
	    <table>
	        <thead>
	            <tr>
	                <th>编号</th>
	                <th>用户名</th>
	                <th>真实姓名</th>
	                <th>状态</th>
	                <th>性别</th>
	                <th>操作</th>
	            </tr>
	        </thead>
	        <tbody>
	            <tr>
	                <td>1</td>
	                <td>2</td>
	                <td>3</td>
	                <td>4</td>
	                <td>5</td>
	                <td>6</td>
	            </tr>
	        </tbody>
	    </table>
	</body>
	</html>

这是今天打的代码
有些函数调用不是很清楚

1、函数的定义:
语法结构:function 函数名称遵循命名规则(){
函数体
}
(1)不指定函数名称/匿名函数:顾名思义就是没有名字的函数
结构:Function(参数 1,参数 2,…,参数 n){ //函数的主体语句 }
function(){}为错误的定义
(2)具备名称的函数:
结构:语法: function函数名(参数 1,参数 2,….,参数 n){ return 表达式; //函数体语句 }

2、on表示将事件绑定在body上，第一个参数click表示点击事件绑定到tbody对象，第二个表示触发button按钮，第三个是触发的函数。不变化的放在thead中
变化的放在tbody中，js动态操作生成dom （将 web 页面与到脚本或编程语言连接起来）

 `$('tbody').on('click','button',function(event)`

3、console.log()在控制台上输出信息。$（this）就是获取当前的意思，例如你点击了一个地方，那么this就是指向这个地方。attr在这里是获取，后面的参数就是自定义的flag,意思就是获取flag指向删除的id。

		console.log(this);
	>     console.log($(this));
	> 	  var id = $(this).attr('flag');

4、设置一个事件代理，事件代理就是，本来加在子元素身上的事件，加在了其父级身上。那就产生了问题：父级那么多子元素，怎么区分事件本应该是哪个子元素的？答案是：event对象里记录的有“事件源”，它就是发生事件的子元素。

事件代理的好处就是效率高，比如，不用for循环为子元素添加事件了
还有就是js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便。

实训day7

1、表单

<!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>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(function(){
            $('button').click(function(){
                //获取单选按钮和复选按钮的值
                console.log($('[type="radio"]:checked').val() );
                console.log($('[type="checkbox"]:checked') );
                var checkbox=$('[type="checkbox"]:checked');
                var result = checkbox.map(function(index,item){
                    // console.log(item);
                    return $(item).val();
                    // return 1;
                });
                console.log(result);
                console.log(Array.from(result));


            });
        })
    </script>
    <style>
         .wrap{
             border:3px dashed coral;
             width: 330px;
             margin: 20px auto 0;
             padding: 20px;

         }
         span{
             width: 80px;
             /* border: 1px solid red; */
             /* 行内元素不能设置宽高  可转成块级元素*/
             display: inline-block;
             text-align: right;
         }
         /* button{
             margin: 20px calc((100% - 50px) / 2);
         } */
         button{
             /* 块级显示 */
             display: block;
             /* 外边距水平居中 */
             margin: 20px auto 0;
             /* 背景颜色 */
             background-color:pink;
             /* 虚线外框 */
             border: 1px dashed white;
             /* 内边距 */
             padding: 5px 20px;
             /* 字体颜色 */
             color:cornflowerblue;
             /* 鼠标形状：手型 */
             cursor: pointer;
             /* 圆角边框 */
             border-radius: 15px;
         }
    </style>
</head>
<body>
    <div class="wrap">
        <form action="">
            <span>用户名：</span><input type="text"  placeholder="请输入用户名" />
            <br />
            <span>密码：</span><input type="password" />
            <br />
            <span>性别：</span><input id="male" name="gender" type="radio" value="男" /><label for="male">男</label>
            <input id="female" name="gender" type="radio" value="女" /><label for="female">女</label>
            <br />
            <span>爱好：</span>
            <input name="hoby" type="checkbox" value="baskertball" />篮球
            <input name="hoby" type="checkbox" value="singing"/>唱歌
            <input name="hoby" type="checkbox" value="dance"/>跳舞
            <input name="hoby" type="checkbox" value="rap" />rap
            <br />
            <span>个人简介：</span>
            <br />
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <br />
            <button>注册</button>
        </form>
    </div>
</body>
</html>

2、浮动

	<!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>浮动-2</title>
	    <style>
	        .parent{
	            /* height: 300px; */
	            border: 3px solid blue;
	            /* 清除子元素浮动对父元素的影响 */
	            overflow: hidden;
	
	        }
	        .child{
	            width: 100px;
	            height: 100px;
	            border: 1px solid red;
	            float: left;
	            margin: 10px;
	        }
	        .brother{
	            /* clear: both; */
	            width: 100px;
	            height: 100px;
	            background-color: pink;
	
	        }
	    </style>
	
	</head>
	<body>
	    <div class="parent">
	    <div class="child"></div>
	    <div class="child"></div>
	    <div class="child"></div>
	    <div class="child"></div>
	    <div class="child"></div>
	    </div>
	    <div class="brother"></div>
	</body>
	</html>