云风网(www.niech.cn)个人网站搭建(九)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", // 指定返回结果的格式为JSONdata: {}, // 传递参数,这里的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", // 指定返回结果的格式为JSONdata: {username: 'admin', password: '123456'}, // 传递参数,这里的key-value对应于后台接收参数时的名称与值success: function(response) {getMenu(response.token)},error: function() {console.log("失败");}});  }login()</script>

这样就修改完成了。
至此,网站的初步部署已经完成, 云风网 正常访问。接下来采用 vue3.0 完成前端部分的改造,以及后续接口分页等功能的完善,未完待续!!!

这篇关于云风网(www.niech.cn)个人网站搭建(九)html静态菜单列表替换为接口请求动态数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/633942

相关文章

python中列表应用和扩展性实用详解

《python中列表应用和扩展性实用详解》文章介绍了Python列表的核心特性:有序数据集合,用[]定义,元素类型可不同,支持迭代、循环、切片,可执行增删改查、排序、推导式及嵌套操作,是常用的数据处理... 目录1、列表定义2、格式3、列表是可迭代对象4、列表的常见操作总结1、列表定义是处理一组有序项目的

python运用requests模拟浏览器发送请求过程

《python运用requests模拟浏览器发送请求过程》模拟浏览器请求可选用requests处理静态内容,selenium应对动态页面,playwright支持高级自动化,设置代理和超时参数,根据需... 目录使用requests库模拟浏览器请求使用selenium自动化浏览器操作使用playwright

Python极速搭建局域网文件共享服务器完整指南

《Python极速搭建局域网文件共享服务器完整指南》在办公室或家庭局域网中快速共享文件时,许多人会选择第三方工具或云存储服务,但这些方案往往存在隐私泄露风险或需要复杂配置,下面我们就来看看如何使用Py... 目录一、android基础版:HTTP文件共享的魔法命令1. 一行代码启动HTTP服务器2. 关键参

C++11范围for初始化列表auto decltype详解

《C++11范围for初始化列表autodecltype详解》C++11引入auto类型推导、decltype类型推断、统一列表初始化、范围for循环及智能指针,提升代码简洁性、类型安全与资源管理效... 目录C++11新特性1. 自动类型推导auto1.1 基本语法2. decltype3. 列表初始化3

SpringBoot监控API请求耗时的6中解决解决方案

《SpringBoot监控API请求耗时的6中解决解决方案》本文介绍SpringBoot中记录API请求耗时的6种方案,包括手动埋点、AOP切面、拦截器、Filter、事件监听、Micrometer+... 目录1. 简介2.实战案例2.1 手动记录2.2 自定义AOP记录2.3 拦截器技术2.4 使用Fi

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动