精华内容
下载资源
问答
  • layui前端框架

    2021-02-05 20:41:51
    文章目录导入layui`官网下载``Django项目配置使用静态文件`后台布局颜色栅格系统面板按钮表单上传文件表格数据表格弹出层 导入layui 官网下载 官网地址:https://www.layui.com/ 下载后解压 Django项目配置使用...


    参考视频:https://ke.qq.com/course/320021

    导入layui

    官网下载

    官网地址:https://www.layui.com/
    在这里插入图片描述
    下载后解压
    在这里插入图片描述

    Django项目配置使用静态文件

    在layui项目下创建static目录
    在这里插入图片描述
    在这里插入图片描述
    settings文件添加如下内容

    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, 'static'),
    )
    

    将解压后的layui目录移动到static目录下
    在这里插入图片描述
    在这里插入图片描述

    常用类

    导航栏显示

    layui-nav-itemed  # 展开的样式类
    layui-this  	  # 子菜单选中背景样式类
    

    后台布局

    官方文档:https://www.layui.com/doc/element/layout.html

    打开官方示例
    在这里插入图片描述
    获取代码
    在这里插入图片描述
    复制代码到项目中的index.html文件中
    在这里插入图片描述
    修改两个路径
    在这里插入图片描述
    在这里插入图片描述
    copy成功
    在这里插入图片描述
    然后就根据官网提供的示例去设计网页了

    颜色

    官网地址:https://www.layui.com/doc/element/color.html

    栅格系统

    官网地址:https://www.layui.com/doc/element/layout.html

    面板

    官网地址:https://www.layui.com/doc/element/panel.html
    在这里插入图片描述

    按钮

    官网地址:https://www.layui.com/doc/element/button.html

    表单

    官网地址:https://www.layui.com/doc/element/form.html

    上传文件

    官网地址:https://www.layui.com/doc/modules/upload.html

    表格

    官网地址:https://www.layui.com/doc/element/table.html

    数据表格

    官网地址:https://www.layui.com/doc/modules/table.html

    弹出层

    官网地址:https://www.layui.com/doc/modules/layer.html

    展开全文
  • LayUI前端框架开发视频讲解

    千次阅读 2019-02-21 14:27:45
    简 介 课程知识点: 1、两种容器的区别与使用 2、常用页面元素的使用 3、LayUI内置对象的使用 4、结合学习的...【录播】演示LayUI弹出(14分钟)  02 容器与网页布局 【录播】认识容器(8分钟) 【录播】...
    简  介

    课程知识点: 1、两种容器的区别与使用 2、常用页面元素的使用 3、LayUI内置对象的使用 4、结合学习的知识点编写项目模块 

     

    01 什么是LayUI

    【录播】课程资料与在线答疑服务(3分钟) 

    【录播】认识layui前端框架(10分钟) 

    【录播】演示LayUI弹出框(14分钟) 

    02 容器与网页布局

    【录播】认识容器(8分钟)

    【录播】认识栅格系统(5分钟)

    【录播】栅格的使用(13分钟)

    【录播】后台模板的使用(7分钟)

    03 网页基本元素(1)

    【录播】内置图标的使用(9分钟)

    【录播】按钮的使用(26分钟)

    【录播】CSS动画效果(10分钟)

    【录播】表单的使用(26分钟)

    【录播】选项卡的定(12分钟)

    【录播】进度条的使用(9分钟)

    04 网页基本元素(2)

    【录播】表格的使用(11分钟)

    【录播】面板的使用(8分钟)

    【录播】面板的使用(20分钟)

    【录播】定义微章与时间线(13分钟)

    【录播】网页其它元素(8分钟)

    05 内置模块(1)

    【录播】认识弹出层(14分钟)

    【录播】弹出层的基本参数(19分钟)

    【录播】弹出层的其它参数(12分钟)

    【录播】日期与时间的使用(15分钟)

    06 内置模块(2)

    【录播】分页组件的使用(16分钟)

    【录播】文件上传的使用(15分钟)

    【录播】动态数据表格(23分钟)

    【录播】轮播图的定义(12分钟)

    07 内置模块(3)

    【录播】数据验证(13分钟)

    【录播】滑块的使用(6分钟)

    【录播】评分的使用(9分钟)

    08 综合实战

    【录播】开发要求(6分钟)

    【录播】开发准备(22分钟)

    【录播】编写数据层代码(27分钟)

    【录播】编写业务层代码(12分钟)

    【录播】前台页面准备(7分钟)

    【录播】增加新闻信息(24分钟)

    【录播】新闻列表显示(21分钟)

    【录播】删除新闻信息(17分钟)

    【录播】修改新闻信息(28分钟)

    展开全文
  • layui ui框架笔记

    2021-07-13 11:03:07
    使用 1.概述 4. 图标 容器标签 加上class  第二种使用方式 5 按钮 原始按钮 默认按钮 ...layui.use([‘jquery’],function () { var $=layui.jquery;...$(".layui-btn").click(function () {

    使用
    1.概述
    4. 图标

    容器标签 加上class

    第二种使用方式

    5 按钮
    原始按钮
    默认按钮
    百搭按钮
    暖色按钮
    警告按钮
    禁用按钮


    大型按钮 默认按钮 小型按钮 迷你按钮

    图标
    图标

    还可以是圆角按钮 按钮组
    包裹一个容器

    事件监听
    需要引入use
    // jquery的引用

    layui.use([‘jquery’],function () {

    var $=layui.jquery;
    $(".layui-btn").click(function () {
    
        alert($(this).html())
    })
    

    })

    6导航菜单

    如果使用的是  layui.js
    

    需要进入包
    layui.use([“element”],function () {

    })
    水平的是默认
    垂直 layui-nav-tree
    基本样式 代表这是一个导航
    layui-nav

    layui-nav-item 代表这个是导航菜单的一个子项
    layui-this 默认光标指向

    layui-nav-child 选项下的子项

    7选项卡
    风格分类
    默认风格layui-tab 代表是一个选项卡
    简介风格layui-tab layui-tab-brief
    卡片风格layui-tab layui-tab-card

    layui-this 默认指向光标
    layui-tab-title 头部
    layui-tab-content 代表卡片的内容包装体
    layui-tab-item 代表卡片相应的内容区

    layui-tab-item layui-show 默认显示

    lay-allowclose=“true” tab关闭功能

    lay-filter
    事件过滤器(公用属性),主要用于事件的精确匹配,跟选择器是比较类似的。

    8进度条
    依赖加载组件:element
    layui-progress 代表进度条
    layui-progress-bar 代表里面的那条线
    lay-percent 代表默认进度条长度
    layui-bg-blue 添加 修饰颜色
    layui-progress-big 变大
    lay-showPercent="true"显示比例数字 父盒子上

    9面板和布局
    卡片面板

    layui-row 代表一行
    layui-col-space15 列与列之间的距离 0-30
    layui-row 代表列 1-12列 12沾满整行

    layui-collapse 父盒子类名 表示这是一个折叠框
    layui-colla-item 子项
    layui-colla-title 子项的标题
    layui-colla-content 子项的内容 layui-show 默认展开项

    lay-filter=“test” 组件的名字
    监听面板

    手风琴折叠
    lay-accordion 写在父盒子上控制每次只展开一个

    折叠面板 默认折叠 手风琴折叠

    1. 12格栅布局	
      
    6/12
    6/12

    layui-row 行
    layui-col-xs3 列 1-12
    移动设备、平板、桌面端的复杂组合响应式展现

    移动:4/12 | 平板:5/12 | 桌面:4/12
    layui-col-xs4 移动设备 layui-col-sm5 平板设备 layui-col-md4 桌面设备 媒体查询

    11 徽章

    layui-badge-dot 表示小圆点
    layui-bg-orange 表示颜色


    常规弧形徽章:
    6 layui-badge 表示徽章
    layui-bg-blue 表示颜色

    边框徽章:
    6

    查看消息1
    直接进行标签嵌套

    12 时间轴

    常规时间线

    • 代表时间线
    • 子项

      8月18日

      layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
      不枉近百个日日夜夜与之为伴。因小而大,因弱而强。

    • layui-timeline-content layui-text时间向里的内容 h3 标题 p 内容

    简约时间线

    • 2018年,layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架(期望)

    简约版就是只留下title

    没有区分标题和内容

    13 动画

    • 从最底部往上滑入
      layui-anim-up
    • 引入

    site-doc-icon site-doc-anim 动画 一个是js使用
    layui-anim 动画
    layui-anim-up 动画方式

    14 组件-颜色拾取器

    原理: 页面生命元素 再使用js去渲染

    15 组件- 滑块 *
    模块加载名称:slider

    16 评分

    模块加载名称:rate

    layui.use(‘rate’, function(){
    var rate = layui.rate;
    //渲染
    var ins1 = rate.render({
    elem: ‘#test1’ //绑定元素
    text:true,
    length:9

    });
    

    });

    Length放置几颗星星
    看参数表, 配置项按要求放进去就可以了。

    17 轮播
    模块加载名称:carousel

    Js layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1' ,width: '100%' //设置容器宽度 ,arrow: 'always' //始终显示箭头 // ,anim: 'updown' //切换动画方式 ,height: '400px' //切换动画方式
    });
    

    });
    自行添加配置项。 图片大小也可以自己写样式

    18 代码修饰器

    layui.use(‘code’, function(){ //加载code模块
    layui.code(); //引用code方法
    });

    19.时间和日期选择器
    Elem:板顶的页面input标签的id
    Type:指定选择器的类型
    年 year
    年月 month
    年月日 data 默认的
    时间 time
    年月日时间 datatime

    注意点:
    引入Js, css 挂载点 layuse引入, 实例 参数下载实例中。

    模板
    <input type="text" id="test1">
    

    20.表单元素
    注意点 :引入form模块
    使用

    包裹
    下拉框涉及重新渲染问题。
    输入框
    密码框
    下拉框 【重新渲染的】 注意引入模块
    lay-search="" 可以检索功能

    l

    单行选择框【重新渲染的】

    写作 阅读 游戏 音乐 旅行

    复选框【重新渲染的】

    lay-skin="primary" 原始样式 控制语句 开关【重新渲染的】 type="checkbox" lay-skin="switch" 控制 开关

    文本域

    富文本编辑器
    隐藏的一个模块。 图片上传需要一个借口

    加到参数里
    //创建一个编辑器
    var editIndex = layedit.build(‘LAY_demo_editor’);

    1. layui.use(‘form’, function(){
    2. var form = layui.form;

    21.表单对象form
    layui-form-pane 样式控制 如下

    输入框
    lay-verify=“required” 控制必填项 写在input 中

    lay-verify=“required|phone” 验证非空 验证手机号

    监听提交事件

    2监听下拉框改变事件

    // select中添加一个项目
    $(’#add’).click(function () {
    var jg = $(’#aihao’);
    console.log(jg.html())
    jg.append(‘阅读’)
    console.log(jg.html())
    form.render(‘select’); //添加之后渲染一遍
    注意引入模块
    layui.use([‘form’, ‘layedit’, ‘jquery’], function () {
    var form = layui.form;
    var layedit = layui.layedit; //编辑
    var $ = layui.jquery;
    3监听复选框改变事件

    Js部分
    form.on(‘checkbox(fuxuan)’, function(data){
    console.log(data.elem); //得到checkbox原始DOM对象
    console.log(data.elem.checked); //是否被选中,true或者false
    console.log(data.value); //复选框value值,也可以通过data.elem.value得到 给个value值, 他会显示出来。 没有显示on

    console.log(data.othis); //得到美化后的DOM对象
    

    });

    下面是 ,复选框,初始化自定义 的代码。
    初始化渲染中,因为中文逗号, 引起的split失效。

    1. 监听开关改变事件

    // 监听switch开关
    form.on(‘switch(kaiguan)’, function(data){
    console.log(data.elem); //得到checkbox原始DOM对象
    console.log(data.elem.checked); //开关是否开启,true或者false
    console.log(data.value); //开关value值,也可以通过data.elem.value得到
    console.log(data.othis); //得到美化后的DOM对象
    });

    5.监听单选改变事件

    Js部分
    // 监听radio单选
    form.on(‘radio(danxuan)’, function(data){
    console.log(data.elem); //得到radio原始DOM对象
    console.log(data.value); //被点击的radio的value值
    });

    表单验证
    lay-verify=“required|phone” 必填 手机验证
    required 非空验证
    number 数值验证
    url链接地址验证 http://
    22.弹出层-重点
    var layer=layui.layer; 模块

    layer.alert(‘回调’,function(index) {
    // alert(index)
    layer.close(index) //控制弹出后,可以关闭
    })

    数据表格
    24.弹出层和数据表格案例
    25.文件上传

    26树形组件 第三方

    下载

    基本使用

    数据格式
    标准格式

    layui风格数据格式(dataStyle)

    事件监听
    多选树的处理

    辅助元素

    穿梭框
    组件实例 颜色选择器
    音量条

    表单 元素
    表单对象 输入框 密码框
    弹出层
    数据表格
    综合案例
    文件上传
    树形组件

    使用方法

    创建项目 并引入 js css文件

    Layuicms

    展开全文
  • 今天小编就为大家分享一篇使用layui前端框架弹出form表单以及提交的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 利用layui前端框架实现对不同文件夹的多文件上传 问题场景: 普通的input标签实现多文件上传时,只能对同一个文件夹下的多个文件进行上传,如果要同时上传两个或多个文件夹下的文件,是无法实现的。这篇文章就是...

    利用layui前端框架实现对不同文件夹的多文件上传

    问题场景:

    普通的input标签实现多文件上传时,只能对同一个文件夹下的多个文件进行上传,如果要同时上传两个或多个文件夹下的文件,是无法实现的。这篇文章就是利用layui中的插件,解决这个问题。

    普通多文件上传标签:

    前端 运用layui

    操作步骤:
    1、进入layui首页,下载整个组件
    2、下载完成后,把名字为layui的文件夹放到你的项目中进行引用
    3、引用layui.js和layui.css实现功能
    4、可点击可进入layui文件上传实例的官方网址进行参考,来以上三步的前端代码实现

    HTML代码块:

    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal"
                style="margin-left: 30px"
                id="testList">选择多文件
        </button>
        <button type="button" class="layui-btn" id="testListAction"
                style="display: inline; margin-left: 26px;">
            开始上传
        </button>
        <div class="layui-upload-list col-md-12">
            <table class="layui-table" style="margin: 0 0 0 0">
                <thead style="display: none">
                <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
    </div>

    JS代码块

    
    <script>
        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;
            //多文件列表示例
            var demoListView = $('#demoList')
                , uploadListIns = upload.render({
                elem: '#testList'
                , url: '/task_mgm/taskinfo_upload'
                , accept: 'file'
                , multiple: true
                , auto: false
                , bindAction: '#testListAction'
                , choose: function (obj) {
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td>' + file.name + '</td>'
                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                            , '<td>等待上传</td>'
                            , '<td>'
                            , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            , '</td>'
                            , '</tr>'].join(''));
    
                        //单个重传
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });
    
                        //删除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                        });
    
                        demoListView.append(tr);
                    });
                }
                , done: function (res, index, upload) {
                    if (res.code == 0) { //上传成功
                        var tr = demoListView.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        {#tds.eq(3).html(''); //清空操作#}
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                , error: function (index, upload) {
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
       });
     })
    </script>

    Python后端 代码块

    UPLOAD_FOLDER = 'static_files/task_mgm/'
    # 设置允许上传的文件类型
    ALLOWED_EXTENSIONS = set(
        ['txt', 'png', 'jpg', 'xls', 'JPG', 'PNG', 'xlsx', 'gif', 'GIF', 'ppt', 'pptx', 'doc', 'docx', 'csv', 'sql', 'py',
         'rar'])
    
    # 用于判断文件后缀
    def allowed_file(filename):
        return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
        
    @task_mgm.route('/taskinfo_upload',method=['post'])
    @login_required
    def taskINfo_upload_fun():
        if request.method == 'POST':
            # 上传文件的键名是file
            if 'file' not in request.files:
                logging.debugp('No file part')
                return jsonify({'code': -1, 'filename':'', 'msg':'No file part'})
            # 获取文件对象
            file = request.files['file']
            # 若用户没有选择文件就提交,提示‘No selected file’
            if file.filename == '':
                logging.debug('No selected file')
                return jsonify({'code': -1', 'filename':'', 'msg':'No selected file'})
            else:
                try:
                    if file and allowed_file(file.filename):
                        origin_file_name = file.filename
                        logging.debug('filename is %s' % origin_file_name)
                        file_dir = os.path.join(os.getcwd(), UPLOAD_FOLDER)
                        if os.path.exists(file_dir):
                            logging.debug('%s path exist' % file_dir)
                            pass
                        else:
                            logging.debug('%s path not exist' % file_dir)
                            os.makedirs(file_dir)
                        file.save(os.path.join(file_dir, filename))
                        return jsonify({'code':0, 'filename':origin_file_name, 'msg': 'save successfully'})
                    else:
                        logging.debug('%s not allowed' % file.filename)
                        return jsonify({'code':-1, 'filename':'', 'msg': 'File not allowed'})
                except Exception as e:
                    logging.debug(e)
                    return jsonify({'code':-1, 'filename':'', 'msg':'Error occurred'})
        else:
            return jsonify({'code':-1, 'filename': '', 'msg':'Method not allowed'})

    下面简单展示一下效果图:
    1323525-20190329145904852-362584434.png

    到此为止,前后端代码都有了,可以粘去直接使用!!!!

    转载于:https://www.cnblogs.com/We612/p/10621230.html

    展开全文
  • Layui框架实现图片上传

    万次阅读 多人点赞 2019-08-02 17:05:47
    Layui框架实现图片上传 前言: 一直以来,图片上传总是件很麻烦的事。最近在学layui,发现layui真是极大简化了各种复杂的操作,避免了繁琐的开发。 layui图片上传和传统的图片上传不同,它并不予表单元素并存,而是...
  • 使用layui框架实现文件上传流程如下;选择图片,将图片传至后台保存到指定文件夹下。后台向前台返回图片在服务器下的路径地址。前台将获得的地址填入隐藏控件中随着表单一起提交到后台。这样以来,表单提交的就不再...
  • ,table = layui.table //表格 ,$=layui.jquery //jquery ,upload=layui.upload //拖拽上传 upload.render({ elem: '#test10' ,url: 'file/upload.do' //改成您自己的上传接口 ,accept:"file" ,done: function(res){ ...
  • 问题描述: 1、本地phpstudy部署,php 7.0.12, MySQL... 2、服务器环境,宝塔配置部署WAMP,测试正常; 异常情况: ...layui版本:v2.2.6 MIT 其实遇见这种问题是很奔溃,因为这个错误原因,事情往往是是干进度...
  • 主要介绍了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作,结合实例形式分析了layui框架结合thinkPHP进行文件上传与处理操作相关实现技巧,需要的朋友可以参考下
  • Layui框架

    2020-05-22 10:27:03
    动画第三章:Layui模块1. 颜色选择器(引入colorpicker模块)2. 滑块(引入slider模块)3. 评分(引入rate模块)4. 轮播(引入carousel模块)5. 代码修饰器(引入code模块)6. 时间和日期选择器(引入layda
  • laravel使用Layui框架文件上传 运行环境: 1、laravel6+layui2.5.5。 重点: 1、token。禁用上传页面的token。 2、Js中设置field。 代码 禁用token: 修改VerifyCsrfToken.php文件 protected $except = [ // 'new...
  • 最近在用layUI框架做一个小项目,上传文件时MultipartFile参数输出为null,下面是我的解决办法: 首先是我后端的java代码: @RequestMapping("/upload") public String fileuoload2(HttpServletRequest request, ...
  • 上传文件所需要的工具类封装到util包里面 1、FTP_Upload_Download(文件上传)类 package com.ysm.util; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io....
  • 表单提交难免会携带图片上传或附件...同样,Layui的upload上传控件默认自动提交,也可以通过绑定另一个按钮,控制提交。 控件功能不再详述。 综上,最初的想法是,将upload通过绑定form的button,这样,点击form...
  • 1、在使用layui上传文件的组件的时候遇到一个问题,接口异常。概述一下问题,笔者是使用ssm框架实现图片上传的,整合layui的上传组件的时候会提示接口异常,但实质上图片可以上传到服务器而且也是可以将图片名写进...
  • 创建需要的标签 首先在前端页面写上上传图片的按钮 <...上传图片</button> <img class="layui-upload-img" id="demo1"> <p id="demoText" ></p> 引入js 在js中引入la...
  • 使用form表单前需要声明, table表格也是类似原理
  • 最后通过“upload.render({...})”方法实现图片上传即可。本教程操作环境:Windows7系统、layui2.4版,该方法适用于所有品牌...layui上传功能的实现:一、前往官网下载layui的框架打开html文件,引用其中的 layui...
  • layui框架中富文本图片上传大小设置

    千次阅读 2019-05-23 09:48:50
    使用layui的富文本编辑器时,上传图片页面只能原样显示,所以对框架文件进行了修改: 文件位置:layui/lay/modules/layedit.js 可以搜索’src’,大致位置如上图所示,style为本人所添加的样式。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,737
精华内容 1,094
关键字:

layui上传框