layui增删改查的实现

这篇具有很好参考价值的文章主要介绍了layui增删改查的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

在前三篇layui博客的基础上继续完善,这篇博客增加了数据表格来实现增删改查

这里要注意layui需要使用2.6以上的版本

dao方法的编写

package com.zking.dao;

import java.util.List;
import java.util.Map;

import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;

public class UserDao extends BaseDao<User> {

	/**
	 * 查询结果携带角色名称
	 * @param user
	 * @param pageBean
	 * @return
	 * @throws Exception
	 */
	public List<Map<String, Object>> userRole(User user, PageBean pageBean) throws Exception {
		String sql = "SELECT u.* ,\r\n" + 
				"(CASE \r\n" + 
				"	WHEN u.rid='1' THEN\r\n" + 
				"		'管理员'\r\n" + 
				"	WHEN u.rid='2' THEN\r\n" + 
				"		'发起者'\r\n" + 
				"	WHEN u.rid='3' THEN\r\n" + 
				"		'审批者'\r\n" + 
				"	WHEN u.rid='4' THEN\r\n" + 
				"		'参与者'\r\n" + 
				"	WHEN u.rid='5' THEN\r\n" + 
				"		'会议室管理员'	\r\n" + 
				"	ELSE\r\n" + 
				"		'其他'\r\n" + 
				"END\r\n" + 
				") rname\r\n" + 
				"FROM t_oa_user u where 1=1";
		String name = user.getName();
		if(StringUtils.isNotBlank(name)) {
			sql +=" and name like '%"+name+"%'";
		}
		return super.executeQuery(sql, pageBean);
	}

	public int add(User user) throws Exception {
		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
	}
	
	public int del(User user) throws Exception {
		String sql = "delete from t_oa_user where id = ?";
		return super.executeUpdate(sql, user, new String[] {"id"});
	}
	
	public int edit(User user) throws Exception {
		String sql = "update t_oa_user set name=?,loginName=?,pwd=? where id = ?";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
	}

}

servlet的编写

package com.zking.web;

import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;

public class UserAction extends ActionSupport implements ModelDriver<User> {
	
	private User user = new User();
	private UserDao ud = new UserDao();
		
	public void userRole(HttpServletRequest req, HttpServletResponse resp) {
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			List<Map<String, Object>> userRole = ud.userRole(user, pageBean);
			ResponseUtil.writeJson(resp, R.ok(0, "查询成功", pageBean.getTotal(), userRole));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
	
	public void add(HttpServletRequest req, HttpServletResponse resp) {
		try {
			int add = ud.add(user);
			ResponseUtil.writeJson(resp, R.ok(0, "新增成功"));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
	
	public void del(HttpServletRequest req, HttpServletResponse resp) {
		try {
			int add = ud.del(user);
			ResponseUtil.writeJson(resp, R.ok(0, "删除成功"));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
	
	public void edit(HttpServletRequest req, HttpServletResponse resp) {
		try {
			int add = ud.edit(user);
			ResponseUtil.writeJson(resp, R.ok(0, "修改成功"));
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
	
	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
	}

	

}

R工具类

package com.zking.util;

import java.util.HashMap;

public class R extends HashMap{
	public R data(String key, Object value) {
		this.put(key, value);
		return this;
	}
	
	public static R ok(int code, String msg) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg);
		return r;
	}
	
	public static R error(int code, String msg) {
		R r = new R();
		r.data("success", false).data("code", code).data("msg", msg);
		return r;
	}
	
	public static R ok(int code, String msg,Object data) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg).data("data", data);
		return r;
	}
	
	public static R ok(int code, String msg, long count, Object data) {
		R r = new R();
		r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);
		return r;
	}
}

主界面jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="static/js/main.js"></script> 
<style type="text/css">
.layui-tab-content,.layui-tab,.layui-from,.layui-table-box,.layui-body,.layui-tab-item,.layui-tab-item layui-show,.layui-table-body layui-table-main{
	height:100%;
} 


</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <!-- 头部区域(可配合layui 已有的水平导航) -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <!-- Top导航栏 -->
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <!-- 个人头像及账号操作 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="login.jsp">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
      <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
       <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li> 
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
  
 
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="height:100%;">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">网站设置</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
  </div>
</div>

  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
//JS 


</script>
</body>
</html>

js代码

var element,layer,util,$;

layui.use(['element', 'layer', 'util'], function(){
   element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  
  $.ajax({
	  url:'permission.action?methodName=menus',
			  dataType:'json',
			  success:function(data){
				  console.log(data)
				  var htmlStr = '';
				  $.each(data,function(i,n){
					  htmlStr +='<li class="layui-nav-item layui-nav-itemed">';
					  htmlStr +='<a class="" href="javascript:;">'+n.text+'</a>';
					  if(n.hasChildren){
						  var children=n.children;
						  htmlStr +='<dl class="layui-nav-child">';
						  
						  $.each(children,function(index,node){
							  htmlStr +='<dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
						  })
						  htmlStr +='</dl>';
					  }
					  htmlStr +='</li>';
				  })
				  
				  $("#menu").html(htmlStr);
				  
				  element.render('menu');
			  } 
  });
});

function openTab(title,content,id){
	var $node = $('li[lay-id="'+id+'"]');
	console.log($node)
	if($node.length == 0){
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: "<iframe frameborder='0' src='"+content+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
	      ,id: id //实际使用一般是规定好的id,这里以时间戳模拟下
	    })
	}
	 element.tabChange('demo', id); //切换到:用户管理
	
}

