单击确认按钮时移除卡

【问题标题】：Remove card when clicked on confirm button单击确认按钮时移除卡
【发布时间】：2020-05-03 17:00:21
【问题描述】：

请访问页面查看详细问题https://ibnul.neocities.org/_temporary/au2pr11/au2pr11.html

我这里有 3 张卡片。他们每个人都有一个删除按钮。单击它会触发覆盖对话框以取消或确认。如果我单击取消，它应该会消失，我自己可以做到这一点。但是，如果我单击确认按钮，它应该会消失并删除删除按钮触发覆盖对话框的卡。

但覆盖对话框是一个用于所有卡片的单一对话框。而且所有卡片都有相同的类名，我也想保持这种方式，因为我想多次复制粘贴，所以我不想给不同的类或 ID 名称并为每个卡片编写不同的函数。如何检测单击删除图标的元素，然后如果用户单击确认按钮，整个卡片应该消失？我想通过在 res-card-outer 元素上添加一个名为 hide-res-card-outer 的类名来删除卡片。

请用纯 JavaScript 显示。

  var delete_menu_btns = document.querySelectorAll('.del-menu-icon-image');
  var del_conf_overlay_box = document.querySelector('.del-conf-overl-outer');
  var del_conf_cancel_btn = document.querySelector('.del-conf-cancel-btn');
  var del_conf_confirm_btn = document.querySelector('.del-conf-confirm-btn');

  delete_menu_btns.forEach(btn => {
    btn.addEventListener('click', showDeleteConfBox);
  });

  function showDeleteConfBox() {
    del_conf_overlay_box.classList.add('show-del-conf-overl-box');
  }

  del_conf_cancel_btn.addEventListener('click', removeDeleteconfBox);
  del_conf_confirm_btn.addEventListener('click', removeDeleteconfBox);

  function removeDeleteconfBox() {
    del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
  }
   * {
      margin: 0px;
      font-family: 'Segoe UI', sans-serif;
    }

    body {
      background-color: rgb(240, 240, 240);
    }

    .res-card-cont {
      padding: 20px 100px;
    }

    .res-card-outer {
      background-color: #fdfdfd;
      padding: 10px 10px 10px 10px;
      margin: 15px 0px 15px 0px;
    }

    .res-card-top-imginfo-box {
      display: flex;
    }

    .res-card-image {
      width: 230px;
      height: 145px;
    }

    .res-card-info-box {
      flex-grow: 2;
      padding: 5px 10px 5px 20px;
    }

    .res-card-title-price-cont {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .res-card-title-text {
      font-size: 18px;
      color: rgb(107, 107, 107);
      padding: 2px 5px 4px 0px;
      white-space: nowrap;
    }

    .res-card-title-text:hover {
      color: green;
    }

    .res-card-price-text {
      font-size: 18px;
      white-space: nowrap;
      color: rgb(107, 107, 107);
      padding: 2px 0px 4px 0px;
    }

    .res-card-det-text {
      font-size: 14px;
      color: #8d8d8d;
      padding: 6px 0px 6px 0px;
    }

    .res-card-det-text > span {
      padding: 0px 8px 0px 0px;
    }


    .res-loc-shre-con {
      display: flex;
      justify-content: space-between;
      padding: 4px 0px 5px 0px;
    }

    .res-loc-leftsd-con {
      display: flex;
    }

    .res-location-ico {
      width: 17px;
      height: 17px;
      cursor: pointer;
      padding: 1px 7px 0px 3px;
      opacity: 0.7;
    }

    .res-location-ico:hover {
      opacity: 0.9;
    }

    .res-location-text {
      font-size: 14px;
      color: #8d8d8d;
      padding: 2px 5px 0px 5px;
    }

    .res-share-ico-box {
      display: flex;
      padding: 2px 5px 2px 15px;
    }

    .res-share-ico-link {
      margin: 0px 3px 0px 3px;
    }

    .res-share-icon {
      width: 14px;
      height: 14px;
      opacity: 0.6;
    }

    .res-share-icon:hover {
      opacity: 0.8;
    }



    .del-menu-icon-con {
      position: relative;
      margin: -2px 0px -2px 0px;
    }

    .del-menu-text-icon-con {
      display: flex;
      align-items: center;
      opacity: 0.8;
    }

    .del-menu-text-icon-con:hover {
      opacity: 1;
    }

    .del-menu-icon-image {
      cursor: pointer;
      width: 22px;
      height: 18px;
      padding: 2px 2px 2px 2px;
    }


    .del-conf-overl-outer {
      position: fixed;
      z-index: 100;
      top: 0px;
      left: 0px;
      width: 100vw;
      height: 100vh;
      display: none;
    }

    .del-conf-overl-inner {
      height: 100%;
      padding: 10px 15px 10px 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.692);
    }

    .del-conf-overl-box {
      padding: 10px 20px 20px 20px;
      width: 350px;
      background-color: white;
    }

    .del-conf-text1 {
      font-size: 22px;
      padding: 10px 0px 10px 0px;
    }

    .del-conf-text2 {
      font-size: 15px;
      padding: 5px 0px 10px 0px;
    }

    .del-conf-btns-con {
      display: flex;
      justify-content: flex-end;
      padding: 20px 0px 5px 0px;
    }

    .del-conf-cancel-btn {
      border: none;
      padding: 5px 18px;
      font-size: 14px;
      background-color: #90b974;
      color: #ffffff;
    }

    .del-conf-cancel-btn:hover {
      background-color: #79b84f;
    }

    .del-conf-confirm-btn {
      border: none;
      padding: 5px 18px;
      margin: 0px 0px 0px 10px;
      font-size: 14px;
      background-color: #f34c46;
      color: #ffffff;
    }

    .del-conf-confirm-btn:hover {
      background-color: #f8170f;
    }

    .show-del-conf-overl-box {
      display: block;
    }

    .hide-res-card-outer {
      display: none;
    }
