接觸前端將近一年了...?從最開(kāi)始的html ,css,js,框架,插件..一點(diǎn)點(diǎn)的摸索..磕磕盼盼到現(xiàn)在

2018年下半年開(kāi)始開(kāi)始接手項(xiàng)目?到年前完成五個(gè)小項(xiàng)目?加一些零散的頁(yè)面，因?yàn)楣窘拥亩际菍W(xué)校的項(xiàng)目還需要兼容ie?經(jīng)常會(huì)被一些兼容弄的頭疼..?統(tǒng)計(jì)一下遇到的難點(diǎn)（hh..總感覺(jué)遇到的第一次使用的都難）

1.第一個(gè)項(xiàng)目是一個(gè)后臺(tái)管理 (pc-兼容ie10)
? ?項(xiàng)目描述：
? ? ? ? ? ? ?登錄頁(yè)面 ---?使用了驗(yàn)證碼插件（組長(zhǎng)說(shuō)以后所有登錄都需要有驗(yàn)證碼?一開(kāi)始我用的是算法驗(yàn)證碼?后來(lái)出來(lái)的題目都太難了0.0?真的很尷尬?動(dòng)不動(dòng)出來(lái)一個(gè)66*99之類(lèi)的 我都在控制臺(tái)算一波?然后再填進(jìn)去? 后臺(tái)應(yīng)了要求統(tǒng)一換成數(shù)字單詞對(duì)應(yīng)的驗(yàn)證碼）
? ? ? ? ? ? 后臺(tái)系統(tǒng)一般都是單頁(yè)面? 可是并不會(huì)腳手架開(kāi)發(fā)?我們都是js邏輯用vue寫(xiě)?這樣方便很多?如果用js開(kāi)發(fā)的話綁定數(shù)據(jù)之類(lèi)的很麻煩
復(fù)制了比較官方的使用vue的好處：
????????????當(dāng)前端和數(shù)據(jù)做一些操作的時(shí)候，可以通過(guò)AJAX請(qǐng)求對(duì)后端做數(shù)據(jù)持久化，不需要刷新整個(gè)頁(yè)面，只需要改動(dòng)DOM里需要改動(dòng)的那部分?jǐn)?shù)據(jù)。特別是移動(dòng)端應(yīng)用場(chǎng)景，刷新頁(yè)面太昂貴，會(huì)重新加載很多資源，雖然有些會(huì)被緩存，但是頁(yè)面的DOM,JS,CSS都會(huì)被頁(yè)面重新解析一遍，因此移動(dòng)端頁(yè)面通常會(huì)做出SPA單頁(yè)應(yīng)用。
? ? ? ? 但是如果兼容ie低版本一般都寫(xiě)原生代碼 ..畢竟js原生是基礎(chǔ)還是要好好學(xué)習(xí)一下的..后面馬上要有一個(gè)項(xiàng)目開(kāi)發(fā)需要兼容ie低版本?需要用原生寫(xiě)
? ? ? ? 頁(yè)面登錄進(jìn)來(lái)左邊是個(gè)側(cè)邊欄?根據(jù)左邊側(cè)邊欄的選項(xiàng)控制右邊顯示內(nèi)容?默認(rèn)顯示的是第一項(xiàng)? 由于側(cè)邊欄的內(nèi)容是固定的數(shù)據(jù)?所以自己造假數(shù)據(jù)josn 如果是一級(jí)菜單可以直接循環(huán)然后點(diǎn)擊時(shí)顯示對(duì)應(yīng)內(nèi)容就可以了?由于還有二級(jí)欄目 我覺(jué)得這里其實(shí)挺復(fù)雜的?每次點(diǎn)擊的時(shí)候還需要判斷當(dāng)前列表是否是展開(kāi)還是關(guān)閉之類(lèi)的?挺繞我的..
? ? ? ? 右邊使用的是iframe?也是第一次接觸這個(gè)東西?就是頁(yè)面里面再鑲嵌一個(gè)頁(yè)面的效果?
? ? ? ? 其他功能最基礎(chǔ)的增刪改查?有一個(gè)多選框的選中和全選樣式很討厭?就是需要你把他最基礎(chǔ)的input樣式給隱藏起來(lái)然后用圖片或者你寫(xiě)的樣式移花接木的感覺(jué) 。 上傳圖片、文件功能?file (這個(gè)不支持ie9)?修改密碼?
? ? ? ? 我記得當(dāng)時(shí)寫(xiě)完后組長(zhǎng)要求加一個(gè)功能就是如果賬號(hào)再另一個(gè)電腦登錄這個(gè)賬號(hào)?就需要顯示一個(gè)彈框?異地登錄..當(dāng)時(shí)還沒(méi)太聽(tīng)懂? 后來(lái)才理解?

