小工具      在线工具  汉语词典  dos游戏  css  js  c++  java

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

前端开发,# Spring Boot,spring boot,layui,前端 额外说明

收录于:17天前

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.jslayui.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管理

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

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数据交换的通道。

. . .

相关推荐

额外说明

CentOS7关闭防火墙

1. 查看防火墙状态 使用命令 systemctl status firewalld.service 查看后,看到active(running)就意味着防火墙打开了。 2. 临时关闭防火墙 使用命令 sudo systemctl stop firewal

额外说明

mysql时间范围分组按时间段排序

SELECT nums, count(*) TimesParSum, sum(CHARGE_TOTAL) TimesParSum FROM ( SELECT CASE WHEN REALSTARTTIME >= '201706

额外说明

MockMvc使用案例模拟前端http请求

MockMvc 实体类: 控制台 测试类: pom MockMvc是Spring MVC中提供的用于模拟HTTP请求和测试控制器的工具类。通过使用MockMvc,可以方便地对控制器的处理方法进行测试,验证其是否按照预期进行处理并返回正确的响应结果。 在使

额外说明

idea 导入非maven 非框架 非ssm 传统web项目

前言: 由于需要用到一个传统的javaweb项目,里面用到了传统的servlet,jsp,也没有maven管理(老项目是用eclipse编写的)。这里记录一下idea的导入过程,备用。 项目导入与配置 1、导入项目 2、找到eclipse中的项目,点击O

额外说明

【C#】Unity3D中的C#编程初级

推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 这篇文章主要是给零基础想

额外说明

解决华为手机破解巧影软件无法使用

原文地址:https://blog.csdn.net/dx147305114/article/details/87863052 本次解决的是部分巧影破解软件的问题,在网上看了很多都是关于华为手机无法使用破解巧影的问题,整理了一下解决方案,供大家参考。 1

额外说明

微服务 第一章 Java线程池技术应用

系列文章目录 第一章 Java线程池技术应用 文章目录 系列文章目录 @[TOC](文章目录) 前言 1、Java创建线程方式回顾 1.1、继承Thread类(只运行一次) 1.1.1、改造成主线程常驻,每秒开启新线程运行 1.1.2、匿名内部类 1.1

额外说明

C++声明extern变量和extern函数的用法

目录  一、 声明extern变量 1、 如何声明 2、在何处声明 3、在何处初始化 4、在何处调用 5、举例声明extern变量 (1)、声明extern变量的test.h文件 (2)、初始化extern变量的test.cpp文件 (3)、调用exte

额外说明

系统架构设计-企业信息化战略与实施 知识点

一、信息和信息化的概念 1. 信息 维纳(Norbert Wiener):信息就是信息,既不是物质也不是能量,但信息可转换为物质或能量。 香农(Claude E.Shannon):信息就是不确定性的减少。(引入热力学概念“熵”。),单位为比特。 哲学界:

额外说明

备战Cloudera Data Engineer认证—1

今年定下的一个小目标,通过Cloudera的Data Engineer认证。在Cloudera的网站上看了一下,这个认证需要以下的知识: Data Ingest The skills to transfer data between external s

ads via 小工具