<!-- result card box start -->
<div class='bdy-adv-res-cont-inner'>

  <div class='res-card-cont'>

    <div class='res-card-outer'>
      <div class='res-card-top-imginfo-box'>
        <img class='res-card-image' src='car1.webp' alt=''>
        <div class='res-card-info-box'>
          <div class='res-card-title-price-cont'>
            <a class='res-card-title-text' href=''>Lamborghini Veneno</a>
            <p class='res-card-price-text'>200000 €</p>
          </div>
          <p class='res-card-det-text'>
            <span class=''>FR 2/2019</span>
            <span class=''>Disel</span>
            <span class=''>4895 km</span>
            <span class=''>1895ps</span>
            <span class=''>HU 4/2001</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Semi-automatic</span>
            <span class=''>Disel</span>
            <span class=''>80mg</span>
            <span class=''>7,51</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Private</span>
            <span class='res-dettext-hid'>au2mobile</span>
          </p>
          <div class='res-loc-shre-con'>
            <div class='res-loc-leftsd-con'>
              <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
              <p class='res-location-text'>2948 Resoif Voufo</p>
            </div>
            <div class='del-menu-icon-con'>
              <div class='del-menu-text-icon-con'>
                <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class='res-card-outer'>
      <div class='res-card-top-imginfo-box'>
        <img class='res-card-image' src='car4.webp' alt=''>
        <div class='res-card-info-box'>
          <div class='res-card-title-price-cont'>
            <a class='res-card-title-text' href=''>Ferrari 2018</a>
            <p class='res-card-price-text'>7895.3 €</p>
          </div>
          <p class='res-card-det-text'>
            <span class=''>FR 2/2019</span>
            <span class=''>Disel</span>
            <span class=''>95 km</span>
            <span class=''>60ps</span>
            <span class=''>HU 4/2001</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Semi-automatic</span>
            <span class=''>Petrol</span>
            <span class=''>80mg</span>
            <span class=''>7,51</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Private</span>
            <span class='res-dettext-hid'>au2mobile</span>
          </p>
          <div class='res-loc-shre-con'>
            <div class='res-loc-leftsd-con'>
              <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
              <p class='res-location-text'>2948 Resoif Voufo</p>
            </div>
            <div class='del-menu-icon-con'>
              <div class='del-menu-text-icon-con'>
                <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class='res-card-outer'>
      <div class='res-card-top-imginfo-box'>
        <img class='res-card-image' src='car5.webp' alt=''>
        <div class='res-card-info-box'>
          <div class='res-card-title-price-cont'>
            <a class='res-card-title-text' href=''>Nissan 2019</a>
            <p class='res-card-price-text'>2569.2 €</p>
          </div>
          <p class='res-card-det-text'>
            <span class=''>FR 2/2019</span>
            <span class=''>Disel</span>
            <span class=''>200 km</span>
            <span class=''>1895ps</span>
            <span class=''>HU 4/2001</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Gearbox</span>
            <span class=''>Disel</span>
            <span class=''>80mg</span>
            <span class=''>7,51</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Private</span>
            <span class='res-dettext-hid'>au2mobile</span>
          </p>
          <div class='res-loc-shre-con'>
            <div class='res-loc-leftsd-con'>
              <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
              <p class='res-location-text'>2948 Resoif Voufo</p>
            </div>
            <div class='del-menu-icon-con'>
              <div class='del-menu-text-icon-con'>
                <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>