数据表格jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="static/js/system/userManage.js"></script> 
<title>Insert title here</title>


</head>
<body>

<!-- 搜索栏 -->
	<div class="layui-form-item">
	  <div class="layui-inline">
	    <label class="layui-form-label">用户名:</label>
	    <div class="layui-input-inline">
	      <input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-inline">
	    <div class="layui-input-inline">
	      <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
	      	<i class="layui-icon layui-icon-search"></i>
	      	查询
	      </button>
	      <button id="btn_add" type="button" class="layui-btn">新增</button>
	    </div>
	  </div>
	  
	</div>
 
<table class="layui-hide" id="test" lay-filter="test"></table>
 
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
</body>
</html>

js代码

var table,$,layer;
var row;
layui.use(['table','jquery'], function(){
  table = layui.table
  ,layer=layui.layer
  ,$=layui.jquery;
  
  initTable();
  
  
  $("#btn_search").click(function(){
	  query();
  })
  
  $("#btn_add").click(function(){
	  row = null;
	  edit("新增界面");
  })
  
});

function edit(title){
	 layer.open({
	       type: 2,                    //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
	       title:title,
	       area: ['660px', '340px'],   //宽高
	       skin: 'layui-layer-rim',    //样式类名
	       content: 'jsp/system/userEdit.jsp', //书本编辑页面
	       btn:['保存','关闭'],
	       yes: function(index, layero){
	    	   //调用子页面中提供的getData方法,快速获取子页面的form表单数据
	           let data= $(layero).find("iframe")[0].contentWindow.getData();
	           console.log(data);
	           //判断title标题
	           let methodName="add";
	           if(title=="编辑")
	        	   methodName="edit";
	           $.post('user.action?methodName='+methodName,
	        		   data,function(rs){
	        	   if(rs.success){
	        		   //关闭对话框
	        		   layer.closeAll();
	        		   //调用查询方法刷新数据
	        		   query();
	        	   }else{
	        		   layer.msg(rs.msg,function(){});
	        	   }
	           },'json');
	       },
	       btn2: function(index, layero){
	    	   layer.closeAll();
	       }
	    });
	 
}

function query(){
	table.reload('test', {
		  where: { //设定异步数据接口的额外参数,任意设
		    name: $("#name").val()
		  }
	 ,request: {
		    pageName: 'page' //页码的参数名称,默认:page
		    ,limitName: 'rows' //每页数据量的参数名,默认:limit
		  }
		}); //只重载数据
}

