免费正能量不良网站推荐,自建网站视频教程,眉山建设网站,网站建设维护人员岗位目录 1.什么是layui
2.layui、easyui与bootstrap的对比 有趣的对比方式#xff0c;嘿嘿嘿.... easyuijqueryhtml4#xff08;用来做后台的管理界面#xff09; 半老徐娘 bootstrapjqueryhtml5 美女 拜金 layui 清纯少女 2.1 layui和bootstrap对比#xff08;这两个都属…
目录 1.什么是layui
2.layui、easyui与bootstrap的对比 有趣的对比方式嘿嘿嘿.... easyuijqueryhtml4用来做后台的管理界面 半老徐娘 bootstrapjqueryhtml5 美女 拜金 layui 清纯少女 2.1 layui和bootstrap对比这两个都属于UI渲染框架 2.2 layui和easyui对比
3.layui入门 3.1 路径问题
4.如何扩展一个layui(自定义模块) 参考 模块规范 3设定扩展模块所在的目录然后就可以在别的JS文件中使用
5.构建登录页面 5.1 dao方法 5.2 Action 5.3 mvc搭建
6.主页搭建 1.什么是layui layui谐音类 UI) 是一套开源的 Web UI 解决方案采用自身经典的模块化规范并遵循原生 HTML/CSS/JS 的开发方式极易上手拿来即用。其风格简约轻盈而组件优雅丰盈从源代码到使用方法的每一处细节都经过精心雕琢非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架却并非逆道而行而是信奉返璞归真之道。准确地说它更多是面向后端开发者你无需涉足前端各种工具只需面对浏览器本身让一切你所需要的元素与交互从这里信手拈来。 官方网站https://www.layui.com/已下线 参考地址http://layui.org.cn/demo/index.html已下线非官网 由国人开发作者贤心16年出厂的框架其主要提供了很多好看、方便的样式并且基本拿来即用和Bootstrap有些相似但该框架有个极大的好处就是定义了很多前后端交互的样式接口如分页表格只需在前端配置好接口后端则按照定义好的接口规则返回数据即可完成页面的展示极大减少了后端人员的开发成本。
2.layui、easyui与bootstrap的对比 有趣的对比方式嘿嘿嘿.... easyuijqueryhtml4用来做后台的管理界面 半老徐娘 bootstrapjqueryhtml5 美女 拜金 layui 清纯少女 2.1 layui和bootstrap对比这两个都属于UI渲染框架 1.layui是国人开发的一套框架2016年出来的现在已更新到2.X版本了。比较新轻量级样式简单好看目前官网已下架开源了 2.bootstrap 相对来说是比较成熟的一个框架现在已经更新到4.X版本。是一个很成熟的框架这个大部分人一般都用过 1适用范围不一样 1.layui 其实更偏向与后端开发人员使用在服务端页面上有非常好的效果。 2.适合做后台框架 3.layui是提供给后端开发人员最好的ui框架基于DOM驱动在实现前端交互上比较麻烦页面的增删改查都需要查询DOM元素。所以在不需要交互的时候用layui还是不错的说这句话的人只能说明你对layui不了解 4.bootstrap 在前端响应式方面做得很好PC端和移动端表现都不错。 5.适合做网站 6.如果是类似官网且需要同时满足PC端和移动端效果bootstrap 表现很好但是如果是要交互的网站比如商城之类layui显然更好前后端分离 2大小不一样 1.layui 轻量级 2.bootsrap 因为成熟所以使用方便但是同时也是因为成熟就显得有些冗余 2.2 layui和easyui对比 1.easyui 是非开源的有需要解决的问题的话就只能等官方更新了 2.layui是开源的社区比较活跃解决问题还是比较快的 3.easyui诞生的早些所以功能相对完善一些很多功能都能是比较健全的 4.layui就相对来说少一些了不过功能都是像官网说的精雕细琢 5.layui更符合现在的审美
3.layui入门 将layui下载到了本地那么可将其完整地放置到你的项目目录或静态资源服务器并在页面中分别引入 !-- 引入 layui.css -- link relstylesheet hrefxxx/layui.css !-- 引入 layui.js -- script srcxxx/layui.js/script 3.1 路径问题 1 相对路径/绝对路径 2 base标签 入门案例点击弹出框
4.如何扩展一个layui(自定义模块) 参考 模块规范 1第一步:确认模块名假设为test.js文件放入项目任意目录下注意不用放入layui目录 2编写test.js layui.define(function(exports){ //提示模块也可以依赖其它模块如layui.define(layer, callback); var obj { hello: function(str){ alert(Hello (str||test)); } }; //输出test接口 exports(test, obj); }); 3设定扩展模块所在的目录然后就可以在别的JS文件中使用 layui.config({ base: /res/js/ //假设这是test.js所在的目录 }).extend({ //设定模块别名 test: test //如果test.js是在根目录也可以不用设定别名 }); //使用test layui.use(test, function(){ var test layui.test; test.hello(World!); //弹出Hello World! }); 案例 1弹出hello方法 2日期格式转换
5.构建登录页面
% page languagejava contentTypetext/html; charsetUTF-8pageEncodingUTF-8%
% include filecommon/header.jsp %
!DOCTYPE html
html
head
meta http-equivContent-Type contenttext/html; charsetUTF-8
titleInsert title here/title
link relstylesheet revstylesheet href${pageContext.request.contextPath}/static/css/iconfont.css typetext/css mediaall
link relstylesheet revstylesheet href${pageContext.request.contextPath}/static/css/login.css typetext/css mediaall
style body{color:#;}a{color:#;}a:hover{color:#;}.bg-black{background-color:#;}.tx-login-bg{background:url(static/images/bg.jpg) no-repeat 0 0;}/style
/headbody classtx-login-bgdiv classtx-login-boxdiv classlogin-avatar bg-blacki classiconfont icon-wode/i/divul classtx-form-li rowli classcol-24 col-m-24pinput typetext idusername placeholder登录账号 classtx-input/p/lili classcol-24 col-m-24pinput typepassword idpassword placeholder登录密码 classtx-input/p/lili classcol-24 col-m-24p classtx-input-fullbutton idlogin classtx-btn tx-btn-big bg-black登录/button/p/lili classcol-12 col-m-12pa href# classf-12 f-gray新用户注册/a/p/lili classcol-12 col-m-12p classta-ra href# classf-12 f-gray忘记密码/a/p/li/ul/divscript
layui.use([layer, jquery], function(){var layer layui.layer,form layui.form,$layui.jquery;$(#login).click(function(){$.ajax({url:${pageContext.request.contextPath}/user.action?methodNamelogin,dataType:json,data:{loginName:$(#username).val(),pwd:$(#password).val()},method:post,success:function(data){if(data){layer.alert(恭喜data.name登录成功, {icon: 1});}else{layer.msg(登录失败, {icon: 5});}}});});});
/script /body
/html 5.1 dao方法
package com.zking.dao;import java.util.List;import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;public class UserDao extends BaseDaoUser {public ListUser list(User user, PageBean pageBean) throws Exception {String sqlselect *from t_oa_user where 1 1;return super.executeQuery(sql, User.class, pageBean);}public User login(User user) throws Exception {String sqlselect *from t_oa_user where loginName user.getLoginName() and pwd user.getPwd() ;ListUser lst super.executeQuery(sql, User.class, null);if(lst ! null lst.size() 1) {return lst.get(0);}return null;}
}5.2 Action
package com.zking.web;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;public class UserAction extends ActionSupport implements ModelDriverUser {private User user new User();private UserDao usedDao new UserDao();public void login(HttpServletRequest req, HttpServletResponse resp) {try {User u usedDao.login(user);ResponseUtil.writeJson(resp, u);} catch (Exception e) {e.printStackTrace();}}Overridepublic User getModel() {return user;}}5.3 mvc搭建
?xml version1.0 encodingUTF-8?
configaction path/blog typecom.zking.web.BlogActionforward namelist path/blogList.jsp redirectfalse /forward nametoList path/blog.action?methodNamelistredirecttrue /forward nametoEdit path/blogEdit.jsp redirectfalse //actionaction path/user typecom.zking.web.UserAction/action!-- action path/meetingInfo typecom.zking.web.MeetingInfoAction --
!-- forward namelist path/meetingInfoList.jsp redirectfalse / --
!-- forward nametoList path/meetingInfo.action?methodNamelist --
!-- redirecttrue / --
!-- forward nametoEdit path/meetingInfoEdit.jsp redirectfalse / --
!-- /action --!-- action path/solrBlog typecom.test.web.SolrBlogAction --
!-- forward namelist path/solrBlogList.jsp redirectfalse / --
!-- forward nametoList path/solrBlog.action?methodNamelist --
!-- redirecttrue / --
!-- forward nametoEdit path/solrBlogEdit.jsp redirectfalse / --
!-- /action --action path/studentBlog typecom.test.web.StudentBlogActionforward namelist path/studentBlogList.jsp redirectfalse /forward nametoList path/studentBlog.action?methodNamelist redirecttrue /forward nametoEdit path/studentBlogEdit.jsp redirectfalse //actionaction path/solrBlog typecom.xiaoli.web.SolrBlogActionforward namelist path/solrBlogList.jsp redirectfalse /forward nametoList path/solrBlog.action?methodNamelist redirecttrue /forward nametoEdit path/solrBlogEdit.jsp redirectfalse //action/config 6.主页搭建 参考地址http://layui.org.cn/demo/admin.html
