【實習日報】2019年6月下半月 前端開發實習工作日報彙總

以下記錄的是今年6月16日-6月30日筆者在公司進行web前端工作的每日工作內容,其中隱去了項目的具體名稱、人名、公司名等。

2019.6.17

今天完成的任務:完成了經紀商管理系統的幾個前端靜態頁面的顯示

遇到的問題:今天遇到了一個這樣的問題:如下圖,在dialog彈窗中的標題文字要求顯示兩種樣式的問題,但是dialog只有一個title屬性可以被賦值,因此筆者打算將html的<font>標籤混入title的屬性值中去用以實現兩種字體樣式的顯示,但是不知道爲什麼html標籤沒有被解析而是原樣輸出了字符串,不僅如此,這種方法也要更繁瑣些,後面在討論了之後發現其實dialog的title也提供了slot插槽屬性,可以直接將html寫在插槽上再插入到title屬性上便可解決此問題!

明天的規劃:繼續經紀商管理系統的開發

 

 

 

2019.6.18

今天完成的任務:完成了經紀商管理系統的大部分靜態頁面顯示,修改了野牛期貨客戶端中的一些問題

遇到的問題:今天遇到到的主要問題是CSS方面的,雖熱最近編寫的靜態頁面都主要基於element ui組件,相對來說難度較小而且不需要做出太絢麗的界面,但是還是會有一些樣式方面的微調才能做的比較滿意,比如下圖:上傳的樣式展示基於element中自帶的上傳組件,但是其上傳組件中默認居中顯示“+”的icon,如果加上“上傳”的文字後,文字會直接掉到底部,爲了把“上傳”二字加入到跟合適的位置,考慮使用“子絕父相”式的佈局可以較好的解決這個問題

今天因爲需要修改野牛期貨客戶端上K線圖右邊的浮標顯示,包括使其向左移和使浮標上的數字顯示正確(默認必須保留兩位小數),在成哥的幫助下筆者進一步瞭解了stockcharts插件和野牛期貨之間的聯繫,包括其提供的接口控制和文檔,另外也學習瞭如何去查找stockcharts中的源碼

明天的規劃:將經紀商管理系統的剩餘一點靜態頁面完成,完善其整體顯示效果,修改左部菜單欄以貼合原型圖,開始後臺管理系統靜態頁面的編寫

 

 

 

2019.6.19

今天完成的任務:基本完成了經紀商管理系統的靜態顯示部分

遇到的問題:今天筆者在編寫css樣式時發現需要控制某些div的位置時,margin和padding的控制效果在很多時候是一樣的,以至於有些分不清楚什麼時候該使用margin什麼時候該使用padding來控制div的位置了,尤其是要控制那些無邊框無背景顏色的div時更是如此,因而到網上搜集了一些這類資料:http://www.hicss.net/use-margin-or-padding/

何時應當使用margin: 需要在border外側添加空白時。 空白處不需要背景(色)時。 上下相連的兩個盒子之間的空白,需要相互抵消時。如15px + 20px的margin,將得到20px的空白。
何時應當時用padding: 需要在border內測添加空白時。 空白處需要背景(色)時。 上下相連的兩個盒子之間的空白,希望等於兩者之和時。如15px + 20px的padding,將得到35px的空白。

明天的規劃:將經紀商系統中剩下的標題和logo部分進行修改,開始後臺管理系統的編寫

 

 

 

2019.6.20

今天完成的任務:完善了經紀商管理系統的頁面展示,開始進行後臺管理系統的前端開發

遇到的問題:今天遇到的一個問題:修改coreui的左邊菜單欄的寬度,如下圖,由於在左邊菜單欄這裏需要加上淨資產這些信息,因此左邊的菜單欄要比預設的200px的寬度更寬一些才合理,但是這裏涉及到一個問題就是菜單欄是基於響應式的佈局設計的,因此如果需要改動這個寬度則需要連帶的改動各種相關的width和margin-left屬性,這裏涉及的屬性只能根據chrome瀏覽器的樣式顯示一個個的去調整,最終筆者在修改了大概5個相關屬性之後初步調寬了這個狀態欄。

明天的規劃:繼續後臺管理系統的編寫

 

 

 

2019.6.21

今天完成的任務:完成了管理後臺的部分頁面

遇到的問題:今天遇到的問題主要是佈局的方面的問題。筆者記得以前在學校包括實習的時候寫html頁面都很少考慮佈局方面的問題,很多時候面對一些頁面,就直接寫多少多少px或者直接用百分比就完事了,但是這些做法現在看來並不好,尤其是頁面在不同設備上顯示還有縮放的時候效果會很不好,儘管正常使用的時候很少會進行頁面顯示的縮放,但是卻也必須考慮偶有出現的縮放現象,所以必須要好好考慮佈局的問題,不管是針對比較傳統的頁面還是響應式的頁面來說。

