EchoCow

念念不忘,必有回响

念念不忘,必有回响
  menu
93 文章
67 评论
57497 浏览
1 当前访客
ღゝ◡╹)ノ❤️

saplat 前端开发文档 —— layui 有更新!

前段时间一直是由我们后端来做的前端,现在有了专门负责前端的同学,我们打算完全交手前端,但是由于前端的同学没有写过此前端,所以我今天特地为大家写了此份开发文档作为参考。我们所选用的前端框架为 ** 经典模块化前端UI框架 layui。**

本文带有附件链接

模板框架 2018-7-28(重要!!!)

在前端开发的过程中,我发现大多数发来的都是引入的js或者css的位置或者方式不对,是在让人头疼,每次拿来都要自己手动修改一次结构,所以我特地做了一个前端的模板框架,已经引入 layui 所需的 css 和 js,这样就既可以脱离项目写页面,拿过来我们后端也可以知道并且很方便的处理。

最为重要的是 base.html 只是核心,任何内容都只能写在我用注释包裹的里面,static 文件夹提供了静态文件,json提供了数据模拟。

CSS 只能写在 之间 style 标签里面

HTML 只能写在 之间

js 只能写在 之间

务必如此!!!

起步

你需要用 layui 官网下载最新版本的 layui 框架,你可以选择多种方式获取,例如利用自动化构建工具,或者你只需要压缩版的。当然,我这里也为你准备好了截止 2018-7-9 的最新版本的。

左侧为开箱即用的,右侧为自动化构建工具构建的,可以自定义但要自己构建。目前使用左侧的即可。

了解 layui

在使用一个框架之前,你必须先去了解此框架的核心思想。layui 的核心思想就是** 模块化** ,他不遵循 AMD 规范,自己定义了一套模块规范,具体请去 http://www.layui.com/doc/base/modules.html 了解。**简单的来说,他按照模块功能对其进行了划分,分成了多个模块组成了 layui ,你需要什么模块,你就去加载什么模块,加载完毕以后你才能去使用。**所以在使用任何模块之前你都需要去加载。

内置 jquery

layui 内置了 jquery 模块,作为前端使用最广泛的一个框架之一,我们建议的是尽量摒弃原生 js,而去使用 jquery,并不是说原生 js 不好,相反原生 js 有时候或许在效率上更高一筹,但是在我们后端进行整合前端页面框架模板的时候获取会遇到许多不必要的麻烦,因为相较于大家而言,jquery 的学习成本是极低的,它本身就是为了方便更多的操作而对 js 的封装,所以请尽量使用 jquery。并且他为我们提供了许多可用的过渡或者动画效果,可以减去很多原生 js 的负担。

jquery 在线 api :http://jquery.cuishifeng.cn/

如何使用内部jQuery

由于Layui部分内置模块依赖jQuery,所以我们将jQuery1.11最稳定的一个版本作为一个内置的DOM模块(唯一的一个第三方模块)。只有你所使用的模块有依赖到它,它才会加载,并且如果你的页面已经script引入了jquery,它并不会重复加载。内置的jquery模块去除了全局的$和jQuery,是一个符合layui规范的标准模块。所以你必须通过以下方式得到:

//主动加载jquery模块
layui.use(['jquery', 'layer'], function(){ 
  var $ = layui.$ //重点处
  ,layer = layui.layer;
  
  //后面就跟你平时使用jQuery一样
  $('body').append('hello jquery');
});
 
//如果内置的模块本身是依赖jquery,你无需去use jquery,所以上面的写法其实可以是:
layui.use('layer', function(){ 
  var $ = layui.$ //由于layer弹层依赖jQuery,所以可以直接得到
  ,layer = layui.layer;
 
  //……
});
      

**表单页面请尽量加载 jquery 模块!我们后端进行数据传输需要使用到 jquery 的 ajas 提交方式!
**

layui 已有模块

定义 功能名称
laydate = layui.laydate 日期
laypage = layui.laypage 分页
layer = layui.layer 弹层
table = layui.table 表格
carousel = layui.carousel 轮播
upload = layui.upload 上传
element = layui.element 元素操作
$ = layui.$ jQuery
flow = layui.flow 流加载
code = layui.code 代码修饰器
edit = layui.layedit 富文本编辑器
laytpl = layui.laytpl 模板引擎(项目使用的是其他模板引擎)
mobile = layui.mobile 移动模块入口 , 构建后则为移动模块集合
rate = layui.rate 评分评星
tree = layui.tree 树组件

还有移动端的模块,我不一一列出,具体去看看源码即可。

layui 引入

前面简单的了解 layui,我们如何引入?如果你下载的是我为你提供的源码,可用的 js 和 css 如下(你只需要使用 link 标签和 script 标签引入外部文件即可,同时建议js引入以及使用置于页面底部,这样也许可以避免许多不必要的麻烦):

左侧开箱即用(推荐):

核心css:layui/css/layui.css

<link rel="stylesheet" href="css/layui.css">

基础js:layui/layui.js

所有模块的js:layui/layui.all,js

<script src="layui,all.js"></script>

右侧编译版本:

可以使用src文件夹下的

可以使用dist文件夹下的

如果你重新编译,你应该使用release\zip文件夹下的。

如何学习使用 layui

实例驱动学习是在我看来是最有效的前端方式,所以我个人推荐的方式即是通过可以看见的去学习,那么你需要下载我提供的右侧编译版本的源码。然后进入 example 文件夹下。你应该会看到如下文件

