🥳🥳Welcome Huihui's Code World ! !🥳🥳
接下来看看由辉辉所写的关于LayUi的相关操作吧
目录
🥳🥳Welcome Huihui's Code World ! !🥳🥳
一.手风琴是什么
二.手风琴在什么时候使用（常见使用场景）
三.怎么完成手风琴与数据库的数据交互
效果展示
项目层级
1. 创建数据库：
2.编写实体类
3.工具类
4.dao层
5.servlet
6.jsp界面
四.所用图片
一.手风琴是什么
在前端开发中，框架中的手风琴（Accordion）是一种常见的UI组件，用于创建可折叠的内容面板。它通常由多个面板组成，每个面板包含一个标题和一个可隐藏/展开的内容区域
- 手风琴面板只有一个面板可以处于展开状态，其他面板处于折叠状态。用户可以点击面板的标题部分，切换面板的展开和折叠状态，以显示或隐藏相应的内容区域
- 框架中的手风琴通常提供了丰富的配置选项和自定义样式，以适应不同的设计需求和交互行为。它可以用于创建导航菜单、信息折叠、内容面板等各种场景，提供了一种可视化和简洁的方式来展示和切换页面的内容
二.手风琴在什么时候使用（常见使用场景）
- 1. 导航菜单：
- 手风琴可以用于创建具有层级结构的导航菜单。每个菜单项可以是一个手风琴面板，展开后显示其子菜单项
- 2. 内容折叠：
- 手风琴可以用于在页面中折叠或展开大段内容，以便用户根据需要查看相关信息。这在网页表单、说明文档或用户个人资料等场景中特别有用
- 3. FAQ页面：
- 手风琴可以用于创建Frequently Asked Questions（常见问题）页面，其中每个问题是一个手风琴面板。用户可以点击问题标题以展开或折叠问题的答案
- 4. 展示面板：
- 手风琴可以用于创建可扩展的展示面板，用于显示不同内容或选项。例如，在产品列表或服务功能中，可以使用手风琴来呈现每个产品或功能的详细信息
- 5. 折叠侧边栏：
- 手风琴可以用于创建折叠式侧边栏，以节省页面空间。用户可以点击手风琴面板来展开或折叠侧边栏部分，以显示或隐藏相关内容或功能
三.怎么完成手风琴与数据库的数据交互
效果展示
项目层级
1. 创建数据库：
- 首先，需要使用适当的数据库管理系统（如MySQL、MongoDB等）创建一个数据库，并设计适当的表结构来存储手风琴组件所需的数据【这里使用的是MySQL】
2.编写实体类
package com.wh.entity; public class Accordion { private String title; private String aname; private String ainfo; private String aimg; public Accordion() { // TODO Auto-generated constructor stub } public Accordion(String title, String aname, String ainfo, String aimg) { super(); this.title = title; this.aname = aname; this.ainfo = ainfo; this.aimg = aimg; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getAname() { return aname; } public void setAname(String aname) { this.aname = aname; } public String getAinfo() { return ainfo; } public void setAinfo(String ainfo) { this.ainfo = ainfo; } public String getAimg() { return aimg; } public void setAimg(String aimg) { this.aimg = aimg; } @Override public String toString() { return "Accordion [title=" + title + ", aname=" + aname + ", ainfo=" + ainfo + ", aimg=" + aimg + "]"; } }3.工具类
实体类，工具类，配置文件等在之前已经全部展示过，在此有不懂的小伙伴，可以点击下方链接查看 👇
LayUi之树形结构的详解（附有全案例代码）http://t.csdn.cn/yvL1t
4.dao层
package com.wh.dao; import java.util.ArrayList; import java.util.List; import com.wh.entity.Accordion; import com.zking.util.BaseDao; import com.zking.util.BuildTree; import com.zking.util.PageBean; import com.zking.util.TreeVo; public class AccordionDao extends BaseDao<Accordion>{ //查询所有 public List< Accordion> list( Accordion accordion, PageBean pageBean) throws Exception { String sql="select * from accordion"; return super.executeQuery(sql, Accordion.class, pageBean); } public static void main(String[] args) { AccordionDao a = new AccordionDao(); Accordion accordion = new Accordion(); try { List<Accordion> list = a.list(accordion, null); System.out.println(list); } catch (Exception e) { e.printStackTrace(); } } // //查询所有 // public List<TreeVo< Module>> menus( Module module, PageBean pageBean) throws Exception { // List<TreeVo<Module>> menus = new ArrayList<>(); // List<Module> list = this.list(module, pageBean); // for (Module m : list) { // TreeVo<Module> tv = new TreeVo<>(); // tv.setId(m.getId()+""); // tv.setParentId(m.getPid()+""); // tv.setText(m.getName()); // menus.add(tv); // } return menus; // return BuildTree.buildList(menus, "-1");//-1是顶级节点的id // } }5.servlet
package com.wh.web; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.wh.dao.AccordionDao; import com.wh.entity.Accordion; import com.zking.framework.ActionSupport; import com.zking.framework.ModelDriver; import com.zking.util.PageBean; import com.zking.util.ResponseUtil; import com.zking.util.TreeVo; public class AccordionAction extends ActionSupport implements ModelDriver< Accordion>{ private Accordion accordion = new Accordion(); private AccordionDao ad = new AccordionDao(); public void list(HttpServletRequest req, HttpServletResponse resp) { try { List<Accordion> list = ad.list(accordion, null); ResponseUtil.writeJson(resp, list); } catch (Exception e) { e.printStackTrace(); } } @Override public Accordion getModel() { return accordion; } }6.jsp界面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <%@include file="common/head.jsp"%> <meta charset="utf-8"> <title>手风琴案例</title> </head> <body > <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>🐻❄️童年大回忆🐻❄️</legend> </fieldset> <div class="layui-collapse" lay-accordion="" id ="accordion"> <div class="layui-colla-item" > <h2 class="layui-colla-title">文豪</h2> <div class="layui-colla-content layui-show"> <div class="layui-collapse" lay-accordion=""> <div class="layui-colla-item"> <h2 class="layui-colla-title">唐代</h2> <div class="layui-colla-content layui-show"> </div> </div> </div> </div> </div> </div> <script> layui.use(['element', 'layer'], function(){ var element = layui.element; var layer = layui.layer; var $ = layui.$; $.ajax({ url:"accordion.action?methodName=list", dataType:'json', method: 'post', success: function(data) { console.info(data) var content=' '; $.each(data,function(i,n){ content+='<div class="layui-colla-item"> '; content+='<h2 class="layui-colla-title">'+n.aname+'</h2> '; content+='<div class="layui-colla-content"><img src="'+n.aimg+'" style="width:64px; height:64px; margin-right:100px;" />'+n.ainfo+'</div> '; content+=' </div>'; }) $("#accordion").html(content); element.render(); } }) //监听折叠 element.on('collapse(test)', function(data){ layer.msg('展开状态：'+ data.show); }); }); </script> </body> </html>
四.所用图片
文章来源：https://www.toymoban.com/news/detail-557560.html
好啦，今天的分享就到这了，希望能够帮到你呢！😊😊 文章来源地址https://www.toymoban.com/news/detail-557560.html
到了这里，关于LayUi之手风琴的趣味案例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
