Spring boot项目开发实战——（LayUI实现前后端数据交换与定义方法渲染数据）

xvwen

已于 2023-02-09 13:29:44 修改

阅读量3.2k

点赞数 2

于 2023-02-08 22:05:39 首次发布

本文链接：https://blog.csdn.net/xwh3165037789/article/details/128941957

版权

前端开发同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

Spring Boot

19 篇文章 3 订阅

订阅专栏

LayUI优势

接上节Spring boot项目开发实战一（环境搭建）搭建好前后端环境后，数据传输的唯一方式就是HTTP协议。对于LayUI来说，是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式。对于模块化，最印象深刻的就是node，开发node遵循了commonjs准则，一切皆模块。

对于LayUI来说，也是模块化开发，每个组件及工具都是一个模块，可复用的模块，不同于node的模块来说，layui支持原生的js，css，html，并提供了一套完整的开发方案，可复用的模块和组件极高的提高了开发效率，对于layui来说除了导入layui.js外几乎不需要其他任何模块就能完成基于layui的模块化开发，而不需要下载任何插件。

LayUI最重要的特性就是学习周期短，拿来即用。例如，就布局来说，使用layui的栅格系统只需要两步：

导入layui.js和layui.css

<!--引入 layui.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.5/css/layui.min.css">
 
<!-- 引入 layui.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.5/layui.js"></script>

引入layui模块

<script src="./layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){  //use方法的数组内引入
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script>

修改class属性为内置属性

<button type="button" class="layui-btn">一个标准的按钮</button>  <!--class = layui-btn-->

实现上面两个步骤后就直接可以使用放心粘贴 😃 layui的模块代码了，实现拿来即用，需要注意的是使用时需要导入模块，即拿来即用，需要那个模块就导入模块名称即可。

layui.use(['layer', 'form','button','menu'], function(){  //use方法的数组内引入
  var layer = layui.layer
  ,form = layui.form
  ,button = layui.button
  ,menu = layui.menu;
  
  layer.msg('Hello World');
});

测试代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--引入 layui.css -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.5/css/layui.min.css">
		 
		<!-- 引入 layui.js -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.4.5/layui.js"></script>
	</head>
	<body>
		<h1>hello</h1>
		<button type="button" class="layui-btn">一个标准的按钮</button>
		
	</body>
	<script>
		layui.use(['layer', 'form','button'], function(){
		  var layer = layui.layer
		  ,form = layui.form
		  ,button = layui.button;
		  
		  layer.msg('Hello World');
		});
	</script>
</html>

在这里插入图片描述
三个步骤即实现了layui的使用，快捷又方便，学习周期很短。

不同于VueJs，AngularJs，ReactJs，layui独立于MVVN模式，一般不支持原生js。偏向于数据匹配视图，后台返回的数据需要有一定的格式。

layui的基本使用在官网开发手册上非常详细，可以使用演示的框架快速构建后台管理页面

layui-admin

在这里插入图片描述
项目构建为任意自己喜欢的样子,

layui构建echarts的构建过程请移步layui 使用 echarts讲的非常详细，感谢作者！

LayUI使用AJAX

//加载jquery模块
layui.use(['jquery', 'layer'], function(){ 
  var $ = layui.$ //重点处
  ,layer = layui.layer;
  
  //后面就跟你平时使用jQuery一样$为关键符号
  $('body').append('Hello jQuery');

注意是var $ = layui.$ 而不是var $ = layui.juqery

在这里插入图片描述

在使用内置模块jquery时，一定要在layui内部使用，外部是无效的，在外部使用也就失去了使用layui框架的意义，使用在模块类响应的数据才可填充到又layui模块构建的视图中。

LayUI方法定义

在layui的use中常规的js定义方法1是无效的，应为不符合js模块的规范，需要使用layui的接口window定义。

//渲染数据
function updateSaleDat(vo){
    document.getElementById("saleData").innerText = vo
}

在这里插入图片描述

在layui模块中可是使用js的内置api但是想函数式编程的模块不允许使用。

window接口定义方法

window.funName = function (){}

//渲染数据
window.updateSaleData = function(vo){
    document.getElementById("saleData").innerText = vo
}

在这里插入图片描述

渲染成功。

windows接口的作用是将layui.use内部定义的模块或方法向外部的script暴露即和原生定义在script标签内部的方法无差别，方便在页面的任意地方调用。即window是layui模块与js数据交换的通道。

xvwen

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
Spring boot项目开发实战——（LayUI实现前后端数据交换与定义方法渲染数据）

layui使用内置jquery的ajxa实现数据传输，定定义方法渲染数据。
复制链接

扫一扫

专栏目录