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