</div>
  <!-- result card box end -->

<!-- delete confirm overlay start -->
<div class='del-conf-overl-outer'>
  <div class='del-conf-overl-inner'>

    <div class='del-conf-overl-box'>
      <p class='del-conf-text1'>Confirm!</p>
      <p class='del-conf-text2'>Are you sure you want to delete your favourites!</p>
      <div class='del-conf-btns-con'>
        <button class='del-conf-cancel-btn' type='button'>Cancel</button>
        <button class='del-conf-confirm-btn' type='button'>Confirm</button>
      </div>
    </div>

  </div>
</div>
<!-- delete confirm overlay end -->

【问题讨论】：

    标签： javascript html css


    【解决方案1】：

    我认为最好的做法是使用 id。

    不过不用担心，如果您不喜欢使用 id，您可以通过在卡片的删除按钮上添加类似“toBeRemoved”的类来标记点击了哪张卡片。

    您可以在 showDeleteConfBox 函数中通过传递按钮元素作为参数来进行此标记。

    如果用户确认移除，则找到标签按钮最近的卡片并移除卡片。

    然后，在任何一种情况下（取消或确认），隐藏确认框并清除“toBeRemoved”类。

    // These two functions is to find the closest parent of a selector
function collectionHas(a, b) { //helper function (see below)
    for(var i = 0, len = a.length; i < len; i ++) {
        if(a[i] == b) return true;
    }
    return false;
}
function findParentBySelector(elm, selector) {
    var all = document.querySelectorAll(selector);
    var cur = elm.parentNode;
    while(cur && !collectionHas(all, cur)) { //keep going up until you find a match
        cur = cur.parentNode; //go up
    }
    return cur; //will return null if not found
}

var delete_menu_btns = document.querySelectorAll('.del-menu-icon-image');
var del_conf_overlay_box = document.querySelector('.del-conf-overl-outer');
var del_conf_cancel_btn = document.querySelector('.del-conf-cancel-btn');
var del_conf_confirm_btn = document.querySelector('.del-conf-confirm-btn');

delete_menu_btns.forEach(btn => {
  btn.addEventListener('click', function(){
    showDeleteConfBox(btn);
	});
});

function showDeleteConfBox(btn) {
  del_conf_overlay_box.classList.add('show-del-conf-overl-box');
  btn.classList.add('toBeRemoved');
}

del_conf_cancel_btn.addEventListener('click', cancelDeleteconfBox);
del_conf_confirm_btn.addEventListener('click', removeDeleteconfBox);

function cancelDeleteconfBox() {
  del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
  
  clearBtnClasses();
}

function removeDeleteconfBox() {
  var btnToBeRemoved = document.querySelector('.toBeRemoved');
  
  var cartToBeRemoved = findParentBySelector(btnToBeRemoved, '.res-card-outer');
  
  cartToBeRemoved.classList.add('hide-res-card-outer');
  
  del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
  
  clearBtnClasses();
}