2.第二個(gè)項(xiàng)目是一個(gè)學(xué)生選課和老師發(fā)布課程科目管理 (pc-兼容ie10)
? ?項(xiàng)目描述：
? ? ? ? 登錄頁(yè)面 ---?學(xué)生?和?教師? 根據(jù)身份跳入不同的后臺(tái)頁(yè)面
? ? ? ? 老師的后臺(tái)?基礎(chǔ)的增刪改查? 導(dǎo)出報(bào)名的名單?修改名單(也就是刪)? ?這個(gè)項(xiàng)目大致和上一項(xiàng)目都相似因?yàn)槎际呛笈_(tái)布局?左邊側(cè)邊欄?右邊內(nèi)容?忘記提了?我用的是layer的彈框提示.用框架改成自己想要的樣式也是個(gè)頭疼事?需要打開(kāi)控制臺(tái)慢慢調(diào)試?不過(guò)我挺喜歡寫(xiě)樣式的?哈哈哈?畢竟邏輯對(duì)我來(lái)說(shuō)還是更頭疼的?
? ? ? ?這里當(dāng)時(shí)和策劃和后臺(tái)核對(duì)了很久?因?yàn)檫壿嬤@一塊像策劃說(shuō)的那樣根本走不通所以需要不停地溝通，難點(diǎn)主要是課目管理和發(fā)布課程這兩塊內(nèi)容? (很難受?因?yàn)樘昧?大概都記不清了)? ?先設(shè)置課目管理一級(jí)菜單是班級(jí) 203班?二級(jí)菜單可以添加他們班有的課程項(xiàng)目?語(yǔ)文數(shù)學(xué)之類(lèi)的?然后再發(fā)布課程?設(shè)置班級(jí)然后人數(shù)?發(fā)布出去以后學(xué)生可以報(bào)名?這里有個(gè)bug就是如果我已經(jīng)發(fā)布出去課程?學(xué)生也報(bào)名了?這個(gè)時(shí)候我刪除或者修改了發(fā)布的課程的名字 報(bào)名的學(xué)生都沒(méi)有了?還有修改了課目里名字?發(fā)布課程就又有變動(dòng)?因?yàn)槎际锹?lián)動(dòng)的? 還有挺多業(yè)務(wù)問(wèn)題的?后來(lái)商量的解決辦法就是我修改名字或者刪除的時(shí)候先判斷下面有沒(méi)學(xué)生報(bào)名或者有有沒(méi)有二級(jí)菜單，如果有內(nèi)容告訴他不可以修改或刪除 因?yàn)橄旅嬗袃?nèi)容
? ? 學(xué)生的比較簡(jiǎn)單就是可以點(diǎn)擊報(bào)名?查看當(dāng)前報(bào)名人員?一些簡(jiǎn)單的增刪改查

3.第三個(gè)項(xiàng)目一個(gè)學(xué)校的野外實(shí)習(xí)植物分類(lèi)和介紹 (pc/app- 兼容ie8)
? ? 項(xiàng)目描述：
? ? ? ? ? 這個(gè)是一個(gè)展示野外植物分類(lèi)?點(diǎn)擊查看詳情和搜索功能的頁(yè)面? 拿到手的時(shí)候?很開(kāi)心?覺(jué)得很簡(jiǎn)單?然后聽(tīng)到我們組長(zhǎng)讓我兼容到ie8?我就想哭...QAQ
? ? ? ? ? PC：進(jìn)入頁(yè)面是一個(gè)動(dòng)畫(huà)效果? 然后用戶(hù)點(diǎn)擊檢索平臺(tái)然后進(jìn)入展示頁(yè)面?因?yàn)閕e兼容?很多樣式都需要特殊處理?什么圓角border呀?還有背景圖片大小呀什么的..?我是用jquer寫(xiě)的? 這里的難點(diǎn)我覺(jué)得是點(diǎn)擊一個(gè)植物出來(lái)彈框?他會(huì)出現(xiàn)這個(gè)植物一系列圖片?然后每個(gè)圖片左上角會(huì)根據(jù)后臺(tái)返回的數(shù)據(jù)顯示對(duì)應(yīng)的花?草?葉?等等。。對(duì)應(yīng)的標(biāo)識(shí)?而且這個(gè)顯示的圖片是一個(gè)橫向展示?也就類(lèi)似于輪播圖吧?但是點(diǎn)擊要可以方大看?不會(huì)寫(xiě)?就找了很多插件?不停地試?然后再改樣式調(diào)試?還要讓他兼容?
? ? ? ? App：進(jìn)入移動(dòng)端也是一個(gè)動(dòng)畫(huà)? 一開(kāi)始覺(jué)得ie兼容夠痛苦了?然后感受了一下?ios的兼容? 更是傷感?hhh...?因?yàn)槲沂前沧?所以當(dāng)時(shí)寫(xiě)完覺(jué)得沒(méi)問(wèn)題?后臺(tái)?測(cè)試是ios?測(cè)得是一堆問(wèn)題呢..然后就是拿著測(cè)試的手機(jī)改改改..我還記得那是一個(gè)寒冷的周六 T . T??

4.第四個(gè)項(xiàng)目一個(gè)中醫(yī)后臺(tái) (pc- 兼容ie10)
? ? 項(xiàng)目描述：
? ? ? ? ? ? 之前都是用layer的?這里我發(fā)現(xiàn)一個(gè)挺好用的框架是?iview?他可以兼容到ie9? 特別贊~?
? ? ? ? ? ? 后臺(tái)頁(yè)面布局同上? 內(nèi)容從草藥寫(xiě)?基本每個(gè)頁(yè)面都是聯(lián)動(dòng)的?寫(xiě)第二個(gè)方劑庫(kù)頁(yè)面時(shí)?添加?有一個(gè)多選?選擇草藥是之前草藥頁(yè)面的數(shù)據(jù)?每個(gè)頁(yè)面都有基礎(chǔ)的增刪改和分頁(yè)? 然后就是病人列表展示也很簡(jiǎn)單?
? ? ? ? ? ? 復(fù)雜的地方是添加病人?這里的數(shù)據(jù)特別多(對(duì)于我這個(gè)渣渣來(lái)說(shuō)是目前比較復(fù)雜的json數(shù)據(jù)格式)?點(diǎn)擊添加病人跳轉(zhuǎn)到一個(gè)新的頁(yè)面? 我是用來(lái)專(zhuān)門(mén)寫(xiě)添加病人的? 里面還分望聞問(wèn)切? 添加語(yǔ)音?我這里是默認(rèn)樣式?沒(méi)弄出來(lái)想要的樣式?因?yàn)楦牡脑捫枰胘s改樣式 ，切診里面還有一個(gè)tab頁(yè)分身體的各個(gè)部位?又是一頓增刪改?然后醫(yī)生和病人的對(duì)話?最后有一個(gè)整體的病人總結(jié)?給他配什么藥? 診斷?和治療方法? 現(xiàn)在做完了?感覺(jué)沒(méi)什么難的就是數(shù)據(jù)有點(diǎn)繞?自己代碼寫(xiě)的有點(diǎn)亂?下次寫(xiě)需要注意和優(yōu)化? 遇到挺多坑爹的地方就是語(yǔ)音有個(gè)方法名搜索了也不是關(guān)鍵字但是就是用這個(gè)名字播放不出來(lái)?當(dāng)時(shí)找了很久?改了以后就正常了..很無(wú)奈

5.第五個(gè)項(xiàng)目一個(gè)虛擬平臺(tái)系統(tǒng)的官網(wǎng) (pc- 兼容ie9)
? ? 項(xiàng)目描述：
? ? ? ? 這個(gè)官網(wǎng)頁(yè)面我總覺(jué)的很好寫(xiě)?后來(lái)發(fā)現(xiàn)并不簡(jiǎn)單?
? ? ? ? 先是一個(gè)校級(jí)頁(yè)面然后從學(xué)員信息分類(lèi)點(diǎn)進(jìn)去可以看到其他院系的分類(lèi)?因?yàn)椴皇悄_手架寫(xiě)(腳手架開(kāi)發(fā)適合單頁(yè)面?也不適合這種) 用iframe沒(méi)有辦法自適應(yīng)高度?右邊有滾動(dòng)條體驗(yàn)特別差?所以只能死辦法?每個(gè)頁(yè)面都寫(xiě)一遍頭部導(dǎo)航以及底部?傳值都是通過(guò)地址欄傳值?然后進(jìn)入另一個(gè)頁(yè)面的適合獲取地址欄的參數(shù)再發(fā)送請(qǐng)求獲取數(shù)據(jù)? 整個(gè)頁(yè)面的排版基本都是輪播圖輪播圖輪播圖...變著花樣的輪播圖。這里需要吧 jquer的輪播圖改成vue的寫(xiě)法? 不然動(dòng)態(tài)獲取到的圖片會(huì)導(dǎo)致報(bào)錯(cuò)問(wèn)題



呃("▔□▔)...我寫(xiě)文章挺流水賬的? 從小寫(xiě)作文就被老師說(shuō)過(guò)?hhh..?寫(xiě)給未來(lái)的自己看 ~
新的一年?制定好計(jì)劃?好好努力！ (? ?_?)??加油~