function initTable(){
	table.render({
	    elem: '#test'
	    ,url:'user.action?methodName=userRole'
	    ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
	    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
	      title: '提示'
	      ,layEvent: 'LAYTABLE_TIPS'
	      ,icon: 'layui-icon-tips'
	    }]
	    ,title: '用户数据表'
	    ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
	      ,{field:'loginName', title:'账户名', width:120, edit: 'text'}
	      ,{field:'name', title:'用户名', width:150, edit: 'text', templet: function(res){
	        return '<em>'+ res.name +'</em>'
	      }}
	      ,{field:'pwd', title:'密码', width:80, edit: 'text', sort: true}
	      ,{field:'rname', title:'角色名称', width:100}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]]
	    ,page: true
	  });
	  
	  //头工具栏事件
	  table.on('toolbar(test)', function(obj){
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'getCheckData':
	        var data = checkStatus.data;
	        layer.alert(JSON.stringify(data));
	      break;
	      case 'getCheckLength':
	        var data = checkStatus.data;
	        layer.msg('选中了:'+ data.length + ' 个');
	      break;
	      case 'isAll':
	        layer.msg(checkStatus.isAll ? '全选': '未全选');
	      break;
	      
	      //自定义头工具栏右侧图标 - 提示
	      case 'LAYTABLE_TIPS':
	        layer.alert('这是工具栏右侧自定义的一个图标按钮');
	      break;
	    };
	  });
	  
	  //监听行工具事件
	  table.on('tool(test)', function(obj){
	    row = obj.data;
	    //console.log(obj)
	    if(obj.event === 'del'){
	    	layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
				  $.post('user.action',{
					  'methodName':'del',
					  'id':row.id
				  },function(rs){
					  if(rs.success){
		        		   //调用查询方法刷新数据
		        		   query();
		        	   }else{
		        		   layer.msg(rs.msg,function(){});
		        	   }
				  },'json');
				  layer.close(index);
				});
	    } else if(obj.event === 'edit'){
	    	edit('编辑');
	     
	    }
	  });
	
}

编辑界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="static/js/system/userEdit.js"></script>
<title>用户新增</title>
</head>
<style>
.layui-form-select dl{
	max-height:150px;
}
</style>
<body>
<div style="padding:10px;">
    <form class="layui-form layui-form-pane" lay-filter="user">
        <input type="hidden" name="id"/>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-block">
                <select name="rid">
                    <option value="">---请选择---</option>
                    <option value="1">管理员</option>
                    <option value="2">发起者</option>
                    <option value="3">审批者</option>
                    <option value="4">参与者</option>
                    <option value="5">会议管理员</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录账号</label>
            <div class="layui-input-block">
                <input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-block">
                <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
</body>
</html>

js代码

let layer,form,$;
layui.use(['layer','form','jquery'],function(){
	layer=layui.layer,form=layui.form,$=layui.jquery;
	initData();
});

function initData(){
	console.log(parent.row);
	if(null!=parent.row){
	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
	     //parent.row:表格行对象
	     form.val('user',$.extend({}, parent.row||{}));
	     $('#name').attr('readonly','readonly');
	}
}

function getData(){
    return form.val('user');
}

运行效果如下:
layui增删改查的实现,layui,前端,javascript,mysql文章来源地址https://www.toymoban.com/news/detail-562362.html