function clearBtnClasses() {
	delete_menu_btns.forEach(btn => {
    btn.classList.remove('toBeRemoved');
  });
}
     * {
      margin: 0px;
      font-family: 'Segoe UI', sans-serif;
    }

    body {
      background-color: rgb(240, 240, 240);
    }

    .res-card-cont {
      padding: 20px 100px;
    }

    .res-card-outer {
      background-color: #fdfdfd;
      padding: 10px 10px 10px 10px;
      margin: 15px 0px 15px 0px;
    }

    .res-card-top-imginfo-box {
      display: flex;
    }

    .res-card-image {
      width: 230px;
      height: 145px;
    }

    .res-card-info-box {
      flex-grow: 2;
      padding: 5px 10px 5px 20px;
    }

    .res-card-title-price-cont {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .res-card-title-text {
      font-size: 18px;
      color: rgb(107, 107, 107);
      padding: 2px 5px 4px 0px;
      white-space: nowrap;
    }

    .res-card-title-text:hover {
      color: green;
    }

    .res-card-price-text {
      font-size: 18px;
      white-space: nowrap;
      color: rgb(107, 107, 107);
      padding: 2px 0px 4px 0px;
    }

    .res-card-det-text {
      font-size: 14px;
      color: #8d8d8d;
      padding: 6px 0px 6px 0px;
    }

    .res-card-det-text > span {
      padding: 0px 8px 0px 0px;
    }


    .res-loc-shre-con {
      display: flex;
      justify-content: space-between;
      padding: 4px 0px 5px 0px;
    }

    .res-loc-leftsd-con {
      display: flex;
    }

    .res-location-ico {
      width: 17px;
      height: 17px;
      cursor: pointer;
      padding: 1px 7px 0px 3px;
      opacity: 0.7;
    }

    .res-location-ico:hover {
      opacity: 0.9;
    }

    .res-location-text {
      font-size: 14px;
      color: #8d8d8d;
      padding: 2px 5px 0px 5px;
    }

    .res-share-ico-box {
      display: flex;
      padding: 2px 5px 2px 15px;
    }

    .res-share-ico-link {
      margin: 0px 3px 0px 3px;
    }

    .res-share-icon {
      width: 14px;
      height: 14px;
      opacity: 0.6;
    }

    .res-share-icon:hover {
      opacity: 0.8;
    }



    .del-menu-icon-con {
      position: relative;
      margin: -2px 0px -2px 0px;
    }

    .del-menu-text-icon-con {
      display: flex;
      align-items: center;
      opacity: 0.8;
    }

    .del-menu-text-icon-con:hover {
      opacity: 1;
    }

    .del-menu-icon-image {
      cursor: pointer;
      width: 22px;
      height: 18px;
      padding: 2px 2px 2px 2px;
    }


    .del-conf-overl-outer {
      position: fixed;
      z-index: 100;
      top: 0px;
      left: 0px;
      width: 100vw;
      height: 100vh;
      display: none;
    }

    .del-conf-overl-inner {
      height: 100%;
      padding: 10px 15px 10px 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.692);
    }

    .del-conf-overl-box {
      padding: 10px 20px 20px 20px;
      width: 350px;
      background-color: white;
    }

    .del-conf-text1 {
      font-size: 22px;
      padding: 10px 0px 10px 0px;
    }

    .del-conf-text2 {
      font-size: 15px;
      padding: 5px 0px 10px 0px;
    }

    .del-conf-btns-con {
      display: flex;
      justify-content: flex-end;
      padding: 20px 0px 5px 0px;
    }

    .del-conf-cancel-btn {
      border: none;
      padding: 5px 18px;
      font-size: 14px;
      background-color: #90b974;
      color: #ffffff;
    }

    .del-conf-cancel-btn:hover {
      background-color: #79b84f;
    }

    .del-conf-confirm-btn {
      border: none;
      padding: 5px 18px;
      margin: 0px 0px 0px 10px;
      font-size: 14px;
      background-color: #f34c46;
      color: #ffffff;
    }

    .del-conf-confirm-btn:hover {
      background-color: #f8170f;
    }

    .show-del-conf-overl-box {
      display: block;
    }

    .hide-res-card-outer {
      display: none;
    }
    <!-- result card box start -->
