摘要：競賽平臺項(xiàng)目中期總結(jié)軟件謝運(yùn)帷我們小組的選題是大學(xué)生競賽平臺項(xiàng)目，經(jīng)過我們需求分析，原型設(shè)計(jì)等等步驟，我們終于要開始著手實(shí)現(xiàn)這一個龐大的競賽平臺項(xiàng)目。

軟件51 謝運(yùn)帷 2015013185

我們小組的選題是大學(xué)生競賽平臺項(xiàng)目，經(jīng)過我們需求分析，原型設(shè)計(jì)等等步驟，我們終于要開始著手實(shí)現(xiàn)這一個龐大的競賽平臺項(xiàng)目。我們使用Django+mysql處理后端邏輯，加上Vue實(shí)現(xiàn)一個相應(yīng)式的前端設(shè)計(jì)。參考我們微信項(xiàng)目的框架，我們設(shè)計(jì)實(shí)現(xiàn)了一套前后端接口，并約定寫成接口文檔，讓我們整體項(xiàng)目可以前后端分離的進(jìn)行開發(fā)。這篇總結(jié)將一一點(diǎn)評我們前端部分從開始到現(xiàn)在遇到的點(diǎn)點(diǎn)

我負(fù)責(zé)的任務(wù)是前端的開發(fā)。首先我們面臨的第一個問題就是：Vue-cli生成的是一個單頁應(yīng)用的框架，而我們的項(xiàng)目不太好做成一個單頁的項(xiàng)目（加載時間太長，跳轉(zhuǎn)過快等等）。所以我們著手將這個框架改造成可以生成多頁應(yīng)用。網(wǎng)上有許多的多頁面框架，經(jīng)過了各種踩坑階段，排除了不少網(wǎng)上的錯誤實(shí)現(xiàn)，我們終于找到了一個合適的Vue項(xiàng)目目錄結(jié)構(gòu)和Webpack打包的配置方法。

一開始，我十分討厭Vue框架自帶的ESLint代碼風(fēng)格檢查，因?yàn)樗臀乙回瀸懙腏S的風(fēng)格不太相同……后來聽了老師對于我們整個項(xiàng)目的要求，著實(shí)感受到代碼風(fēng)格對于我們的項(xiàng)目實(shí)現(xiàn)也有十分重要的意義。這樣我們?nèi)ラ喿x他人的代碼時，會變得十分方便，整個項(xiàng)目調(diào)試的時候，也會變得非常方便。

一旦開始真正編寫Vue框架下的項(xiàng)目，單文件組件這一新的模式必然是躲不開的。父子組件間的通信，在單文件組件的實(shí)現(xiàn)中至關(guān)重要，組件該如何在一個網(wǎng)頁上應(yīng)用，我們都必須從頭開始學(xué)習(xí)。這之中我們閱讀了Vue的官方文檔和很多他人的實(shí)例代碼，終于明白了如何應(yīng)用組件，如何使用組件。

我們的Vue項(xiàng)目不可能從頭開始寫我們的一個個組件，于是我們選用了目前應(yīng)用最多的ElementUI組件庫來幫助我們美化我們的頁面。在熟悉使用Element組件的同時，我們也漸漸熟悉了Vue的語法和使用形式。目前，我們已經(jīng)基本擺脫了四處亂撞的嘗試模式，已經(jīng)可以在自己的理解下寫一個個前端頁面了。

這個是困擾我們很長一段時間的一個問題。當(dāng)我們棄用Django的template+views來繪制和重定向頁面時，我們必然需要采用GET和POST請求來完成前后端的數(shù)據(jù)通信。但是Django有一個防范跨域訪問的方式——CSRFToken檢查，這樣我們普通的POST一個表單給Django，會被無情地拒絕。?？淳W(wǎng)上很多的說法說只要在表單中加上CSRFToken這一項(xiàng)就可以解決這個問題，但各種嘗試還是會出錯。所以我們就放棄了去解決這個問題，直接關(guān)掉了Django的CSRF檢查。

到這里，前端從開始到中期遇到的所有問題大概就說完了。下面談?wù)勎覍τ谖覀冎衅诘膶?shí)現(xiàn)情況的一些感受吧：

我們抱著學(xué)習(xí)的心態(tài)來接觸Vue框架和前端工程化這些東西，說實(shí)話有很大的學(xué)習(xí)成本，相比熟悉的引入一個JQuery.js上手起來慢了許多

大學(xué)生競賽平臺的工作量還是很大的……要考慮的東西太多了，能付出的時間又有限，感覺可能最終完成的不太好

后端的功能接口還是要先想好，實(shí)現(xiàn)好……感覺之前沒有想太好的地方給前后端都造成了麻煩

進(jìn)度還是有一些慢……不過絕大部分原因是之前各種其他的作業(yè)太多了。。。后面估計(jì)其他的事情也不會少，看來需要提前安排好進(jìn)度了

最后我們對于前端的要求可能不能太高，不過我們還是想要盡力去完成，給我們的用戶一個簡潔明了的交互界面。如果談一點(diǎn)希望的話，希望我們?nèi)四芨帱c(diǎn)吧。。