到了这里,关于layui增删改查的实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Spring Boot:Web应用开发之增删改查的实现

    增删改查功能作为 Web 应用中的基础且重要的组成部分,是基本的数据库操作,也是实现业务逻辑和功能的关键要素。下面简单介绍使用 Spring Boot 实现增删改查的功能。 在上一章 Spring Boot:Web应用开发之登录与退出的实现 文章的案例基础上,进行实现增删改查的功能。 简单

    2024年04月26日
    浏览(36)
  • Java进阶(7)——手动实现LinkedList & 内部node类的实现 & 增删改查的实现 & toString方法 & 源码的初步理解

    1.linkedList的节点,当前,上一个,下一个的思想; 2.根据index找node的方法,根据index确定从头部还是尾部; 3.linkedlist的增删改查的实现,本质是改变节点的信息; 4.递归方法实现自定义链表的toString方法; Java进阶(3)——手动实现ArrayList 源码的初步理解分析 数组插入数据和

    2024年02月11日
    浏览(51)
  • layui实现(学生)数据的增删改查

    查询 添加: 点击添加按钮: 添加成功! 修改: 点击编辑按钮: 修改信息数据,点击提交: 修改数据成功! 删除: 点击删除按钮: 点击确定,删除成功! 分页: 由于数据有限,选择5条/页,进行分页: 批量删除: 首先勾选想要删除的行,点击批量删除: 删除成功: 补

    2023年04月09日
    浏览(40)
  • LayUI框架实现OA会议系统——增删改查

    目录 前言 1. 配置准备 1.1 Layui框架 1.2  mysql数据库表 1.3 用户管理JSP页面 1.4 新增、修改用户共用界面   2. 后台编写  2.1 编写UserDao类增删改查方法 2.2  R工具类 2.3 BaseDao数据库查询方法  2.4 UserAction控制器类   3. 前台JS编写 3.1 userManage页面JS 3.2 user新增、修改iframe层JS 4. 功能运

    2024年02月16日
    浏览(39)
  • 关于eclipse导入部署具有增删改查的项目

    目录 前言:当我们刚刚进入公司的第一步就是去部署当前公司的项目,本博客就是详细介绍怎么去部署当前公司的项目。 一,开发工具: 二,具体步骤: 2.1导入公司的项目 打开eclipse开发工具 2.2配置当前的环境 1导入后报错,点击buildpath 2这里我们配置修改Tomcat,jre改成与

    2024年02月13日
    浏览(45)
  • asp.net core 6.0 efcore +sqlserver增删改查的demo

    下面是一个使用ASP.NET Core 5.0和Entity Framework Core进行增删改查操作的示例。 首先,创建一个空的ASP.NET Core 6.0 Web应用程序项目。 然后,安装以下NuGet包: Microsoft.EntityFrameworkCore.SqlServer Microsoft.EntityFrameworkCore.Tools 接下来,创建一个数据库上下文类,用于定义实体类和数据库连接

    2024年02月13日
    浏览(44)
  • ElasticSearch6.x版本概念介绍以及在Kibana上增删改查的操作

    教学讲解视频地址:视频地址 1.接近实时(NRT Near Real Time ) Elasticsearch是一个 接近实时 的搜索平台。这意味着, 从索引一个文档直到这个文档能够被搜索到有一个轻微的延迟(通常是1秒内) 2.索引(index) 一个索引就是一个拥有几分相似特征的文档的集合 。比如说,你可以有一个

    2023年04月24日
    浏览(45)
  • python:使用Flask-SQLAlchemy对数据库增删改查的简单示例

    以下将介绍Flask-SQLAlchemy对数据库增删改查的简单示例。 一、安装所需的库 pip install flask flask-sqlalchemy flask-mysql 二、创建数据表 本示例使用mysql创建数据库和表 CREATE TABLE `user` (   `id` int(11) NOT NULL AUTO_INCREMENT,   `name` varchar(255) DEFAULT NULL,   `age` int(11) DEFAULT NULL,   PRIMARY KEY (`id

    2024年02月07日
    浏览(68)
  • 【PHP系统学习】——Laravel框架数据库的连接以及数据库的增删改查的详细教程

    👨‍💻个人主页 :@开发者-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏 :PHP程序开发 —   按照 MVC 的架构,对数据的操作应该放在 Model 中完成,但如果不使用 Model,我们也可以用 laravel框架提供的 D8 类

    2024年04月15日
    浏览(50)
  • Unity UGUI的Outline(描边)组件的介绍及ABP框架提供的增删改查的基类使用

    Outline(描边)组件是Unity UGUI中的一种特效组件,用于给UI元素添加描边效果。通过设置描边的颜色、宽度和模糊程度,可以使UI元素在视觉上更加突出。 Outline(描边)组件通过在UI元素周围绘制多个相同的UI元素,并设置不同的颜色和大小,从而实现描边的效果。描边的宽度和模糊

    2024年02月21日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包