<div class='bdy-adv-res-cont-inner'>

  <div class='res-card-cont'>

    <div class='res-card-outer'>
      <div class='res-card-top-imginfo-box'>
        <img class='res-card-image' src='car1.webp' alt=''>
        <div class='res-card-info-box'>
          <div class='res-card-title-price-cont'>
            <a class='res-card-title-text' href=''>Lamborghini Veneno</a>
            <p class='res-card-price-text'>200000 €</p>
          </div>
          <p class='res-card-det-text'>
            <span class=''>FR 2/2019</span>
            <span class=''>Disel</span>
            <span class=''>4895 km</span>
            <span class=''>1895ps</span>
            <span class=''>HU 4/2001</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Semi-automatic</span>
            <span class=''>Disel</span>
            <span class=''>80mg</span>
            <span class=''>7,51</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Private</span>
            <span class='res-dettext-hid'>au2mobile</span>
          </p>
          <div class='res-loc-shre-con'>
            <div class='res-loc-leftsd-con'>
              <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
              <p class='res-location-text'>2948 Resoif Voufo</p>
            </div>
            <div class='del-menu-icon-con'>
              <div class='del-menu-text-icon-con'>
                <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class='res-card-outer'>
      <div class='res-card-top-imginfo-box'>
        <img class='res-card-image' src='car4.webp' alt=''>
        <div class='res-card-info-box'>
          <div class='res-card-title-price-cont'>
            <a class='res-card-title-text' href=''>Ferrari 2018</a>
            <p class='res-card-price-text'>7895.3 €</p>
          </div>
          <p class='res-card-det-text'>
            <span class=''>FR 2/2019</span>
            <span class=''>Disel</span>
            <span class=''>95 km</span>
            <span class=''>60ps</span>
            <span class=''>HU 4/2001</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Semi-automatic</span>
            <span class=''>Petrol</span>
            <span class=''>80mg</span>
            <span class=''>7,51</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Private</span>
            <span class='res-dettext-hid'>au2mobile</span>
          </p>
          <div class='res-loc-shre-con'>
            <div class='res-loc-leftsd-con'>
              <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
              <p class='res-location-text'>2948 Resoif Voufo</p>
            </div>
            <div class='del-menu-icon-con'>
              <div class='del-menu-text-icon-con'>
                <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class='res-card-outer'>
      <div class='res-card-top-imginfo-box'>
        <img class='res-card-image' src='car5.webp' alt=''>
        <div class='res-card-info-box'>
          <div class='res-card-title-price-cont'>
            <a class='res-card-title-text' href=''>Nissan 2019</a>
            <p class='res-card-price-text'>2569.2 €</p>
          </div>
          <p class='res-card-det-text'>
            <span class=''>FR 2/2019</span>
            <span class=''>Disel</span>
            <span class=''>200 km</span>
            <span class=''>1895ps</span>
            <span class=''>HU 4/2001</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Gearbox</span>
            <span class=''>Disel</span>
            <span class=''>80mg</span>
            <span class=''>7,51</span>
          </p>
          <p class='res-card-det-text'>
            <span class=''>Private</span>
            <span class='res-dettext-hid'>au2mobile</span>
          </p>
          <div class='res-loc-shre-con'>
            <div class='res-loc-leftsd-con'>
              <img class='res-location-ico' src='location-icon-red.svg' alt='' title='Location map'>
              <p class='res-location-text'>2948 Resoif Voufo</p>
            </div>
            <div class='del-menu-icon-con'>
              <div class='del-menu-text-icon-con'>
                <img class='del-menu-icon-image' src='delete-icon-blue.svg' alt='' title='Delete'>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>

</div>
  <!-- result card box end -->

<!-- delete confirm overlay start -->
<div class='del-conf-overl-outer'>
  <div class='del-conf-overl-inner'>

    <div class='del-conf-overl-box'>
      <p class='del-conf-text1'>Confirm!</p>
      <p class='del-conf-text2'>Are you sure you want to delete your favourites!</p>
      <div class='del-conf-btns-con'>
        <button class='del-conf-cancel-btn' type='button'>Cancel</button>
        <button class='del-conf-confirm-btn' type='button'>Confirm</button>
      </div>
    </div>

  </div>
</div>
<!-- delete confirm overlay end -->

    【讨论】：

    • 最佳实践是使用有意义的东西。 ID 可能有意义，但维护和跟踪它们也可能需要大量人力。
    • 您的方法非常有效。感谢您的时间和精力。
    【解决方案2】：

    根据您的评论，我决定完全重新开始我的回答。这可能不是最好的方法。这是fiddle，您可以自己查看。

    我们要做的第一件事是创建一个全局对象来存储我们的事件，以便我们可以在任何地方访问它们。这是必要的，因此我们可以存储单击了哪个删除按钮。

    var Event = {};

    接下来，我们从 show 函数中捕获事件并将其存储在对象中。

    function showDeleteConfBox(event) {
    Event.remove = event;
    del_conf_overlay_box.classList.add('show-del-conf-overl-box');
}

    现在在我们的 remove 函数中，我们确切地知道事件来自哪个元素，因此我们可以遍历到正确的卡片。

    function removeDeleteconfBox() {
    del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
    Event.remove.target.closest('.res-card-outer').classList.add('hide-res-card-outer');
}

    然后我们在取消函数中删除现有的事件监听器，以防止任何其他卡片被隐藏。

    function cancelDeleteconfBox() {
    del_conf_overlay_box.classList.remove('show-del-conf-overl-box');
    del_conf_confirm_btn.removeEventListener("click", function() {
        removeDeleteconfBox();
    });
}

    【讨论】：

    • @IbnulAlam 我添加了一个新的答案来解决你提到的问题。
    • @IbnulAlam 很好，但你为什么接受另一个答案？
    • 我不得不接受它，因为这个问题来自我正在进行的项目，我等不及了，所以首先对我有用的修复我确实接受了它，我把它放在我的代码上.但是你的也很好，只是出了点小问题。
    猜你喜欢
    • 1970-01-01
    • 2012-01-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode