1. 程式人生 > >【北航軟件工程】Alpha階段前端頁面編寫及服務器部署

【北航軟件工程】Alpha階段前端頁面編寫及服務器部署

ogre 手動 自己 djang 來替 分享 column bootstra 是我

前端頁面編寫

雖然之前對html語法有過一些了解,但是完全沒有編寫前端頁面的經驗,和我合作的czy大概也是這麽個情況。在Alpha階段的前端頁面編寫過程中,我們是摸著石頭過河,html是個入門很快專精卻很花時間的語言,我們從最基本的布局入手來編寫頁面。除了業務不熟練之外,困擾我們的還有頁面設計組給我們的樣板頁面,在我們的前端頁面編寫中需要盡量按照設計同學的設計圖來編寫html代碼,這往往需要豐富的經驗,例如下面這張設計圖:
技術分享圖片

圖中以“星星”的方式來展示老師和課程的評分,這個星星的組件是不包含在bootstrap裏面的,需要第三方插件來實現,而第三方插件又不利於我們與後端的對接,這也就給我們html編寫帶來了挑戰,最後我們還是用bootstrap進度條組件來替代星星,下面是我們的代碼:

<div class="col-md-10 column">
    <p><strong>評分詳情:</strong></p>
    <ul></ul>
    <ul>
        作業量合理
        <div class="progress">
            <div class="progress-bar progress-bar-success" 
                 role="progressbar" style="width:{{percent1}}"
                 aria-valuenow="{{detail1}}" aria-valuemin="0" 
                 aria-valuemax="5">{{detail1}}</div>
        </div>
    </ul>
    <ul>
        難易度合理
        <div class="progress">
            <div class="progress-bar progress-bar-success" 
                 role="progressbar" style="width:{{percent2}}"
                 aria-valuenow={{detail2}}" aria-valuemin="0" 
                 aria-valuemax="5">{{detail2}}</div>
        </div>
    </ul>
    <ul>
        收獲量
        <div class="progress">
            <div class="progress-bar progress-bar-warning"
                role="progressbar" style="width:{{percent3}}"
                aria-valuenow="{{detail3}}" aria-valuemin="0" 
                aria-valuemax="5">{{detail3}}</div>
        </div>
    </ul>
    <ul>
        滿意度
        <div class="progress">
            <div class="progress-bar progress-bar-warning"
                role="progressbar" style="width:{{percent4}}"
                aria-valuenow="{{detail4}}" aria-valuemin="0" 
                aria-valuemax="5">{{detail4}}</div>
        </div>
    </ul>
    <ul></ul>
</div>

Alpha階段的諸如此類的前端挑戰也讓我體會到了團隊編程和個人編程不一樣的地方,團隊成員之間的交流合作至關重要。如果我們前端代碼編寫組能和前端設計組緊密交流,了解雙方難題和需求,這對我們的團隊進度將頗有好處。

服務器部署

如果說前端代碼編寫大家還算有點了解的話,服務器部署方面的知識完全是一張白紙。由於華為雲服務器的自動部署沒有適合django的方案,因此我很感謝cnblog和csdn裏面的程序猿們分享了django+nginx+uwsgi服務器手動部署的方法。由於自己長期接觸linux環境,除了一次誤刪mysql文件麻煩助教重置服務器外,整個配置進程還是很順利的。
技術分享圖片
轉載一波配置方法:部署Django到阿裏雲服務器教程

【北航軟件工程】Alpha階段前端頁面編寫及服務器部署