first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/罗朝/2019-05-05/ajax.html
+++ b/历届学生/罗朝/2019-05-05/ajax.html
@@ -0,0 +1,115 @@
+<!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>ajax</title>
+  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
+  <style>
+    /* .more {
+      display: none;
+    } */
+  </style>
+</head>
+<body>
+  
+  
+
+  <div class="main">
+  </div>
+
+  <div class="page">
+    <span class="next"> > 加载更多 < </span> 
+    <span style="display: none;">...正在请求，请稍后</span>
+  </div>
+
+
+  <script>
+    
+
+    
+    // 1：拿出电话   创建ajax请求
+    // var ajax = new XMLHttpRequest();
+
+    // // 2: 输入号码  设置ajax请求参数
+    // ajax.open("GET","http://127.0.0.1:9999/api/v1.0/index");
+
+    // // 3: 拨打电话  发送ajax请求
+    // ajax.send();
+
+    // // 对打电话的状态进行监听   监听ajax是否发送成功
+    // ajax.onreadystatechange = function () {
+    //   if(ajax.readyState == 4 && ajax.status == 200) {
+    //     // JSON.parse 把string格式的数据转换为json格式
+    //     // JSON.stringify  把json格式转换为string格式
+    //     var list = JSON.parse(ajax.responseText);
+    //     for (var i =0;i<list.data.length;i++) {
+          // document.querySelector(".main").innerHTML += `
+          //   <div >
+          //     <a href="${list.data[i].href}">
+          //         <h3>${list.data[i].title}</h3>
+          //         <img src="${list.data[i].imgurl}"/>   
+          //     </a> 
+          //   </div>
+          // `
+    //     }
+    //   }else {
+    //    if(ajax.status == 0){
+    //       alert("抱歉, 您的网络不好请重试")
+    //    }
+    //   }
+    // }
+
+    var current_page = 1;
+
+    function getdata() {
+      console.log(this);
+      $.ajax({
+        type: 'GET',
+        url: 'http://127.0.0.1:9999/api/v1.0/index',
+        data: {
+          page : current_page
+        },
+        success: function (result) {
+        result.data.forEach(function(value){
+          $(".main").append(` <div > <a href="${value.href}"> <h3>${value.title}</h3> <img src="${value.imgurl}"/> </a> </div>`)
+        });
+
+        //$("span:last").addClass("more")
+
+        $("span:last").css({
+          "display": "none"
+        })
+
+        },
+        error: function (err) {
+          alert("抱歉，您的网络不好")
+        }
+      })
+    }
+
+
+    // 加载更多被点击的时候
+    $(".next").on("click",function() {
+      //$(".more").removeClass("more")
+      $("span:last").css({
+        "display": "inline-block"
+      })
+      current_page += 1
+      
+      getdata()
+    
+      
+    })
+
+
+    getdata()
+
+    
+    
+    
+  </script>
+
+</body>
+</html>
--- a/历届学生/罗朝/2019-05-05/tabs.html
+++ b/历届学生/罗朝/2019-05-05/tabs.html
@@ -0,0 +1,74 @@
+<!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>
+  <style>
+    body,ul,li{
+      margin: 0;
+      padding: 0;
+    }
+    ul li {
+      list-style: none;
+    }
+    .main{
+     width: 400px;
+     margin: 100px auto;
+    }
+    .tabs_title {
+     overflow: hidden;
+     
+    }
+    .tabs_title li {
+      float: left;
+      padding: 5px 10px;
+    }
+    .tabs_content ul {
+      padding-left: 10px;
+    }
+    .tabs_content li {
+      display: none;
+    }
+    .content_on {
+      display: block !important;
+    }
+    .title_on {
+      color: red;
+    }
+   </style>
+</head>
+<body>
+  
+  <div class="main">
+    <div class="tabs_title">
+      <ul>
+     
+      </ul>
+    </div>
+    <div class="tabs_content">
+        <ul>
+          <!-- <li class="content_on">安全的内容</li>
+          <li>公告的内容</li>
+          <li>最新的内容</li>
+          <li>热点的内容</li> -->
+        </ul>
+    </div>
+  </div>
+
+  <script src="./tabs.js"></script>
+  
+  <script>
+    var title = [ '公告','论坛','规则','安全','公益' ]
+    var content = [ '公告的内容','论坛的内容','规则的内容','安全的内容','公益的内容' ]
+
+    new Tabs({
+      titleArray: title,
+      contentArray: content
+    });
+
+  </script>
+
+</body>
+</html>
--- a/历届学生/罗朝/2019-05-05/tabs.js
+++ b/历届学生/罗朝/2019-05-05/tabs.js
@@ -0,0 +1,104 @@
+// 自执行函数
+// 形成一个独立的作用域
+
+// 通过原形模拟类
+// 注意 以前js没有类的概念，现在有！！！
+// 以前没有类的概念，但是我们可以通过其他方法来模拟类
+
+// 挂载到window上的方法或者变量都将成为全局变量|方法
+(function (bom,dom) {
+  
+  // 插件的默认配置
+  var defaultOption = {
+    // 内容被激活的类名
+    contentActive: "content_on",
+    // 标题被激活的类名
+    titleActive: "title_on",
+    titleFather: ".tabs_title",
+    contentFather: ".tabs_content"
+  };
+
+  function tabs(params) {
+     if(typeof params == "object" 
+        && params.hasOwnProperty("titleArray") 
+        && params.hasOwnProperty("contentArray")) {
+       
+       // 将用户传递过来的参数进行保存，保存到 tabs中，
+       ///成tabs的私有属性，然后下面的其他方法就可以使用了
+       this.option = {
+         titleArray: params.titleArray,
+         contentArray: params.contentArray
+       };
+
+       // 不必要的参数，如果用户传递了标题和内容的激活类名，那么采用用户的，如果没传
+       // 那么采取系统默认的
+       defaultOption.titleActive = params.titleActive || defaultOption.titleActive
+       defaultOption.contentActive = params.contentActive || defaultOption.contentActive
+
+       // 不用 + 进行字符串拼接
+       this.dom = {
+        titleFather: document.querySelector(`${defaultOption.titleFather} ul`),
+        contentFather: document.querySelector(`${defaultOption.contentFather} ul`)
+       }
+
+
+       this.init();
+     }else {
+        //console.error("抱歉，插件运行需要参数")
+        throw new Error("抱歉，插件运行需要参数");
+     }
+
+
+     
+  }
+
+  tabs.prototype = {
+    // 插件初始化方法
+    init() {
+      
+      this.renderPage();
+
+      this.dom.titleChildenli = document.querySelectorAll(`${defaultOption.titleFather} ul li`)
+      this.dom.contentChildenli = document.querySelectorAll(`${defaultOption.contentFather} ul li`)
+      
+      this.bindEvent()
+
+    },
+
+    // 渲染数组成为页面
+    renderPage() {
+      var title = "",content="";
+      for(var i = 0;i<this.option.titleArray.length;i++) {
+        title += `<li class="${ i == 0 ? defaultOption.titleActive : '' }">${this.option.titleArray[i]}</li>`
+        content += `<li class="${ i == 0 ? defaultOption.contentActive : '' }">${this.option.contentArray[i]}</li>`
+      }
+      this.dom.titleFather.innerHTML = title
+      this.dom.contentFather.innerHTML = content
+    },
+
+    // es5 老旧的js语法
+    // es6, 7  =>  ``  let
+    // babel 将最新的js语法转换为 es5(浏览器能认识的兼容性比较好的)
+    bindEvent() {
+      var self = this;
+      for(let i= 0;i<this.dom.titleChildenli.length;i++) {
+
+        this.dom.titleChildenli[i].onmouseover = function ()  {
+          for(let j= 0;j<self.dom.titleChildenli.length;j++) {
+            self.dom.titleChildenli[j].className = ""
+            self.dom.contentChildenli[j].className = ""
+          }
+          self.dom.titleChildenli[i].className = defaultOption.titleActive;
+          self.dom.contentChildenli[i].className = defaultOption.contentActive;
+        }
+        
+      }
+
+    }
+    
+  }
+
+  bom.Tabs = tabs
+
+
+})(window,document)
--- a/历届学生/罗朝/2019-05-05/笔记.txt
+++ b/历届学生/罗朝/2019-05-05/笔记.txt
@@ -0,0 +1,39 @@
+1：后端渲染开发网站
+
+
+  前端：20%  (就是写页面，工作没有技术含量很low)
+
+  后端：80%  (写功能 + 写页面)
+
+
+  问题：
+
+   1：页面中各种编程语言代码都杂烩在一起，导致项目升级的时候代码不容易修改
+   2：项目需要升级迭代的时候，前后端项目版本不统一导致各种问题，交流成本太高，改起来太难
+
+
+2：前后端分离开发网站 (ajax + json)
+
+  前端：50% 60% (写页面 + 写功能)
+
+
+  后端：50% 40% (写数据)
+
+
+ajax 
+
+ 概念：一种无刷新（局部刷新）更新网站的技术
+ 主要作用：前端使用ajax技术和后端进行数据交互 (json 来描述数据(想法))  前后端分离
+
+ajax 跨域
+
+1: 跨域 是谁导致的？
+
+2: 为什么需要解决跨域，如何解决跨域？有几种方法解决？
+
+
+
+win + r 
+
+
+cmd 回车