这些都是使用 layui 活生生的例子,他们相较于官网实例 http://www.layui.com/demo/ 较为更全,而且你可以将他们放到开发工具中进行查看和开发(你需要吧整个 layui-src 一起导入)。请注意,其中的 json 文件夹是极为重要的,请不要擅自修改数据,他的作用是提供数据模拟,模拟后端的数据传输,所以如果你修改了json文件夹,那么结果可能是无法运行。

前端编码

其实在我是希望使用前端构造工具的,例如依赖管理工具 bower,自动化构建工具 gulp,但是都需要相应的学习成本,所以在第一期项目里面暂时不去实施,希望以后能够使用到,相较于直接写js和css,工具的可靠性强很多。还有例如 less 或者 sass 的 css 处理语言,这些都希望在后期能加上去,但是在现阶段要求急速开发,你需要做的就是用到什么学什么,也就是暂时不去管这些了,不过必要的基础知识(h5+css+js+jq)你需要拥有的,这也是一个前端开发者的基础。

在初步使用的时候,我希望大家能够有一套前端开发规范,就像我们后端遵循阿里巴巴java编程规范一样,这里我推荐的是 https://www.w3cschool.cn/webdevelopment/ 。如果你们觉得此规范可行,那么请务必按照此规范书写,特别是命名方式(class 和 id),我个人建议是以项目名+模块名或者项目名+功能名,就像 layui 一样,class 都是 layui 开头的,例如 layui 提供的可以让元素隐藏的 class 是 layui-hiden ,让元素不能被选中的是 layui-disabled,所以可以参考他的 class 的命名方式来命名我们的 class。

可参考:
- https://www.25xt.com/html5css3/14663.html
- https://www.jianshu.com/p/6cd958f09f26

js 使用

就像前面所说,layui 是模块化框架,你需要使用什么模块就去加载什么模块,那么如何加载模块呢?你可以通过他的 use 方法进行加载模块(如果你只使用 css,并不需要使用 js,是不需要进行加载模块的):

<script src="layui.js"></script> //引入必要的 js,使用相对路径
<script>
layui.use('layer', function(){  // 加载 弹层 模块
  var layer = layui.layer;
});
</script>

这样就加载了一个模块,如果是多个呢?很简单,使用数组方式即可:

<script src="layui.js"></script> //引入必要的 js,使用相对路径
<script>
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){  
// 加载多个模块
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element; //元素操作
});
</script>

这样引入了多个模块,每个模块拥有它自己的方法,你可以查看 http://www.layui.com/doc/

css 使用

在 layui 中,为你准备了很多 css 的样式,你可以直接去使用,只需要引入他的 css 文件即可。如何使用?你只需要在 class 中加入相应的 class 即可。

所有可用的基础类请参见 http://www.layui.com/doc/base/element.html,请不要重复书写功能相同的css,**另外我们后端不希望每得到一个页面就伴随着无数的 css 样式文件,**我们更加希望使用通用的 CSS(layui 提供的) ,我们不用频繁引入,因为我们也需要在前端页面写业务逻辑,而且我们使用模板引擎已经将 head 标签内的东西生成好了,如果需要每个页面自定义属于他的 css ,那么我们需要改动模板引擎,而改动一处会影响到无数页面,所以,请尽量使用通用 css。当然,如果是单页面(非后台管理嵌入页面,例如登录、注册等),可以自定义引入其他 css 的。但是内嵌页面,尽量不要使用单独定义的 css。

另外给出一个官方的后台模板演示(收费):http://www.layui.com/admin

常见问题

跨域问题

由于浏览器存在同源策略,所以如果layui(里面含图标字体文件)所在的地址与你当前的页面地址不在同一个域下,即会出现图标跨域问题。所以要么你就把Layui与网站放在同一服务器,要么就对Layui所在的资源服务器的Response Headers加上属性:Access-Control-Allow-Origin: *。

自适应问题

我们目前的模板应该能够在电脑端以及手机端正常使用,而不应该太过局限,但是这个问题如何解决?其实很简单,我们只需要为他添加响应式布局即可。你只要使用 layui 提供的栅格布局就可以基本解决此问题,他基本沿用 bootstrap 的移动端优先思想,定义的响应式规则也是基本一致,详情请参见 http://www.layui.com/doc/element/layout.html

其他

表单格式

我们后端常见的一个要求就是按照数据库的表格,设计表单填写页面,这里需要遵循以下h5规范以及命名方式

  1. 每个 input 对应一个 label 标签
  2. input 标签必须有 name 和 id 属性,必须与数据库一致(表名 + . + 字段名),表名带有下划线的请转化为 驼峰式命名,如 e_abc 转化为 eAbc,
  3. label 标签必须有 for 属性,其值等于 input 的 id 属性。
  4. 结合 h5 新增的 input 特性,例如 type 属性 type=“tel” 、type = “date” ,长度属性 max="" ,min = "" 。。。进行验证

表单验证

可以使用 layui 的自定义验证:http://www.layui.com/doc/modules/form.html#verify,但是如果有非空验证,请加上 require 属性,如果只能输入数字,input 的 type 应该为 number,如果长度限制,input 应该有 maxlength 属性等。当因为某些原因 layui 加载失败的时候,可以使用 h5 的方法进行替换,防止被跳过前端验证。

结束语

上面所说的部分来自于自己的个人见解和经验,仅作为参考,大家可以一起交流,有不对请指出。我们后端在项目开发过程中也会时不时的去写前端的,页面上的交互还需要大家一起多多讨论。

念念不忘,必有回响。

如果觉得文章不错或者帮到了您,帮忙点点下面广告呗~谢谢啦~

评论