整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
2年前做了一个基于element-ui的layout组件发布到npm package上去，广受大家的欢迎，下载量每周颇升。这个组件的好处在于开发者不用写太多html代码和逻辑，只要通过配置json的方式就能马上生成后台，包括菜单栏和导航面包屑等一键生成，还能根据不同的需求做定制化后台界面，就像拼积木一样，让用户只专注于内容核心代码的开发。现在还没做大范围的推广，如果我觉得它做得足够好，我一定会放到npm上推荐给各位读者使用哈。当初为了解答网友的疑问，我还专门建立了该组件的官网。logo看起来有没有很熟悉？哈哈哈，它其实就是element-ui的logo进行改造的，意义就是告诉使用者，这是element-ui功能的组合加强版。
为了迎合公司的OKR，我提出了对表单表格组件的封装。为什么我会有这个想法？其实这个组件我很早就想做了，只是以前做的是基于UI层面的，近期我接手了公司的一个项目叫童画，每天做的事情感觉就是复制粘贴，修改部分不同的功能和字段名称。组件的意义在于可以在遇到同一类设计场景时，可以复用，从而减少设计的时间和形成产品的统一性。传统的搜索表单不就是这样吗？上面是表单搜索字段，中间是搜索结果的表格，下面是搜索结果的分页。把表单和表格组合起来的好处在于很多搜索字段都是基于表格组件的某些字段，那我根据search字段进行筛选不就可以了么，很久之前，我们总是在吐槽产品经理总是喜欢截图现有功能，然后做字段修改，搞成原型扔给前端。如果前端也能像他这样简单，那该多好呀，类似这样的想法油然而生。刚开始我只是为了方便我的工作，没想到领导却重视了起来，想把这个组件推广给公司其他十几个前端同事使用，于是乎，我便认真开搞了起来。有理论还不行，得有场景实践，刚好公司的项目童画有很多场景，我根据它里面的场景，做了很多功能的封装和兼容。
写到这里，有人会说了，这不就是CRUD组件吗？有这想法的话，说明你还太年轻和小看这个组件的功能了。传统的CRUD组件灵活性不是很高，这个组件的好处是配置即可用，不用考虑其他搜索，翻页，清空等各种逻辑，让组件达到高度复用，封装了场景的插槽类型，但为了防止翻车，我还是预留了变态需求的插槽。字段的使用更多采用elementUI的命名方式，让使用者减少学习成本。这样做的好处是什么呢？首先，前端再也不用写页面了，其次，对于比较规矩的搜索表单页面，完全可以通过请求接口的形式交给后端来配置呈现页面即可，根本没有前端什么事了，前端的工作可以解放出来做更复杂的功能开发。
为了使用方便，我把它做成了组件并放到了公司的私服上，接下来的工作就是写文档啦，以下是部分文档的编写，因为时间问题，没来得及好好检查，各位看官将就看一下就行啦。
export default {
options: {
request: {
api: '/student/web/student/enroll/list',
method: 'GET',
paramMap: {
index: 'pageIndex',
limit: 'pageSize'
},
resultMapping: {
total: 'total',
data: 'pageData'
}
},
size: '', // medium/mini/small, 默认medium
labelWidth: 90,
submitBtn: true, // 搜索按钮，默认true，非必填
submitText: '查询', // 搜索按钮的文字，默认查询，非必填
clearBtn: true, // 清除按钮，默认true
clearSize: 'mini', // medium/mini/small, 默认medium
clearText: '清除', // 清除按钮的文字，默认清除，非必填
column: [
{
slotType: 'selection'
},
{
prop: 'keyword',
label: '学员/家长',
search: true,
hide: true
},
{
prop: 'studentName',
label: '学员'
},
{
prop: 'telephone',
label: '家长手机号',
width: 130
},
{
prop: 'type',
label: '报名类型',
width: 90,
search: true,
type: 'select',
slot: true,
slotType: 'text',
slotArray: [{
label: '新报',
value: 1
},
{
label: '续报',
value: 2
}],
dicData: [{
label: '新报',
value: 1
},
{
label: '续报',
value: 2
}]
},
{
prop: 'courseFee',
label: '缴费金额',
slot: true,
slotType: 'regEx',
regEx: '¥{{courseFee/100}}'
},
{
prop: 'payType',
label: '支付方式',
search: true,
type: 'select',
width: 100,
dicData: [
{
label: '微信',
value: '微信'
},
{
label: '支付宝',
value: '支付宝'
},
{
label: '银行卡转账',
value: '银行卡转账'
},
{
label: '其它',
value: '其它'
}
]
},
{
prop: 'courseCount',
label: '报名课时'
},
{
prop: 'followTeacher',
label: '跟进人'
},
{
prop: 'createTime',
label: '报名时间',
param: 'beginTime,endTime',
format: 'yyyy 年 MM 月 dd 日',
valueFormat: 'timestamp',
search: true,
width: 160,
type: 'daterange'
},
{
prop: 'auditor',
label: '报名老师',
search: true,
param: 'teacherId', // 修正请求参数名
type: 'select',
dicData: [],
dicUrl: '/org/web/org/user/list/teacher',
dicMap: {
label: 'userName',
value: 'id'
}
},
{
prop: 'status',
label: '报名状态',
slot: true,
slotType: 'tag',
width: 110,
slotArray: [{
type: 'warning',
label: '待审核',
value: 1
},
{
type: 'danger',
label: '审核不通过',
value: 3
},
{
type: 'success',
label: '审核通过',
value: 2
}],
dicUrl: ''
},
{
prop: 'operation',
label: '操作',
width: 80,
slot: true,
slotType: 'operation',
slotArray: [
{
label: '去审核',
value: 'handle',
filter: ({status}) => {
return status === 1
}
}
]
}
]
}
}生成的页面
最后，感谢同事世丞在字段命名上给了很多建议，同时也感谢领导给了很多刁难的意见，让这个组件的功能越发强大，也让开发者使用更方便，达到配置即可使用的地步。当然了，组件还需要更多场景的训练才能真正实现各种功能的兼容。后期我希望可以尽快放到layout官网上，供大家使用。
一个会美工与后端PHP/nodejs的全栈工程师
更多学习内容欢迎关注
微信公众号 ：程序员周先生
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
1、tml的固定结构
一个HTML文件是有自己固定的结构的。
<html>
<head>...</head>
<body>...</body>
</html>代码讲解：
<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head>标签用于定义文档的头部，它是所有头部元素的容器。
头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
2、<head>标签的作用
文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
3、<title>标签
在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用。网页制作学习交流群，四九四零六，四九三四。
于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独
一无二的title。例如：
<head>
<title>hello world</title>
</head>
<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来，
4、标签的用途
我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上
的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。
文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使
用 em 标签表示强调等等。讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？
① 更容易被搜索引擎收录。
②.更容易让屏幕阅读器读出网页内容。
、认识WEB
网页主要是由文字、图像和超链接等元素构成，除了这些基本的元素以外，还包含一些多媒体元素等，比如音频、视频等。
比如我们常见的有小米商城、京东商城、以及淘宝等，都属于我们的大型的购物平台网站，而这些网站都包含了网页中基本的元素。那么网页是怎么形成的呢？
其实网页的形参很简单，当我们前端小姐姐将页面通过代码构建好以后，再通过浏览器（IE、谷歌等浏览器）将其渲染成为用户眼中所能看得到的各种样式的页面。
既然我们的网页是通过浏览器的渲染而显示不同的页面，那么常见的浏览器有哪一些呢？如常见的五大浏览器，分别是IE、火狐、谷歌、Safari以及Opera等。
五大浏览器
但是在开发过程中，谷歌和火狐用得比较多，可以更好地帮助开发人员进行调试。IE浏览器相对来说存在兼容性问题，所以很少去使用。
为什么网页代码通过浏览器的渲染就能显示出各种不同的样式的页面呢？此处就不得不提到浏览器的内核，通常浏览器的内核分为如下几种：
而五大浏览器之间的内核都是什么呢？如下图所示：
五大浏览器的内核
二、Web标准
什么是Web标准？Web标准是由W3C组织和其它标准化组织，制定的一系列标准的集合。
W3C万维网联盟是国际最著名的标准化组织。他是1994年成立后，至今已发布了近百项相关万维网的标准。
w3c组织
那为什么要制定Web标准呢？
作用：由于市场上诞生了许多不同类型的浏览器，而这些浏览器都存在不同的内核，导致前端小姐姐开发的页面在不同的浏览器上显示会存在不同的差异，这样就会给前端开发者带来了许多麻烦。而通过Web标准就会降低这种页面之间的差异化，让浏览器在解析前端代码的时候，转向W3C的标准，呈现出统一的效果。
优点：
那么一个漂亮的页面是怎样构成的呢？它的构成分别是如下几种类型：
漂亮页面的构成
好啦！[微笑]本节就分享到这儿哦！对前端感兴趣的小伙伴，可以关注我的，我会继续给大家分享前端以及其它开发内容的知识，也欢迎大家给我在评论区留言[作揖]。
*请认真填写需求信息，我们会在24小时内与您取得联系。
