精华内容
下载资源
问答
  • 有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学...

    Layui实现图片上传回显和删除

    需求及功能说明

    网页上传图片到服务器,图片在本地回显,可以实现删除,重新修改的操作。
    相关组件来源于Layui上传文件模块——传送门: 图片/文件上传-Layui.

    前端代码详解

    <div class=" layui-form-item layui-upload">
         <label class="layui-form-label" style="text-align: left">文章封面</label>
         <div class="layui-input-block">
         	  <#--隐藏输入框 用来存放要上传的图片路径-->
              <input id="cover" type="hidden" class="layui-input">
              <#--Layui上传按钮组件-->
              <button class="layui-btn" id="preview_img" type="button">
              <i class="layui-icon">&#xe67c;</i>上传图片
              </button>
              <#--图片预览区域-->
              <div id="ImgPreview"></div>
              <#--上传后的信息提示-->
        	  <p id="demoText"></p>
    	</div>
    </div>
    

    注释写的很清楚了,一看就懂

    JS代码

    整体代码,可直接复制看看效果

    <script type="text/javascript">
        layui.use(['form', 'layer', 'upload','element'], function () {
            var $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer,
                upload = layui.upload,
                element = layui.element;
            form.render();   //表单渲染,得渲染才会有效果显示出来
    
            //图片上传
            upload.render({
                elem: '#preview_img'
                ,url:'/resource/uploadCover'
                ,accept: 'images'
                ,field: 'cover'
                ,size: 50 * 1024 * 1024
                ,choose: function (obj) {
                        //将每次选择的文件追加到文件队列
                        var files = obj.pushFile();
                        //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
                        obj.preview(function (index, file, result) {
                            if (file.size > 0 && $('#ImgPreview').find('img').length === 0) {
                                $('#ImgPreview').empty();
                            }
                            // 添加图片 ImgPreview-预览的dom元素的id
                            $('#ImgPreview').append('<div class="image-container" id="container'+index+'">' +
                                '<div class="delete-css"><button id="upload_img" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon">&#xe640;</i></button></div>' +
                                '<img id="showImg" style="width: 150px; margin:10px;cursor:pointer;"src="' + result + '" alt="' + file.name + '"></div>');
                            //删除某图片
                            $("#upload_img").bind('click', function () {
                                delete files[index];
                                $("#container"+index).remove();
                                var demoText = $('#demoText');
                                demoText.html('');
                            });
    
                            //某图片放大预览
                            $("#showImg").bind('click',function () {
                                var width = $("#showImg").width();
                                var height = $("#showImg").height();
                                var scaleWH = width/height;
                                var bigH = 600;
                                var bigW = scaleWH*bigH;
                                if(bigW>900){
                                    bigW = 900;
                                    bigH = bigW/scaleWH;
                                }
    
                                // 放大预览图片
                                layer.open({
                                    type: 1,
                                    title: false,
                                    closeBtn: 1,
                                    shadeClose: true,
                                    area: [bigW + 'px', bigH + 'px'], //宽高
                                    content: "<img width='"+bigW+"' height='"+bigH+"' src=" + result + " />"
                                });
                            });
                        });
                    }
                , done: function (res) {
                    if (res.code>0){
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #206bc4;">上传成功</span>');
                    var coverUpload = $("#cover");
                    coverUpload.attr('value',res.data.src);//给隐藏输入框复制
                }
                , error: function () {
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });
        })
    </script>
    

    下面分模块做一个详解
    layui.use(mods, callback)方法,用过Layui的都知道,不再细说。

    核心方法即upload.render(options) 方法,相关参数及配置见Layui文档——传送门: 图片/文件上传-Layui.
    choose()是选择文件后的回调函数。返回一个object参数。当图片选择后,用append()方法追加所添加的图片和删除按钮的相关元素。

    $('#ImgPreview').append('<div class="image-container" id="container'+index+'">' +
                                '<div class="delete-css"><button id="upload_img" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon">&#xe640;</i></button></div>' +
                                '<img id="showImg" style="width: 150px; margin:10px;cursor:pointer;"src="' + result + '" alt="' + file.name + '"></div>');
    

    其中index是所选择的图片的标签,或者说ID,这里我设置了单张图片的上传,所以这个index唯一。当多图上传时,index的作用就出来了。

    然后id="upload_img"的这个按钮绑定了删除图片的事件,而id="showImg"的这张图片绑定了放大预览的事件。

    看一下效果图
    在这里插入图片描述
    当上传成功后,利用这行代码给隐藏的输入框赋值,便于后续的表单的提交。

    var coverUpload = $("#cover");
                    coverUpload.attr('value',res.data.src);
    

    总结

    Layui的组件还是挺好用的,把文档细品一下,然后在此基础上进行二次开发就可以得到自己想要的结果啦!

    我是爱学习的诸葛铁锤,觉得有用的话点个赞哈,啾咪

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

    万次阅读 多人点赞 2019-08-02 17:05:47
    Layui框架实现图片上传 前言: 一直以来,图片上传总是件很麻烦的事。最近在学layui,发现layui真是极大简化了各种复杂的操作,避免了繁琐的开发。 layui图片上传和传统的图片上传不同,它并不予表单元素并存,而是...

    Layui框架实现图片上传

    前言:

    一直以来,图片上传总是件很麻烦的事。最近在学layui,发现layui真是极大简化了各种复杂的操作,避免了繁琐的开发。
    layui图片上传和传统的图片上传不同,它并不予表单元素并存,而是单独通过异步来上传到后端,继而进行之后的操作。所以,编写表单代码时,并不需要添加enctype=“multipart/form-data”input type=“file” 相关组件了,直接写最原始的表单就行。

    附上完整demo:https://github.com/BraisedPanda/StudentSystem2.5
    demo里面新建人员中有图片导入功能,static下的sql文件夹里有完整的数据库表和测试数据,登录界面登录名:zhangsan 密码:123
    

    前端代码:

    <form class="layui-form" action="/add_user" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名:</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="username"   placeholder="填写用户名" autocomplete="off" class="layui-input username">
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">密码:</label>
            <div class="layui-input-block">
                <input type="text" name="password" lay-verify="password"  placeholder="请填写6到12位密码" autocomplete="off" class="layui-input password">
    
            </div>
    
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">性别:</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="man" title="男" checked="">
                <input type="radio" name="gender" value="woman" title="女">
    
            </div>
        </div>
       <!--************这里是上传图片的代码***************-->
        <!--************这里添加的隐藏的输入框,用来传递images的参数***************-->
        <input type="hidden" name="images" class="image">
        <div class="layui-form-item">
            <label class="layui-form-label ">照片:</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
        <!--************上面里是上传图片的代码***************-->
    
        <br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit="" lay-filter="demo1">修改</button>
                &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
                <button type="reset" class="layui-btn layui-btn-radius  layui-btn-danger">重置</button>
            </div>
        </div>
        <br>
    </form>
    

    tips:
    在这里插入图片描述
    1、白色的是隐藏的输入框,用来传递images的src地址的,因为图片不同于表单一起传数据,所以只能借助js代码来绑定参数
    2、黄色框子里就是上传图片的组件了,可以把它夹在form表单中

    js代码

    <script>
        layui.use('upload', function(){
            var $ = layui.jquery
                ,upload = layui.upload;
    
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                ,url: '/upload/'
                ,accept:'images'
                ,size:50000
                ,before: function(obj){
    
                    obj.preview(function(index, file, result){
    
                        $('#demo1').attr('src', result);
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #4cae4c;">上传成功</span>');
    
                    var fileupload = $(".image");
                    fileupload.attr("value",res.data.src);
                    console.log(fileupload.attr("value"));
                }
                ,error: function(){
                    //演示失败状态,并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });
    
    
        });
    </script>
    

    tips
    在这里插入图片描述
    1、js代码重点是黄色框子里的内容
    fileupload.attr(“value”,res.data.src);
    res.data.src是获取后端传过来的图片的url,之后给表单的隐藏图片输入框赋值即可。

    后端代码:

     //图片上传测试
        @ResponseBody
        @RequestMapping("upload")
        public Map upload(MultipartFile file,HttpServletRequest request){
    
            String prefix="";
            String dateStr="";
            //保存上传
            OutputStream out = null;
            InputStream fileInput=null;
            try{
                if(file!=null){
                    String originalName = file.getOriginalFilename();
                    prefix=originalName.substring(originalName.lastIndexOf(".")+1);
                    Date date = new Date();
                    String uuid = UUID.randomUUID()+"";
                    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
                    dateStr = simpleDateFormat.format(date);
                    String filepath = "D:\\mycode\\LayUiTest\\src\\main\\resources\\static\\images\\" + dateStr+"\\"+uuid+"." + prefix;
    
    
                    File files=new File(filepath);
                    //打印查看上传路径
                    System.out.println(filepath);
                    if(!files.getParentFile().exists()){
                        files.getParentFile().mkdirs();
                    }
                    file.transferTo(files);
                    Map<String,Object> map2=new HashMap<>();
                    Map<String,Object> map=new HashMap<>();
                    map.put("code",0);
                    map.put("msg","");
                    map.put("data",map2);
                    map2.put("src","/images/"+ dateStr+"/"+uuid+"." + prefix);
                    return map;
                }
    
            }catch (Exception e){
            }finally{
                try {
                    if(out!=null){
                        out.close();
                    }
                    if(fileInput!=null){
                        fileInput.close();
                    }
                } catch (IOException e) {
                }
            }
            Map<String,Object> map=new HashMap<>();
            map.put("code",1);
            map.put("msg","");
            return map;
    
        }
    

    tips:
    1、后端代码就按照以前传统的图片上传代码来写就行,唯一区别的就是向前端传一个json串,json串里包括图片的url地址
    在这里插入图片描述

    这样,整个流程就完成了,其中最关键的就是后端代码了。
    流程:图片先自己上传到后端
    ——》后端存储图片,并把存储地址给前端
    ——》前端的js代码获取到后端传来的图片存储地址,把这个url赋值给表单中的隐藏的图片输入项
    ——》图片输入框中有了地址,并随着表单其他内容一起提交~

    效果展示:

    前端页面:
    在这里插入图片描述
    数据库:
    在这里插入图片描述

    详细见官方文档:https://www.layui.com/doc/modules/upload.html

    前面的demo内容预览

    预览

    登录界面

    在这里插入图片描述

    学生列表




    班级列表

    在这里插入图片描述



    添加学生

    在这里插入图片描述



    我的考试成绩




    各班级考试成绩

    在这里插入图片描述



    所有角色一览

    在这里插入图片描述


    各角色对应的权限

    在这里插入图片描述



    新建权限角色(可定制可观看的菜单和对应的操作按钮)




    授予某个用户权限




    展开全文
  • layui.user一个页面只能有一个,写多了会实现js效果 上传图片官方文档有很多功能,但是演示的代码只是一个一个功能演示,如果要综合起来js代码不是简单的拼凑,需要放在指定位置,比如下面的限制文件大小。 <...

    layui.user一个页面只能有一个,写多了会实现js效果

    上传图片官方文档有很多功能,但是演示的代码只是一个一个功能演示,如果要综合起来js代码不是简单的拼凑,需要放在指定位置,比如下面的限制文件大小。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>layui动画测试</title>
            <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
            <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
            <script src="https://www.layuicdn.com/layui/layui.js"></script>
    
    </head>
    <body>
        <div style="text-align: center">
            <img data-anim="layui-anim-scaleSpring" class="layui-upload layui-anim" id="id_upload_img"
                 src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564555274864&di=f0897dc4a00cccc5f71bdd0d46fe1720&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F21%2F20160821230024_MyCYK.thumb.700_0.jpeg" style="border-radius: 50%; width: 18%">
            <div class="layui-word-aux">点击更换我的头像</div>
            <div class="layui-word-aux">上传图片限制大小 60kb</div>
        </div>
    
    <script>
        layui.use(['upload'], function () {
                var layer = layui.layer;
                var $ = layui.jquery
                    , upload = layui.upload;
            //普通图片上传开始
                var uploadInst = upload.render({
                    elem: '#id_upload_img',
                    url: '/user/upload_img/',
                    size: 60, //限制文件大小,单位 KB
                    before: function (obj) {
                    //预读本地文件示例,不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#id_upload_img').attr('src', result); //图片链接(base64)
                    });
                    },
                    done: function (res) {
                        //如果上传失败
                        if (res.status > 0) {
                            return layer.msg('上传失败');
                        }
                        //上传成功
                        }
                        , error: function () {
                        //演示失败状态,并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                        });
                        }
                        });
            //普通图片上传结束
        })
    </script>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/suguangti/p/11275521.html

    展开全文
  • layui实现登录页面

    万次阅读 多人点赞 2019-09-29 17:37:50
    首先给看下效果吧! html、js <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <script src="./js/res_js/jquery-3.4.1.min.js"><...

    首先给看下效果图吧!

    在这里插入图片描述

    html、js

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <script src="./js/res_js/jquery-3.4.1.min.js"></script>
        <link rel="stylesheet" href="./js/layui/css/layui.css">
        <link rel="stylesheet" href="./css/adminLogin.css">
    </head>
    <body>
        <div class="wrap">
            <img src="images/back.jpg" class="imgStyle">
            <div class="loginForm">
                <form>
                    <div class="logoHead">
                        <!--<h2 style="margin-top: 15px">房产销售平台管理系统</h2>-->
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="usernameLabel">
                            <label>用户名:</label>
                        </div>
                        <div class="usernameDiv">
                            <i class="layui-icon layui-icon-username adminIcon"></i>
                            <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                        </div>
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="usernameLabel">
                            <label>密码:</label>
                        </div>
                        <div class="passwordDiv">
                            <i class="layui-icon layui-icon-password adminIcon"></i>
                            <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                        </div>
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="usernameLabel">
                            <label>验证码:</label>
                        </div>
                        <div class="cardDiv">
                            <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                        </div>
                        <div class="codeDiv">
                            <input id="loginCode" class="layui-input codeInput"  type="button">
                        </div>
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="submitLabel">
                            <label>没有账号?<a href="#" id="loginRegister">点击注册</a></label>
                        </div>
                        <div class="submitDiv">
                            <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <script src="./js/layui/layui.js" type="text/javascript"></script>
        <script>
            layui.use(['layer'],function () {
                var layer = layui.layer;
            })
            $(function () {
                // 页面初始化生成验证码
                window.onload = createCode('#loginCode');
                // 验证码切换
                $('#loginCode').click(function () {
                    createCode('#loginCode');
                });
                // 登陆事件
                $('#loginBtn').click(function () {
                    login();
                });
                // 注册事件
                $('#loginRegister').click(function () {
                    register();
                });
            });
            // 生成验证码
            function createCode(codeID) {
                var code = "";
                // 验证码长度
                var codeLength = 4;
                // 验证码dom元素
                var checkCode = $(codeID);
                // 验证码随机数
                var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
                    'S','T','U','V','W','X','Y','Z'];
                for (var i = 0;i < codeLength; i++){
                    // 随机数索引
                    var index = Math.floor(Math.random()*36);
                    code += random[index];
                }
                // 将生成的随机验证码赋值
                checkCode.val(code);
            }
            // 校验验证码、用户名、密码
            function validateCode(inputID,codeID) {
                var inputCode = $(inputID).val().toUpperCase();
                var cardCode = $(codeID).val();
                var loginUsername = $('#loginUsername').val();
                var loginPassword = $('#loginPassword').val();
                if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
                    layer.alert("用户名不能为空");
                    return false;
                }
                if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
                    layer.alert("密码不能为空");
                    return false;
                }
                if (inputCode.length<=0){
                    layer.alert("验证码不能为空");
                    return false;
                }
                if (inputCode != cardCode){
                    layer.alert("请输入正确验证码");
                    return false;
                }
                return true;
            }
            // 登录流程
            function login() {
                if (!validateCode('#loginCard','#loginCode')){
                    //阻断提示
                }else {
                    var loginUsername = $('#loginUsername').val();
                    var loginPassword = $('#loginPassword').val();
                    var params = {};
                    params.loginUsername = loginUsername;
                    params.loginPassword = loginPassword;
                    var loginLoadIndex = layer.load(2);
                    $('#loginBtn').val("正在登录...");
                    $.ajax({
                        type:'post',
                        url:window.location.protocol+'//'+window.location.host+'/security-web/login.do',
                        dataType:'html',
                        data:JSON.stringify(params),
                        contentType:'application/json',
                        success:function (data) {
                            layer.close(loginLoadIndex);
                            var jsonData = JSON.parse(data);
                            if (jsonData.code == '999'){
                                window.location.href = './static/templates/main.html';
                            }
                        },
                        error:function () {
                            layer.close(loginLoadIndex);
                            $('#loginBtn').val("登录");
                        }
                    });
                }
    
            }
            // 注册流程
            function register() {
                layer.open({
                    type:'1',
                    content:$('.registerPage'),
                    title:'注册',
                    area:['430px','400px'],
                    btn:['注册','重置','取消'],
                    closeBtn:'1',
                    btn1:function (index,layero) {
                        //注册回调
                        layer.close(index);
                        var registerUsername = $('#registerUsername').val();
                        var registerPassword = $('#registerPassword').val();
                        var registerWellPassword = $('#registerWellPassword').val();
                        var selectValue = $('#roleSelect option:selected').val();
                        var params = {};
                        params.registerUsername = registerUsername;
                        params.registerPassword = registerPassword;
                        params.registerWellPassword = registerWellPassword;
                        params.selectValue = selectValue;
                        var registerLoadIndex = layer.load(2);
                        $.ajax({
                            type:'post',
                            url:window.location.protocol+'//'+window.location.host+'/security-web/register.do',
                            dataType:'json',
                            data:JSON.stringify(params),
                            contentType:'application/json',
                            success:function (data) {
                                layer.close(registerLoadIndex);
                                layer.msg(data);
                            },
                            error:function () {
                                layer.close(registerLoadIndex);
                                layer.alert("请求超时!")
                            }
                        });
                    },
                    btn2:function (index,layero) {
                        //重置回调
                        var registerUsername = $('#registerUsername').val("");
                        var registerPassword = $('#registerPassword').val("");
                        var registerWellPassword = $('#registerWellPassword').val("");
                        // 防止注册页面关闭
                        return false;
                    },
                    btn3:function (index,layero) {
                        //取消回调
                    }
                })
            }
        </script>
    
    </body>
    <div class="registerPage">
        <div class="registerDiv">
            <form>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>用户名:</label>
                    </div>
                    <div class="usernameDiv">
                        <i class="layui-icon layui-icon-username adminIcon"></i>
                        <input id="registerUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>密码:</label>
                    </div>
                    <div class="passwordDiv">
                        <i class="layui-icon layui-icon-password adminIcon"></i>
                        <input id="registerPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>确认密码:</label>
                    </div>
                    <div class="passwordDiv">
                        <i class="layui-icon layui-icon-password adminIcon"></i>
                        <input id="registerWellPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>角色类型:</label>
                    </div>
                    <div class="passwordDiv">
                        <select id="roleSelect" class="layui-select">
                            <option value="">请选择...</option>
                            <option value="0">经纪人</option>
                            <option value="1">房东</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>
    </html>
    

    css

    /*登陆表单样式 start*/
    .wrap{
        width: 100%;
        height: 100%;
        background: url("../images/back.jpg") no-repeat;
        background-size: cover;
    }
    .loginForm{
        margin-left: 35%;
        margin-top: 10%;
        /*background-color: #cccccc;*/
        background-color: #e7e7e7;
        width: 400px;
        height: 400px;
        float: left;
        z-index: 9999;
        position: fixed;
        opacity: 0.75;
    }
    .usernameDiv{
        width: 300px;
        height: 40px;
        padding-left: 130px;
        padding-top: 30px;
    
    }
    .adminInput{
        width: 200px;
        height: 40px;
        font-size: 15px;
        border-radius: 0.5em;
        /*margin-left: auto;*/
        /*border: 1px solid #cccccc;*/
    }
    .passwordDiv{
        width: 300px;
        height: 40px;
        padding-left: 130px;
        padding-top: 28px;
    }
    .cardDiv{
        width: 120px;
        height: 40px;
        padding-top: 28px;
        padding-left: 14px;
        float: left;
    }
    .cardInput{
        width: 124px;
        height: 40px;
        font-size: 15px;
        border-radius: 0.5em 0em 0em 0.5em;
    }
    .codeDiv{
        width: 100px;
        height: 40px;
        padding-top: 28px;
        padding-right: 20px;
        float: left;
    }
    .codeInput{
        width: 80px;
        height: 40px;
        font-size: 15px;
        border-radius: 0em 0.5em 0.5em 0em;
        /*验证码样式*/
        font-family: Arial;
        font-style: italic;
        font-weight: bold;
        /*border: 0;*/
        letter-spacing: 2px;
        cursor: pointer;
    }
    i{
        position: absolute;
    }
    .adminIcon{
        font-size: 22px;
        margin-top: 8px;
        margin-left: 165px;
    }
    .logoHead{
        width: 250px;
        height: 60px;
        padding-left: 90px;
        padding-top: 25px;
    }
    .usernameLabel{
        width: 60px;
        height: 30px;
        font-size: 16px;
        float: left;
        margin-left: 55px;
        margin-top: 40px;
    }
    .submitLabel{
        width: 160px;
        height: 30px;
        font-size: 13px;
        float: left;
        margin-left: 55px;
        margin-top: 40px;
        cursor: pointer;
    }
    .usernameWrapDiv{
        width: 400px;
        height: 70px;
    }
    .submitDiv{
        width: 150px;
        height: 40px;
        padding-left: 10px;
        padding-top: 28px;
        float: left;
    }
    .submit{
        width: 100px;
        height: 40px;
        border-radius: 0.5em;
    }
    img{
        position: absolute;
    }
    .imgStyle{
        width: 100%;
        height: 100%;
    }
    /*登陆表单样式 end*/
    
    /*注册页面样式 start*/
    .registerPage{
        width: 100%;
        height: 100%;
        /*background-color: #cccccc;*/
        display: none;
        opacity: 0.75;
    }
    .registerDiv{
        width: 100%;
        height: 100%;
        z-index: 9999;
        opacity: 0.75;
    }
    /*注册页面样式 end*/
    
    展开全文
  • springBoot+layui实现进度条功能

    千次阅读 2019-09-20 14:13:38
    springBoot+layui实现进度条功能实现下载进度条后端实现js效果 实现下载进度条 项目中有一个多个图片打包成压缩包后下载的功能,之前只是 var msgId = layer.msg('正在导出,请稍候···', { icon: 16, shade: ...
  • 使用layui框架实现文件上传流程如下;选择图片,将图片传至后台保存到指定文件夹下。后台向前台返回图片在服务器下的路径地址。前台将获得的地址填入隐藏控件中随着表单一起提交到后台。这样以来,表单提交的就不再...
  • 后端:Layui实现文件上传功能

    千次阅读 2020-08-27 07:22:01
    今天给大家分享采用AspNet MVC+前端框架LayUi实现文件上传功能,感兴趣的朋友可以学习一下。文件上传实体(UploadFile.cs) public class Upload...
  • (一)页面展示 页面的效果如: 这里就不进行页面的功能演示,下面将详细的介绍下页面。...(三)功能实现流程 (四)项目创建 首先是项目的建立:使用的是IDEA创建的web项目,数据库利用的mysql数据库
  • 原理流程:全段建选择的用户序号用逗号‘,’拼接成字符串,传递到后端,后端在将该字符串切割,然后遍历删除。 前端页面(LayUI框架): <script type="text/html" id="toolbarDemo"> <div class="layui-...
  • SSM+layui实现数据增删改查以及漂亮的表格页面 连接:https://download.csdn.net/download/weixin_43926061/11863243 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习...
  • RabbitMq+WebSocket+Quartz+layui 实现网页端实时消息推送讲在前面我的思路码云Demo地址首先安装erlang安装RabbitMqdemo项目模拟发送消息RabbitMq配置WebSocket配置监听消息队列模拟发送消息消息发送逻辑详解定时...
  • 测试平台之接口自动化1 简介1.1 技术栈1.2 特点2 详述2.1 平台入口2.2 分级设计2.2.1 项目管理...前端:jQuery + layui 1.2 特点 极致简洁:页面简洁,交互方便,易于上手 数据管理:可视化数据管理,数据的添...
  • 本文主要是在基于ThinkPHP5+前端框架layui实现的EY内容管理系统中实现layui富文本编辑器layedit的插入图片接口。关于前端框架layui,不多介绍,可参考文章《你家隔壁程序猿推荐一款优秀的模块化UI框架-Layui》。使用...
  • 添加的话使用的是layui提供的弹框,这个工具很好用,有各种各样的弹框样式。添加提交的点击绑定事件时要注意不要多次绑定,提交按钮最好加上off绑定。 3.编辑和删除 都是使用的弹出层来实现。这两个在...
  • 有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学...
  • layui 动画 实现过程

    2019-07-31 11:50:00
    layui官方文档晦涩难懂,对小白特别不友好 为演示效果,js和css文件引用cdn 演示是ul套li标签进行演示,这不是固定的,你也可以div套div,div套span,外面和里面的标签类要一一对应就行 官方文档演示没有提js语句...
  • 使用layui提交表单避坑前言准备环境Layui介绍layui简介实现过程form表单页面form标签input标签单选框输入文本框确定按钮将form表单页面作为layer的弹出层显示页面导入响应的layui的js和css文件配置layui静态资源编辑...
  • 使用SpringSecurity实现权限管理1.pom.xml文件配置2.创建数据库3.启动类UserSalaryApplication4.编写实体类5.编写mapper service serviceImpl层5.1 SysUser对应的业务层如下5.2 sysRole对应的业务层5.3 SysUserRole...
  • 步入正题,本项目的两个难点在于: 1.freemarker的使用 2....在浏览器中输入访问路径 http://localhost:8710/MainTest.html 返回如下结果,说明ftl模板引入成功并且ftl语法没有问题 freemarker引入流程走通
  • 前端代码在layui的官方文档中有,而且既然准备上传图片了,前端应该是没有问题了 <!--layedit文本区域--> <label class="icon1 l_width">内&nbsp;容:</label> <div class="div2"> &...
  • 今天要写的是layui表单审核及...其余的就是layui实现功能了。 html 我的html 里面写的script 因为在js里写了自定义 <script type="text/html" id="statusTpl"> {{d.statusStr}} {{# if(d.status == '0') { }}
  • layui

    2020-06-06 08:59:52
    一、layui是什么? layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每...
  • layui 1、栅格,Tree,tabs 2、indexjsp代码 3、index.js 后端实现 项目结构 1、步骤分析 2、实现 总结: 一、概念 前端框架,帮助我们快速开发前端界面或者后端管理员界面!后端框架为我们解决了代码的...
  • layui的数据表格+springmvc实现数据显示,分页功能

    万次阅读 多人点赞 2018-05-19 18:31:15
    在做分享圈项目后台时,用的是layui提供...看官方文档api:数据表格 实现数据显示,分页功能。 1.前端页面: 要导入layuilayui.css和layui.js &lt;link rel="stylesheet" href="&l...
  • 使用layui实现对数据的增删改查 演示案例实现技术是:ssh框架+layui表格,即简单的对单表数据库做了个增删改查。 相信大家看过视频之后,已经知道大体的业务流程,我在这里在简单的说明一下。 1.默认进入首页...
  • layui使用第三方组件流程

    千次阅读 2019-01-16 10:43:37
    例如:treeTable 树形表格。 1.在layui官网中找到拓展组件并搜索组件名 2.下载组件 3.将下载的组件引入到项目文件中,在页面中引入相关.css和.js 4.可以看文档 ...
  • 1、前端,如: 2、添加按钮实现 <script type="text/html" id="headToolbarTpl"> <button class="layui-btn layui-btn-sm " lay-event="add">创建</button> </script> table.on('...
  • 使用layui扩展插件treeTable实现

    千次阅读 2018-11-30 15:18:16
    使用lauyi实现表格树 1.前端引用主要文件layui.js &lt;script type="text/javascript" src="js/laydate/layui/layui.js"&gt;&lt;/script&gt; 2.需要使用插件treetable.js ...
  • 2.3 实现流程说明 2.4 实现效果 3、总结 1、前言 最近个人在做开发的时候,需要实现前端的Html页面分页。由于好一段时间没写前端的代码了,有些生疏了。现就实践成果,做下记录与分享! 2、正文 2.1 开发...
  • 流程 文档 ...使用流程 下载资源文件复制进自己的...注意上传到服务器成功后返回的是一个图片地址 代码实现 html代码 <div class="layui-form-item"> <label class="layui-col-xs2 think-form-label">

空空如也

空空如也

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

layui实现图流程