LayUi之手风琴的趣味案例

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{
    	//查询所有
    		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 list = a.list(accordion, null);
    				System.out.println(list);
    			} catch (Exception e) {
    				e.printStackTrace();
    			}
    		}
    	
    	
    //	//查询所有
    //	public List> menus(  Module  module, PageBean pageBean) throws Exception {
    //		List> menus = new ArrayList<>();
    //		List list = this.list(module, pageBean);
    //		for (Module m : list) {
    //			TreeVo 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 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"%>
    
    	
    	<%@include file="common/head.jsp"%>
    		
    		
    	
    	
    		
    
    		  
    ‍❄️童年大回忆‍❄️
    		
    		
    		 
    		
    
    		
    		
    		
    		  
    
    		    
    文豪
    		    
    
    		    
    		       
    
            
    
              
    唐代
              
    
                
                
              
              
            
    		    
      
    		    
    		  	
    		  	
    		  	
    		  	
    			
    			
    			
    			
    		
    		
    		
    		
    		
    		
    	
    

四.所用图片

      好啦，今天的分享就到这了，希望能够帮到你呢！