解決的措施:筆者在和同事們討論之後發現現在佈局應該是要以響應式佈局爲主,最有名的就是bootstrap的柵格化佈局+媒體查詢的思路了,之後的element ui等類似的柵格佈局都或多或少的借鑑了bootstrap的這種思想,一般我們在寫頁面時就可以考慮使用這種佈局。另外還有一類佈局方式是比較傳統的佈局方式,主要是基於float的佈局,相比之下現在使用flex彈性佈局要更流行更合適一些。

明天的規劃:繼續後臺管理系統的編寫

 

 

 

2019.6.24

今天完成的任務: 完成了管理後臺的部分靜態頁面的開發

遇到的問題:今天遇到了一個奇怪的問題:如下圖所示:在vue-router的index.js文件中筆者根據設計圖需要在userlist下再增加一個children頁面也就是用戶詳情頁面,但是userlist已經是用戶(user)的children頁面,不知道爲什麼在這種情況下使用$router.path()函數始終無法訪問到用戶詳情頁面(userDetails),在與夜景討論了一段時間之後還是沒能解決這個問題,最終也是暫時放棄了這種寫法轉而使用如下圖所示的這種寫法過渡。 可能與coreui自帶的導航欄路有關係。。

明天的規劃:繼續後臺管理系統的編寫

 

 

 

2019.6.25

今天完成的任務:完成了管理後臺的部分靜態頁面的開發(用戶列表、分組管理)

遇到的問題:今天在寫用戶詳情這個頁面時發現這個頁面很長(寫完之後才發現的),雖然這個頁面裏有很多內容是其他頁面已經有的,比如說在經紀商管理系統裏有一部分,所以最終寫出來的代碼比較長(當然這其中包括了一些靜態數據),在筆者寫完之後覺得好像不太好,打算封裝成一兩個子組件來,但是因爲現在還是靜態頁面編寫階段,所以還有些地方肯定是不確定或者是要修改的,所以就暫時讓這些代碼全部堆積在一起吧! 另外有時候覺得p標籤很好用,不只是在作爲純文本的內容是很好用。主要是覺得p標籤自帶了換行屬性,很多時候可以省去對
換行標籤的使用,使代碼更加美觀簡潔,另外在純文本的地方要多利用p標籤,這樣可以增加html的語義化,尤其是在丟失css樣式的情況下,p標籤的好處就很大程度的體現出來了。爲什麼以前筆者沒有覺得p標籤那麼好用呢。。大概是因爲它自帶了外邊距吧。

明天的規劃:繼續後臺管理系統的編寫,完成營銷活動和資金、管理模塊的靜態頁面

 

 

 

2019.6.26

今天完成的任務:完成了營銷活動和資金模塊的靜態頁面

遇到的問題:今天筆者在跟成哥討論的時候講起了關於職業規劃的問題。筆者還是持一直以來的這個觀點:現代社會高速發展,社會工作勞動效率極高,其中一個很大的原因是因爲明確的社會勞動分工,對於很多人來說可能一個確切的領域,一個確切的工作會伴隨一生,筆者認爲即使這份工作是興趣所然我們也沒有必要一直從事一份工作,比如我們每過十年重新規劃一個新的工作,換一份職業,這樣會使我們本就平淡的人生增添一些色彩:比如前十年我可以做程序員,但是以後還可以去做老師,學者…… 筆者認爲這是一個很好的思路!也願意去嘗試。

明天的規劃:繼續後臺管理系統的編寫

 

 

 

2019.6.27

今天完成的任務:進本完成了管理後臺的靜態頁面編寫,目前還差總覽的圖標沒有加上

遇到的問題:使用margin: 0 auto不能使img標籤表現出的圖片水平居中,通常我們如果要將一個div之類的塊級元素水平居中的話除了使用flex佈局之外,更爲常見的其實是將其外邊距設爲auto,即margin: 0 auto,但是對於img標籤這樣做確實無效的,因爲img標籤其實是行內替換元素,雖然可以設置width height,但是本質上行級標籤,所以這裏應該用text-align:center來居中,或者將其display改爲block之後利用margin auto居中。

明天的規劃:完善後臺管理系統

 

 

 

2019.6.28

今天完成的任務:將總覽中的圖表加上,部分使用的echarts實現,還有一部分使用的是靜態圖片

遇到的問題:最近一直在寫css和html,由於會操作到大量的div,有時候就必須給div取class的名字,但是當div嵌套比較多比較細的時候,筆者發現此時要給div取名字就會變得困難很多,一般取名就是根據其具體含義來取名的,可是有些嵌套的div涉及到的含義不好表述,因爲太細緻了,但是又必須要取名字,只是一個比較麻煩的問題。還需要研究一下怎麼解決

明天的規劃:完善後臺管理系統,對接接口

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章