云风网（www.niech.cn）个人网站搭建（九）html静态菜单列表替换为接口请求动态数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了云风网（www.niech.cn）个人网站搭建（九）html静态菜单列表替换为接口请求动态数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

之前部署的网站 html 内容都是静态写死的，现在需要替换为接口获取数据展示
云风网（www.niech.cn）个人网站搭建（九）html静态菜单列表替换为接口请求动态数据,个人开发网站搭建,html,前端

<div class="col-lg-4 col-md-6 col-xs-12 active textCenter">
  <div class="table wow fadeInUp" id="active-tb" data-wow-delay="1.2s">
    <div class="title">
      <h3><a href="https://nodejs.org/en/about" target="_blank">Nodejs</a></h3>
    </div>
    <ul class="description">
    <p class="price-value">基于 Chrome V8 解析引擎的Js运行时环境。</p>
    </ul>
  </div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 active textCenter">
  <div class="table wow fadeInUp" id="active-tb" data-wow-delay="1.2s">
    <div class="title">
      <h3><a href="https://www.mongodb.com/try/download/community" target="_blank">mongodb</a></h3>
    </div>
    <ul class="description">
    <p class="price-value">前端开发人员普遍使用的数据库。</p>
    </ul>
  </div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 active textCenter">
  <div class="table wow fadeInUp" id="active-tb" data-wow-delay="1.2s">
    <div class="title">
      <h3><a href="https://cn.vuejs.org/" target="_blank">Vue</a></h3>
    </div>
    <ul class="description">
    <p class="price-value">渐进式/适用场景丰富的 Web 前端框架。</p>
    </ul>
  </div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 active textCenter">
  <div class="table wow fadeInLeft" data-wow-delay="1.2s">
    <div class="title">
      <h3><a href="https://react.docschina.org/" target="_blank">React</a></h3>
    </div>
    <ul class="description">
      <p class="price-value">react中文文档，Web 和原生交互界面的库
      </p>
    </ul>
  </div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 textCenter">
  <div class="table wow fadeInRight" data-wow-delay="1.2s">
    <div class="title">
      <h3><a href="https://angular.cn/" target="_blank">Angular</a></h3>
    </div>
    <ul class="description">
      <p class="price-value">angular中文文档，构建未来的 Web 开发框架
      </p>
    </ul>
  </div>
</div>

<div class="col-lg-4 col-md-6 col-xs-12 textCenter">
  <div class="table wow fadeInLeft" data-wow-delay="1.2s">
    <div class="title">
      <h3><a href="https://element-plus.org/zh-CN/" target="_blank">Element Plus</a></h3>
    </div>
    <ul class="description">
      <p class="price-value">基于 Vue 3，面向设计师和开发者的UI组件库</p></ul>
  </div>
</div>

这些重复的代码结构简化为动态数据循环渲染

<div id="menuList"></div>

<script>
      function getMenu(tokens) {
        $.ajax({
          url: "http://xx.xx.xx.xx:8090/api/func/funcMenu", // 设置请求地址
          type: "get", // 或者"POST"等其他HTTP请求类型
          headers: {      //请求头
            Authorization: tokens, //这是获取的token
          },
          dataType: "json", // 指定返回结果的格式为JSON
          data: {}, // 传递参数，这里的key-value对应于后台接收参数时的名称与值
          success: function(response) {
              var menuList = response.data
              // 自定义字符串,用于拼接标签
              var menuStr = "";
              menuList.forEach(e => {
                menuStr += `<div class="col-lg-4 col-md-6 col-xs-12 active textCenter">
                              <div class="table wow fadeInUp" id="active-tb" data-wow-delay="1.2s">
                                <div class="title">
                                  <h3><a href="${e.url}" target="_blank">${e.name}</a></h3>
                                </div>
                                <ul class="description">
                                <p class="price-value">${e.desc}</p>
                                </ul>
                              </div>
                            </div>`;
              })
              // 拼接完字符串数组后用innerHTML把它渲染到页面中
              document.getElementById("menuList").innerHTML = menuStr;
          },
          error: function() {
              console.log("失败");
          }
        });  
      }
      function login() {
        $.ajax({
          url: "http://xx.xx.xx.xx:8090/api/user/login", // 设置请求地址
          type: "post", // 或者"POST"等其他HTTP请求类型
          dataType: "json", // 指定返回结果的格式为JSON
          data: {
            username: 'admin', 
            password: '123456'
          }, // 传递参数，这里的key-value对应于后台接收参数时的名称与值
          success: function(response) {
            getMenu(response.token)
          },
          error: function() {
              console.log("失败");
          }
        });  
      }
      login()

    </script>