Python與web前端的實(shí)訓(xùn)演練一、實(shí)踐目的1、本學(xué)期開展的暑假實(shí)訓(xùn)活動(dòng)主要是為了讓學(xué)生學(xué)習(xí)軟件開發(fā)的各種模式，開發(fā)流程，以及各種形式的建模。這是學(xué)生在大學(xué)本科期間最后一個(gè)暑假，學(xué)習(xí)更多的知識(shí)會(huì)讓學(xué)生在之后的求職道路中多一項(xiàng)技能，同時(shí)也多一塊求職的敲門磚。2、本學(xué)期安排的暑期實(shí)踐活動(dòng)是讓學(xué)生在學(xué)校統(tǒng)一學(xué)習(xí)Python和Web前端開發(fā)，期間我們?cè)敿?xì)學(xué)習(xí)H-builder和Python的各個(gè)流程，并通過實(shí)訓(xùn)演練來體會(huì)開發(fā)過程。通過這一系列的學(xué)習(xí)使得學(xué)生更深刻的了解這方面的知識(shí)，奠定基礎(chǔ)，以后若想繼續(xù)學(xué)，這些良好的基礎(chǔ)都會(huì)鋪路。3、本學(xué)期的暑期實(shí)踐活動(dòng)也是為了讓學(xué)生學(xué)習(xí)并掌握HTML、CSS、Python等技術(shù)，并逐漸加深學(xué)習(xí)，做到熟練運(yùn)用H-Builder以及Python。二、實(shí)踐內(nèi)容1、通過老師的指導(dǎo)，下載H-Builder軟件，并且初步學(xué)習(xí)了軟件的使用方法，以及作用。老師還詳細(xì)介紹了web前端開發(fā)各項(xiàng)事宜，隨后我們開始學(xué)習(xí)一種用戶自定義圖標(biāo)的方法用于淘寶圖標(biāo)的制作?，F(xiàn)在的前端開發(fā)都進(jìn)入了自動(dòng)化、模塊化開發(fā)了，包括文件編譯、打包、同步都依賴插件自動(dòng)化完成。沒有終端cmd.exe的話工作起來不夠方便。所以下載H-Builder軟件之后的第一件事建議先集成終端程序。首先，從阿里巴巴iconfont（圖標(biāo)字體）官網(wǎng)下載自結(jié)構(gòu)己需要的字體，然后修改代碼。為保證和mui目錄結(jié)構(gòu)統(tǒng)一，建議將字體文件(iconfont.ttf)放在fonts的目錄下，這樣我們不需要修改屬性；將iconfont.css放在css目錄下；只兼容ios和安卓版本的話，我們僅需要ttf格式的字體即可，其他字體可以刪除；同時(shí)，我們也僅僅需要保留-webkit前綴語法，-moz前綴部分可以刪除；接下來就是使用，引入：<linkrel=“stylesheet”herf=“css/iconfont.css”/>。最后我們將得到我們想要的圖標(biāo)。2、在老師的帶領(lǐng)下，我們繼續(xù)學(xué)習(xí)H-Builder軟件。之前，我們學(xué)習(xí)了如何增加自定義圖標(biāo)，接下來，我們學(xué)習(xí)了如何設(shè)計(jì)系統(tǒng)登陸界面。我們可以使用H-Builder創(chuàng)建一個(gè)登錄模版，但是它是以登錄頁作為app的入口界面，我們有時(shí)候不希望一打開app就看到登錄頁，所以這里介紹一下如何設(shè)置不以登錄頁為入口頁面，并且通過按鈕來拉起登錄頁：在manifest.json中將頁面入口改為main.html，然后在剛剛創(chuàng)建的項(xiàng)目中的main.html中加入一個(gè)按鈕，通過它來拉起登錄頁，js代碼（doc即document）：跳出登錄頁，輸入登錄信息，點(diǎn)擊登錄按鈕后即可跳轉(zhuǎn)到具有登錄狀態(tài)的main.html。3、在之前學(xué)習(xí)的基礎(chǔ)上，我們繼續(xù)學(xué)習(xí)了如何用代碼制作計(jì)算器的界面。通過一張計(jì)算器的實(shí)物照片，設(shè)計(jì)圖標(biāo)之間的尺寸比例，以及圖標(biāo)上方的數(shù)字符號(hào)。自定義代碼段是快速輸入的一個(gè)途徑，相較之下H-Builder軟件的代碼提示支持的語言還是有點(diǎn)少，如果有自己需要無數(shù)次重復(fù)使用的代碼段，設(shè)置成代碼段提示是最佳的選擇。下面開始：首先，工具->拓展代碼塊--（選擇自己需要的自定義的文件類型，如：自定義js代碼塊）；然后在彈出的界面就可以開始了，H-Builder軟件官方的注釋已經(jīng)很清楚了，按照模版來就好。原來的示例可以全部注釋掉，然后加上自己的。寫完保存就可以立馬生效了。4、老師繼續(xù)帶領(lǐng)我們學(xué)習(xí)了如何制作課程表，原理與計(jì)算器類似，但比例尺寸不盡相同。如果代碼中含有會(huì)引起ruby代碼塊錯(cuò)誤的字符要轉(zhuǎn)義，比如：代碼中有雙引號(hào)（"path="/home/page";"）的情況，要用\"來輸出"，即:"path=\"/home/page\";"。b.需要換行和加縮進(jìn)的地方直接寫進(jìn)去，也就是輸出的時(shí)候是什么樣子就怎么輸進(jìn)去。只要在""里面就行。c.因?yàn)楣俜侥０謇锩姹旧砭蛶в锌s進(jìn)，所以輸出的時(shí)候縮進(jìn)量會(huì)增加，所以換行的下一行一定要從第一個(gè)光標(biāo)位開始寫或者按TAB鍵。解決辦法：把模板里的固定變量的縮進(jìn)去掉，然后再開始寫。免去多次按刪除鍵的煩惱。5、老師接下來給我們布置了一個(gè)任務(wù)，根據(jù)之前所學(xué)的知識(shí)，自己設(shè)計(jì)一個(gè)界面。有計(jì)算器這個(gè)界面的啟發(fā)，我想到了制作2048的游戲界面。首先我選擇了一張2048游戲界面的截圖，然后根據(jù)截圖，我計(jì)算設(shè)計(jì)的界面應(yīng)有的尺寸和比例，從而編寫代碼。經(jīng)過多次的修改數(shù)據(jù)，最后找到最為合適的比例，成功得到想要的界面。無限重復(fù)的東西我們都用模板來解決。下面我們用作html模板來說。簡(jiǎn)單的我們希望每個(gè)新建的html文件都帶有CSS樣式的引用：<linkrel="stylesheet"type="text/css"href="test.css"/>那我們就新建一個(gè)叫l(wèi)inkMod.html的文件，把重復(fù)用到的東西加上去，保存并復(fù)制到目錄：C:\Users\你的用戶名\HBuildersettings\Templates\html下即可（HBuilder默認(rèn)模板路徑）。等再次新建html的時(shí)候就可以選擇使用了。這樣節(jié)省一些時(shí)間。三、實(shí)踐過程1、淘寶設(shè)計(jì)通過編寫代碼，進(jìn)行了淘寶的頁面設(shè)計(jì)，得到了如下界面代碼如下：.div1{ width:600px; height:100px; background-color:yellowgreen;}.div2{ width:400px; height:300px; background-color:#ff1122; float:left;}.div5{ width:200px; height:300px; background-color:#aa3344; float:left;}.div3{ width:100px; height:70px; background-color:#aaddff; float:left; margin:2px50px;}.div4{ width:150px; height:20px; background-color:#11aadd; float:left; margin:10px25px; }.div6{ width:20px; height:15px; background-color:yellow; margin-left:25px; margin-top:20px; margin-right:20px; float:left;}2、系統(tǒng)登錄系統(tǒng)的登陸界面如下3、計(jì)算器利用前面所學(xué)的登陸界面，設(shè)計(jì)一個(gè)通過登陸才能進(jìn)入的計(jì)算器界面先彈出一個(gè)登陸界面輸入用戶名和密碼之后，點(diǎn)擊登陸，就會(huì)彈出計(jì)算器界面此時(shí)若點(diǎn)擊返回上一頁，則會(huì)彈出以下界面代碼如下：.aa{ text-align:center; margin:auto;}.div{ width:400px; height:700px; margin:auto;}.btn1{ width:380px; height:50px; margin:auto; margin-top:20px; text-align:right; font-size:30px; float:left;}.btn2{ width:60px; height:40px; margin-top:10px; margin-left:0px; margin-right:20px; float:left;}.btn3{ width:140px; height:40px; margin-left:0px; margin-top:10px; margin-right:20px; float:left;}.btn4{ width:60px; height:90px; margin-top:10px; margin-left:0px; margin-right:20px;}4、課程表與相應(yīng)圖標(biāo)設(shè)計(jì)設(shè)計(jì)過程如下與計(jì)算器同理，也同樣是運(yùn)用圖標(biāo)設(shè)計(jì)原理制作而成。5、2048游戲界面設(shè)計(jì)通過一系列的學(xué)習(xí)之后，老師要求我們自己設(shè)計(jì)一個(gè)界面，并通過編寫代碼實(shí)現(xiàn)。我通過類比計(jì)算器的編寫，設(shè)計(jì)了一個(gè)2048游戲界面，并且成功編寫出代碼實(shí)現(xiàn)。具體如下：先選取一個(gè)2048游戲界面截屏而后根據(jù)截屏設(shè)計(jì)制作界面中圖標(biāo)的尺寸比例，一定注意尺寸得合理編寫代碼，實(shí)現(xiàn)設(shè)計(jì)。（下圖中左圖為截屏，右圖為設(shè)計(jì)編寫后實(shí)現(xiàn)的界面）設(shè)計(jì)的過程中，我發(fā)現(xiàn)數(shù)據(jù)必須經(jīng)過多次實(shí)驗(yàn)，才能找到最合適的尺寸比例。代碼如下：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <style> .da{ width:503px; height:503px; background-color:burlywood; margin:autoauto; text-align:center; } .div1{ width:100px; height:100px; margin:10px10px; float:left; font-size:40px; background-color:gold; } </style> <body> <divclass="da"> <div> <div><inputclass="div1"type="button"value="2"></div> <div><inputclass="div1"type="button"value=""></div> <div><inputclass="div1"type="button"value="4"></div> <div><inputclass="div1"type="button"value=""></div> <div><inputclass="div1"type="button"value="2"></div> <div><inputclass="div1"type="button"value="2"></div> <div><inputclass="div1"type="button"value="16"></div> <div><inputclass="div1"type="button"value=""></div> <div><inputclass="div1"type="button"value="8"></div> <div><inputclass="div1"type="button"value="1024"></div> <div><inputclass="div1"type="button"value="256"></div> <div><inputclass="div1"type="button"value=""></div> <div><inputclass="div1"type="button"value=""></div> <div><inputclass="div1"type="button"value=""></div> <div><inputclass="div1"type="button"value=""></div> <div><inputclass="div1"type="button"value="2048"></div> </div> </div> </body></html>四、實(shí)踐體會(huì)通過這段時(shí)間短暫的學(xué)習(xí)，我學(xué)習(xí)了有關(guān)于Python與Web前端的各種知識(shí)，對(duì)H-builder軟件也有了一定了解。Python是一種面向?qū)ο蟆⒅弊g式計(jì)算機(jī)程序設(shè)計(jì)語言。公認(rèn)的特點(diǎn)是簡(jiǎn)單、易學(xué)、免費(fèi)、開源等等。個(gè)人覺得特別喜歡Python的地方是對(duì)字符串操作特別的靈活、采取縮進(jìn)的方式簡(jiǎn)單明了、以及簡(jiǎn)單的語法。Python和c類似，是順序進(jìn)行的，不像visualc++是事件觸發(fā)不同模塊進(jìn)行的。操作和matlab相似，有編輯窗口，也有一個(gè)運(yùn)行的窗口(交互式解釋器)，可以編寫之后運(yùn)行，也可以在命令行模式下一條條的完成。Python對(duì)于代碼格式要求也相當(dāng)嚴(yán)格，通過對(duì)于縮進(jìn)的距離來判斷代碼是否處于同一個(gè)代碼塊。這樣做的好處在于代碼編寫看上去很統(tǒng)一，Python也不依靠分號(hào)來決定一句代碼是否結(jié)束，一行代碼就是一句代碼。這次實(shí)訓(xùn)課第一天進(jìn)行了對(duì)計(jì)算機(jī)基礎(chǔ)的復(fù)習(xí)和了解，人工智能，計(jì)算機(jī)模式的演進(jìn)，計(jì)算機(jī)模式的演進(jìn)，易語言等。然后開始在老師的指導(dǎo)下學(xué)習(xí)Python的基礎(chǔ)語法：如a[1:]從3開始，a[-1]最后一個(gè)元素，a[-1:]從最后一個(gè)開始，a[:-1]最后一個(gè)元素之前的兩個(gè)元素，a[:]所有元素，a.pop()彈出,數(shù)組的長(zhǎng)度、數(shù)組元素的讀取、a.()插入元素,a.count(),a.remove()移除,a.clear()清空,dela刪除整個(gè)變量,a=True布爾類型等。我們還了解了數(shù)據(jù)分析，數(shù)據(jù)分析也具有極廣泛的應(yīng)用，典型的數(shù)據(jù)分析可能包含以下三步：搜索性數(shù)據(jù)分析，模型選定分析，推斷分析。數(shù)據(jù)分析主要包括，簡(jiǎn)單的數(shù)學(xué)運(yùn)算(SimpleMath)，統(tǒng)計(jì)(Statistics)，快速傅里葉變換(FFT)，平滑和濾波(SmoothingandFiltering)，基線和峰值分析(BaselineandPeakAnalysis)。我們還學(xué)習(xí)了用pycharm畫曲線圖和散點(diǎn)圖，學(xué)習(xí)了k-means算法和歐式定理等公示。不僅如此，我們同樣學(xué)習(xí)了web前端開發(fā)使用的工具H-Builder。相對(duì)于Python軟件而言，H-Builder更加陌生，以前從來沒有接觸過，也并沒有聽說過。通過這次實(shí)訓(xùn)，我們初步了解了H-Builder軟件，并且初步學(xué)習(xí)、初步掌握了H-Builder軟件，會(huì)運(yùn)用H-Builder軟件進(jìn)行一些小的設(shè)計(jì)，并且通過編寫代碼實(shí)現(xiàn)算法。H-Builder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE。H-Builder它基于Eclipse，所以順其自然地兼容了Eclipse的插件。快，是H-Builder最大的優(yōu)勢(shì)，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發(fā)效率。通過這次實(shí)訓(xùn)，我對(duì)H-builder有了一定了解，也能較為熟練地用H-builder設(shè)計(jì)制作一些自己想要的圖標(biāo)、界面、系統(tǒng)等等，雖然太過復(fù)雜的對(duì)我來說可能難以做到，但是稍微簡(jiǎn)單一點(diǎn)的設(shè)計(jì)還是能夠完成。通過這次Python與Web前端實(shí)訓(xùn)，我收獲了很多，一方面學(xué)習(xí)到了許多以前沒學(xué)過的專業(yè)知識(shí)與知識(shí)的應(yīng)用，另一方面還提高了自我動(dòng)手做項(xiàng)目的潛力。本次實(shí)訓(xùn)是對(duì)我潛力的進(jìn)一步鍛煉，也是一種考驗(yàn)。從中獲得的諸多收獲，也是很可貴的，是十分有好處的。在實(shí)訓(xùn)中我學(xué)到了許多新的知識(shí)，是一個(gè)讓我把書本上的理論知識(shí)運(yùn)用于實(shí)踐中的好機(jī)會(huì)，原先，學(xué)的時(shí)候感嘆學(xué)的資料太難懂，此刻想來，有些其實(shí)并不難，關(guān)鍵在于理解。在這次實(shí)訓(xùn)中還鍛煉了我其他方面的潛力，提高了我的綜合素質(zhì)。首先，它鍛煉了我做項(xiàng)目的潛力，提高了獨(dú)立思考問題、自我動(dòng)手操作的潛力，在工作的過程中，復(fù)習(xí)了以前學(xué)習(xí)過的知識(shí)，并掌握了一些應(yīng)用知識(shí)的技巧等。其次，實(shí)訓(xùn)中的項(xiàng)目作業(yè)也使我更加有團(tuán)隊(duì)精神。在此次實(shí)訓(xùn)中，我還學(xué)會(huì)了下面幾點(diǎn)找工作的心態(tài)：第一方面就是繼續(xù)學(xué)習(xí)，不斷提升理論涵養(yǎng)。在信息時(shí)代，學(xué)習(xí)是不斷地汲取新信息，獲得事業(yè)進(jìn)步的動(dòng)力。作為一名青年學(xué)子更就應(yīng)把學(xué)習(xí)作為持續(xù)工作用心性的重要途徑。走上工作崗位后，我會(huì)用心響應(yīng)單位號(hào)召，結(jié)合工作實(shí)際，不斷學(xué)習(xí)理論、業(yè)務(wù)知識(shí)和社會(huì)知識(shí)，用先進(jìn)的理論武裝頭腦，用精良的業(yè)務(wù)知識(shí)提升潛力，以廣博的社會(huì)知識(shí)拓展視野；第二方面是努力實(shí)踐，自覺進(jìn)行主角轉(zhuǎn)化。只有將理論