Ele+Vue前后端分离【专业版】 - 在线文档

# 组件案例

# 概述

  • 经过上面《功能组件》、《业务组件》两个章节我们详细的介绍组件的原理以及实现方式，充分了考虑了使用场景，进行了多元化、灵活性的扩展封装，具体的细节在此不再累赘的描述，如有不理解的可以查阅上两个章节的文档，本章节我们将重点给大家实例演示下，JS组件库是如何在实际模块开发中UI部分的使用，上述章节讲解了那么多，其实那都是在组件内部复杂数据处理、逻辑处理，因为框架是高度化封装，其实真正进行模块开发时使用起来非常的简单，代码量极少，尤其是JS代码，几乎看不到多余的代码，就是简简单单的调用了几个封装好的组件以及两个HTML文件列表页、编辑页，整个模块的功能就全部出来，可以直接使用；
  • 框架UI部分是基于《Thymeleaf模板引擎》 (opens new window)，语法非常的简单，尤其在框架进行了封装后，更加的简单便捷，如果不太熟悉的朋友可以直接找《度娘》 (opens new window)或者查阅官网,整体框架我们采用采用的是Layout模板布局，对页面进行了拆分头部、脚本、主题内容三个部分，具体内容请查看项目模块；

# 列表页

列表页主要是对数据进行增删改查的地方，对数据进行精准的维护，下面我们直接展示列表页的相关代码，如下所示：

<html layout:decorator="public/layout" xmlns:miguo="http://www.w3.org/1999/html">
<div layout:fragment="content">

    <!-- 表格工具栏 -->
    <form class="layui-form toolbar">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入职级名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 状态下拉单选 -->
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <!-- 下拉单选 -->
                    <widget:singleSelect name="status|0|状态|name|id" th:data="${LEVEL_STATUS_LIST}" value="0"/>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: auto;">
                    <widget:btnQuery name="查询"/>
                    <widget:btnAdd name="添加职级"/>
                    <widget:btnDAll name="批量删除"/>
                </div>
            </div>
        </div>
    </form>

    <!-- 数据表格 -->
    <table class="layui-hide" id="tableList" lay-filter="tableList"></table>

    <!-- 表格操作列 -->
    <script type="text/html" id="toolBar">
        <widget:btnEdit name="编辑"/>
        <widget:btnDel name="删除"/>
    </script>

    <!-- 状态 -->
    <script type="text/html" id="statusTpl">
        <input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="正常|停用" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }} >
    </script>
</div>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

HTML页面中涉及的组件部分我们在《UI组件部分》都有详细的讲解，不熟悉的朋友可以查阅；

# 编辑页

编辑表单是表单控件的集合，我们所需要的提交的数据都会有一个完整的控件，如下所示：

<html layout:decorator="public/form" xmlns:miguo="http://www.w3.org/1999/html">
<div layout:fragment="content">
	<form class="layui-form model-form" action="">
		<input name="id" type="hidden" th:value="${info['id']}?:0">
		<div class="layui-form-item">
			<label class="layui-form-label">职级名称：</label>
			<div class="layui-input-block">
				<input name="name" th:value="${info['name']}" lay-verify="required" autocomplete="off" placeholder="请输入职级名称" class="layui-input" type="text">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">状态：</label>
			<div class="layui-input-block">
				<widget:switchCheck name="status" data="正常|停用" th:value="${info['status']} ?: 1"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">显示顺序：</label>
			<div class="layui-input-block">
				<input name="sort" th:value="${info['sort']}" lay-verify="required|number" autocomplete="off" placeholder="请输入显示顺序" class="layui-input" type="text">
			</div>
		</div>
		<widget:btnSubmit name="submit|立即保存,close|关闭"/>
	</form>
</div>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 模块JS

上述分别为列表HTML页面、编辑页HTML页面，页面交互部分都是交给模块JS进行处理的，模块JS部分如下所示：

/**
 * 职级
 * @auth 鲲鹏
 * @date 2020-04-20
 */
layui.use(['func'], function () {

    //声明变量
    var func = layui.func
        , $ = layui.$;

    if (A == 'index') {
        //【TABLE列数组】
        var cols = [
            {type: 'checkbox', fixed: 'left'}
            , {field: 'id', width: 80, title: 'ID', align: 'center', sort: true, fixed: 'left'}
            , {field: 'name', width: 200, title: '职级名称', align: 'center'}
            , {field: 'status', width: 100, title: '状态', align: 'center', templet: '#statusTpl'}
            , {field: 'sort', width: 100, title: '显示顺序', align: 'center'}
            , {field: 'createUserName', width: 100, title: '添加人', align: 'center'}
            , {field: 'createTime', width: 180, title: '创建时间', align: 'center'}
            , {field: 'updateUserName', width: 100, title: '更新人', align: 'center'}
            , {field: 'updateTime', width: 180, title: '更新时间', align: 'center'}
            , {fixed: 'right', width: 150, title: '功能操作', align: 'center', toolbar: '#toolBar'}
        ];

        //【渲染TABLE】
        func.tableIns(cols, "tableList");

        //【设置弹框】
        func.setWin("职级", 500, 300);

        //【设置状态】
        func.formSwitch('status', null, function (data, res) {
            console.log("开关回调成功");
        });
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

模块JS代码部分很简洁，基本都是调用业务JS组件传入参数表可实现整个模块功能业务的功能，实现就是如此简单，参数分析：

  • cols：此参数是列表数据列字段的信息，主要定义了列表具有哪些参数、参数标题、列宽度、操作功能等等；
  • tableIns：调用组件方法，初始化数据列表，组件动态发起网络请求并进行一系列的数据渲染，是不是特别简单，一个完整的列表功能的实现只需简单的调用func.tableIns(cols, "tableList")便可完美的实现了；
  • setWin：调用组件设置弹窗所需参数，当点击添加、编辑、详情等需要弹窗时组件内部的showWin方法会自动解析；
  • formSwitch：捕捉开关事件、发起网络请求，实现为记录状态的维护工作；

总结：一个完整的模块就这么简简单单的实现了，对内容不太理解的朋友请转至《UI组件》、《JS组件》章节详细的阅读；

# 效果展示

至此我们的模块可以正式可以运行预览效果了，增删改查整个模块的所有功能全部完毕，下面我们直接看效果吧，请看下图：

  • 职级列表

    mixureSecure

  • 职级添加/编辑

    mixureSecure

  • 职级删除

    mixureSecure

← 扩展组件 →