整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
2年前做了一個基于element-ui的layout組件發(fā)布到npm package上去，廣受大家的歡迎，下載量每周頗升。這個組件的好處在于開發(fā)者不用寫太多html代碼和邏輯，只要通過配置json的方式就能馬上生成后臺，包括菜單欄和導航面包屑等一鍵生成，還能根據(jù)不同的需求做定制化后臺界面，就像拼積木一樣，讓用戶只專注于內容核心代碼的開發(fā)。現(xiàn)在還沒做大范圍的推廣，如果我覺得它做得足夠好，我一定會放到npm上推薦給各位讀者使用哈。當初為了解答網(wǎng)友的疑問，我還專門建立了該組件的官網(wǎng)。logo看起來有沒有很熟悉？哈哈哈，它其實就是element-ui的logo進行改造的，意義就是告訴使用者，這是element-ui功能的組合加強版。
為了迎合公司的OKR，我提出了對表單表格組件的封裝。為什么我會有這個想法？其實這個組件我很早就想做了，只是以前做的是基于UI層面的，近期我接手了公司的一個項目叫童畫，每天做的事情感覺就是復制粘貼，修改部分不同的功能和字段名稱。組件的意義在于可以在遇到同一類設計場景時，可以復用，從而減少設計的時間和形成產(chǎn)品的統(tǒng)一性。傳統(tǒng)的搜索表單不就是這樣嗎？上面是表單搜索字段，中間是搜索結果的表格，下面是搜索結果的分頁。把表單和表格組合起來的好處在于很多搜索字段都是基于表格組件的某些字段，那我根據(jù)search字段進行篩選不就可以了么，很久之前，我們總是在吐槽產(chǎn)品經(jīng)理總是喜歡截圖現(xiàn)有功能，然后做字段修改，搞成原型扔給前端。如果前端也能像他這樣簡單，那該多好呀，類似這樣的想法油然而生。剛開始我只是為了方便我的工作，沒想到領導卻重視了起來，想把這個組件推廣給公司其他十幾個前端同事使用，于是乎，我便認真開搞了起來。有理論還不行，得有場景實踐，剛好公司的項目童畫有很多場景，我根據(jù)它里面的場景，做了很多功能的封裝和兼容。
寫到這里，有人會說了，這不就是CRUD組件嗎？有這想法的話，說明你還太年輕和小看這個組件的功能了。傳統(tǒng)的CRUD組件靈活性不是很高，這個組件的好處是配置即可用，不用考慮其他搜索，翻頁，清空等各種邏輯，讓組件達到高度復用，封裝了場景的插槽類型，但為了防止翻車，我還是預留了變態(tài)需求的插槽。字段的使用更多采用elementUI的命名方式，讓使用者減少學習成本。這樣做的好處是什么呢？首先，前端再也不用寫頁面了，其次，對于比較規(guī)矩的搜索表單頁面，完全可以通過請求接口的形式交給后端來配置呈現(xiàn)頁面即可，根本沒有前端什么事了，前端的工作可以解放出來做更復雜的功能開發(fā)。
為了使用方便，我把它做成了組件并放到了公司的私服上，接下來的工作就是寫文檔啦，以下是部分文檔的編寫，因為時間問題，沒來得及好好檢查，各位看官將就看一下就行啦。
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: '續(xù)報',
value: 2
}],
dicData: [{
label: '新報',
value: 1
},
{
label: '續(xù)報',
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', // 修正請求參數(shù)名
type: 'select',
dicData: [],
dicUrl: '/org/web/org/user/list/teacher',
dicMap: {
label: 'userName',
value: 'id'
}
},
{
prop: 'status',
label: '報名狀態(tài)',
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
}
}
]
}
]
}
}生成的頁面
最后，感謝同事世丞在字段命名上給了很多建議，同時也感謝領導給了很多刁難的意見，讓這個組件的功能越發(fā)強大，也讓開發(fā)者使用更方便，達到配置即可使用的地步。當然了，組件還需要更多場景的訓練才能真正實現(xiàn)各種功能的兼容。后期我希望可以盡快放到layout官網(wǎng)上，供大家使用。
一個會美工與后端PHP/nodejs的全棧工程師
更多學習內容歡迎關注
微信公眾號 ：程序員周先生
CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現(xiàn)。
JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現(xiàn)的。
1、tml的固定結構
一個HTML文件是有自己固定的結構的。
<html>
<head>...</head>
<body>...</body>
</html>代碼講解：
<html></html>稱為根標簽，所有的網(wǎng)頁標簽都在<html></html>中。
<head>標簽用于定義文檔的頭部，它是所有頭部元素的容器。
頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標簽，頭部標簽在下一小節(jié)中會有詳細介紹。
在<body>和</body>標簽之間的內容是網(wǎng)頁的主要內容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
2、<head>標簽的作用
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內容顯示給讀者。
下面這些標簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
3、<title>標簽
在<title>和</title>標簽之間的文字內容是網(wǎng)頁的標題信息，它會出現(xiàn)在瀏覽器的標題欄中。網(wǎng)頁的title標簽用。網(wǎng)頁制作學習交流群，四九四零六，四九三四。
于告訴用戶和搜索引擎這個網(wǎng)頁的主要內容是什么，搜索引擎可以通過網(wǎng)頁標題，迅速的判斷出網(wǎng)頁的主題。每個網(wǎng)頁的內容都是不同的，每個網(wǎng)頁都應該有一個獨
一無二的title。例如：
<head>
<title>hello world</title>
</head>
<title>標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來，
4、標簽的用途
我們學習網(wǎng)頁制作時，常常會聽到一個詞，語義化。那么什么叫做語義化呢，說的通俗點就是：明白每個標簽的用途（在什么情況下使用此標簽合理）比如，網(wǎng)頁上
的文章的標題就可以用標題標簽，網(wǎng)頁上的各個欄目的欄目名稱也可以使用標題標簽。
文章中內容的段落就得放在段落標簽中，在文章中有想強調的文本，就可以使
用 em 標簽表示強調等等。講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢？
① 更容易被搜索引擎收錄。
②.更容易讓屏幕閱讀器讀出網(wǎng)頁內容。
、認識WEB
網(wǎng)頁主要是由文字、圖像和超鏈接等元素構成，除了這些基本的元素以外，還包含一些多媒體元素等，比如音頻、視頻等。
比如我們常見的有小米商城、京東商城、以及淘寶等，都屬于我們的大型的購物平臺網(wǎng)站，而這些網(wǎng)站都包含了網(wǎng)頁中基本的元素。那么網(wǎng)頁是怎么形成的呢？
其實網(wǎng)頁的形參很簡單，當我們前端小姐姐將頁面通過代碼構建好以后，再通過瀏覽器（IE、谷歌等瀏覽器）將其渲染成為用戶眼中所能看得到的各種樣式的頁面。
既然我們的網(wǎng)頁是通過瀏覽器的渲染而顯示不同的頁面，那么常見的瀏覽器有哪一些呢？如常見的五大瀏覽器，分別是IE、火狐、谷歌、Safari以及Opera等。
五大瀏覽器
但是在開發(fā)過程中，谷歌和火狐用得比較多，可以更好地幫助開發(fā)人員進行調試。IE瀏覽器相對來說存在兼容性問題，所以很少去使用。
為什么網(wǎng)頁代碼通過瀏覽器的渲染就能顯示出各種不同的樣式的頁面呢？此處就不得不提到瀏覽器的內核，通常瀏覽器的內核分為如下幾種：
而五大瀏覽器之間的內核都是什么呢？如下圖所示：
五大瀏覽器的內核
二、Web標準
什么是Web標準？Web標準是由W3C組織和其它標準化組織，制定的一系列標準的集合。
W3C萬維網(wǎng)聯(lián)盟是國際最著名的標準化組織。他是1994年成立后，至今已發(fā)布了近百項相關萬維網(wǎng)的標準。
w3c組織
那為什么要制定Web標準呢？
作用：由于市場上誕生了許多不同類型的瀏覽器，而這些瀏覽器都存在不同的內核，導致前端小姐姐開發(fā)的頁面在不同的瀏覽器上顯示會存在不同的差異，這樣就會給前端開發(fā)者帶來了許多麻煩。而通過Web標準就會降低這種頁面之間的差異化，讓瀏覽器在解析前端代碼的時候，轉向W3C的標準，呈現(xiàn)出統(tǒng)一的效果。
優(yōu)點：
那么一個漂亮的頁面是怎樣構成的呢？它的構成分別是如下幾種類型：
漂亮頁面的構成
好啦！[微笑]本節(jié)就分享到這兒哦！對前端感興趣的小伙伴，可以關注我的，我會繼續(xù)給大家分享前端以及其它開發(fā)內容的知識，也歡迎大家給我在評論區(qū)留言[作揖]。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
