從零開始開發一個全棧Web應用實錄

從零開始開發一個全棧Web應用實錄
目錄

雖說學習了大半年前端,但是對前端的理解仍然停留在對HTML,CSS,JS,JQuery的概念理解上,並且沒有接觸過相關的後端開發,所以說,這個專案也可稱為從零開始,是新手向的文章,不要害怕有門檻哈。


專案耗時15天時間,100小時的工作量,13370行程式碼,內容是本校的學生選課系統。

地址如下:http://115.159.6.187/ (偷懶沒做手機端優化,推薦電腦訪問嘿嘿)

網站首頁
管理員後臺介面

前言

做這個專案的原因呢,是因為一直在尋找合適的機會來完成一個綜合前後端的專案,剛好本學期資料庫需要完成一個大作業,所以在小學期的時間內,完成了本次的專案開發。之前一直也一直對學校的各種網站有著蠢蠢欲動的修改慾望,但是沒有好的機會,但是既然這次有這麼個機會的話,就可以好好做一個,搞一個大新聞。

我們學校用的通用正方教務,確實不好看
這裡寫圖片描述

暑假也開始了,如果一直沒有好的機會來啟動你的第一個專案的話,可能這篇文章就是一根導火索,一步一步來,保持執著,第一個專案,其實並不難。I can , you can.

全棧,聽起來挺厲害的,顧名思義,就是前後端都一個人做,前端和後端的關係,我感覺就像螺絲和螺帽,必須一起使用,做一個全棧開發的一個小專案就可以很好的幫我們理解,前端和後端的概念,有利於瞭解專案中不同模組以及他們之間是如何協同工作的,也會幫助我們在之後的開發中少走一些彎路,多跳一些大坑。

我接下來會按照整個開發流程的每個步驟,來簡述這個設計過程中的思路想法和學習路線和學到的價值好幾小時的幾個Tips,希望能夠讓學習前端,後端或者全棧開發的新同學們有所啟發。

首先,先感謝餘博倫大佬在前期給加的激勵BUFF,我之前還在想,BS架構這麼複雜,我就會一點前端知識,後端怎麼搞啊,大佬就說了一句,我當初就做的BS架構,不難,我就想著還是搞一個新聞,大不大就盡力了。
還有感謝在這次專案開發中給了我很大幫助的Java全棧開發學習網站http://how2j.cn/ 。知識點都是乾貨,學起來很快!

由於第一次接觸後端,技術不甚熟練,所以還有很多小BUG和可優化的地方沒有做好,資料庫中有的表為了方便自己理解,也沒有按照BCNF正規化的規則來設計,大佬們有什麼指導意見就請直接評論吧,感激不盡~。

第一步、網站功能的設計(需求分析)(重點)(1天)

在本次專案中,發現的最具價值的Tips之一就有這麼一條:

在專案開始之前,一定要清楚,網站需要提供的功能或者是使用者的需求到底是什麼,這樣可以省略一切不必要的網站的功能,也有助於我們快速的完成這個Web應用的開發。

在本次設計中,我選擇了比較幾個比較簡單的業務邏輯來降低開發難度,畢竟不要做崩才有信心做下一個嘛嘿嘿

這是本次網站功能的流程框圖圖
網站功能圖

第二步、專案技術全覽:(6天)

接下來我們按照之前列出的功能設計圖,一步一步分析可能用到的技術。
前端:HTML,CSS,JS,JQuery,Bootstrap
後端:J2EE(TOMCAT, SERVLET, JSP, Filter),MySQL,Java基礎 反射機制,linux命令列語句,計算機網路相關知識

誒,等一下,不是說好零基礎開發嗎,這是什麼個意思,我都不會。
巧了,我開始的時候也不會,這6天不就是好好學習的時間嘛哈哈哈,零基礎代表做專案之前不會,不代表之後不會吧。做專案在我看來就是一個快速學習的過程,所以15天的工作量,我花了6天在學習新的和複習舊的技術棧上。
整個專案做下來,學習時間所佔的時間肯定會大於6天。因為在最開始,你只能確定出你所使用的技能的種類,只能快速瀏覽本技術的核心知識點,保證你能理解這個技術是如何執行的,不會在後續的使用中跳進坑裡,降低學習的熱情。在後續的專案編寫中,可能會不斷地返回檢視相關知識點,學習並運用到專案中,這就是一個由淺入深地學習過程。

接下來介紹下本次使用的實現方式。

一個全棧Web應用的實現方式不止一種,根據不同的應用場景和自身的專長來選擇合適的開發技術,才是其中的宗旨。當你問一位前端全棧工程師,他可能會建議用HTML CSS JS來完成網站的前端設計,用Node.js來編寫後端服務。我因為java基礎還不錯,並且對JSP的原理很感興趣,除了能寫Java程式碼,還能直接在程式碼裡面讀取request的資料,聽起來很厲害。
所以本次專案開發我選擇了用Java來構建後端的處理模組。

第三步、物件和處理物件的服務構建(概念模型設計)(核心)(4天)

這一步是整個Web應用的核心,但是隻有一個專案正確完成了第一步的功能設計,這一步才會進行得比較順利,才不會出現大規模的刪改的情況。(一把辛酸淚2333)

在這個階段,我們需要分析,我的專案學生選課系統中出現了哪些物件,並且我們需要為對象提供的服務有哪些。

在接受他人思想的時候還是會用到我們可能是第一次聽到一些技術名詞,其實這些並不是對我們完全陌生的概念,所以靜下心,仔細理解,不理解就多去讀幾篇相關的技術文章,運用聯想記憶,減輕我們心理上的負擔。

這裡介紹幾則小知識

1、MVC

在javaweb的應用設計中,有一種MVC的思想:

這裡寫圖片描述
M 代表 模型(Model) ,使用bean,dao等等
V 代表 檢視(View) , 使用html,jsp,css
C 代表 控制器(Controller) ,servlet

模型通過控制器來吧不同的資料,顯示在不同的檢視上,例如把Course物件,顯示在JSP上。

舉個例子:

你玩csgo,控制器就是你的滑鼠鍵盤,檢視就是你的電腦螢幕,模型就是遊戲伺服器。
你遇到人,開槍,就是根據檢視提供的資訊,進行控制器操作,模型提供資料交換,然後再在檢視上提示你殺了一個人。
就是這麼個意思。

2、接下來介紹什麼是JSP:(V)

就是能寫Java程式碼的Html,jsp通過伺服器端的轉譯和編譯最終返回伺服器能使用的html檔案

就是你的遊戲螢幕

3、接下來介紹什麼是,DAO(Database Access Object)(M)

DAO這個Java類檔案中,儲存著各種操作,用來完成對服務(servlet)的支援,例如:使用者的增加(註冊),使用者的驗證(登陸),課程的增刪改查(課程搜尋,增加和修改)

就是根據你的控制器操作,進行判斷,那人中了你四槍,HP<0

4、接下來介紹servlet(C)

它的功能就是在前端的每一個點選或者操作出現後,後端能有與之對應哪個的後端操作或者是反饋出現,例如:登陸成功後的跳轉,失敗後的返回登入頁面,課程搜尋結果的出現,註冊成功的提示等。

就是你開槍後,那人倒下了。

這就是前端開發和全棧開發不一樣的地方,前端開發我們製作的是靜態頁面,就是沒有人給你打,就不存在這種和伺服器端的互動

5、反射和Filter:

在課程這個物件的操作中,我們可以發現,我們會對課程進行增刪改查操作,如果通過傳統的一個服務對應一個service類的話,我們需要四個service類,那麼能不能只用一個來簡化呢,當然有這麼個方法,就是通過Filter來對路徑進行分割,用同一個字首的不同字尾來代表不同的服務
如果訪問course_add,那麼就會呼叫courseServlet.add()方法
如果訪問course_delete,那麼就會呼叫courseServlet.delete()方法

>物件及物件服務總結

模型(Model):
User:系統中的所有使用者
Course:系統中的所有課程
CourseDAO:提供和課程相關的資料庫操作
UserDAO:提供和使用者相關的資料庫操作
服務(Controler):
UserServlet:提供和使用者相關的服務
CourseServlet:提供和課程相關的服務
檢視(View):
login.jsp:提供登陸介面
adminHome.jsp:提供管理員系統介面
teacherHome.jsp:提供教師系統介面
studentHome.jsp:提供學生系統介面

這一部分就用到了之前學習的新技術,是難點,很多知識都是第一次接觸,在最後完成了整個專案之後,我才對這種設計方式的精妙之處有所瞭解。

> 表結構的設計

根據之前列出的各種服務,我們可以抽象出需要完成專案需要的資料庫表
User表:id,password,name,level
Course表:cno,cname,description,credit,tno,number
SC表:sno,cno
Selection表:sno,cno
Teacher表:tno,tname

資料庫我選擇的是MySQL,因為之後雲伺服器部署中的映象提供的都是MySQL,並且有一個十分好用的MySQL操作軟體:MySQL-Front 能方便的完成我們的資料操作和匯入匯出,沒有多餘的功能,非常簡潔。
重點是有中文!!!

表結構的建立可以通過編寫SQL語句或者通過物件導向的方法手動建立
推薦通過SQL語句建立,Tips:可以直接設定雙主鍵,並且可以設定編碼格式為UTF-8,方便後期讀取和儲存資料。

第四步、前端頁面設計(2天)

由於後端的設計耗費了比較長的時間,所以留給前端設計的時間也不太多了,這裡我選擇的是使用Bootstrap來完成後臺管理頁面的設計,登入頁面的設計,眼尖的同學可能認出來了,這跟支付寶首頁有著很大的相似之處。

經常在尋找程式解決方案的時候看到過一些程式設計師大佬獨立網站中分享的一些知識,但我發現這些網站中的設計或多或少存在著些排版配色和字型大小的各種小問題。作為一名致力於前端的程式設計師,如何快速開發一個功能強大並且符合功能主題的配色和設計也是學習路程上需要重視的一個部分。
就比如說,在設計首頁的時候,我在當下最大的三家購物網站研究這登陸頁面的配色,發現毫無意外地都是紅色,採取暖色調的目的應該是為了給顧客提供一種溫暖的感覺,提高顧客購買慾望。但是,當我以我們校徽的藍色為主色調依葫蘆畫瓢的做出首頁之後發現沒辦法達到想要的感覺。
所以只能調轉車頭,在藍色為主的APP中尋找他們的首頁設計元素,這時候支付寶大氣的登陸頁面吸引了我的注意。
在日常生活中,可以時長關注周圍廣告公司的海報或者是各種生活產品的設計,在之後的前端設計中也可以給自己以靈感。

在前端設計的過程中,由於強力的Bootstrap沒有給我帶太大的問題。

第五步、部署(1天)

選擇雲伺服器

目前適用範圍較廣的雲伺服器提供商有,騰訊雲和阿里雲。學生的話騰訊雲和阿里雲一個10元/月,一個9.9元/月,相差不多。都可以考慮。這裡我使用的騰訊云為例,講解部署。

在雲伺服器購買完成後,可以在映象市場中選擇合適的映象,這就節約了我們在空系統上佈置各種軟體的時間

騰訊雲映象市場

這裡我選擇的是第二個Java多版本環境映象
Java多版本環境映象
這個映象提供了本次專案所需的Tomcat JDK MySQL 三個軟體,安裝完成後,我們只需通過映象說明手冊,更改tomcat的部署路徑和匯入MySQL的資料庫即可完成部署。

Tips:推薦是用整合環境,畢竟linux坑太多了。

**Tips:在操作之前,一定要熟讀安裝映象的使用說明,很多配置都有詳細說明,節省了很多自己摸索的時間。
這是本次使用映象的說明檔案,大家可以一窺一二。**

http://www.kzyjs.com/cloudimage/qcloud/kz004/readme.pdf

應用部署

雲伺服器,說白了就是另外一臺連著網際網路的電腦。並沒有太大的特別之處。由於雲伺服器的大小隻有20G,所以無法安裝視覺化介面,所以只能使用命令列來進行操作。

這裡我們需要Putty.exe來進行和伺服器的連線,或者通過騰訊雲伺服器的登陸,直接進入伺服器也可以。

Putty

這裡寫圖片描述
這裡是putty登陸成功的頁面,雲伺服器的具體啟用方式,在映象的配置說明檔案中都有詳細說明,大家可以仔細檢視。

Tomcat的配置

在之前沒有通過部署Tomcat方法部署專案的時候,嘗試過使用將Java專案匯出為war進行伺服器部署,但是貌似配置比較麻煩失敗了,並且還有一個明顯的缺點就是會增加程式的大小。

在伺服器端,我們直接開啟Tomcat配置檔案的路徑,在學習Tomcat的部署中,我們瞭解過,只需要更改tomcat安裝路徑下conf資料夾的server.xml中的Context path即可

這裡寫圖片描述

MySQL

MySQL的真的是一個大坑,細細說來

1、文字編輯的預設編碼

預設編碼不為UTF-8,需要在my.cnf中增加語句進行修改,UTF-8真的是個好東西,一定要設定。

2、sql檔案的匯入方式

我們知道,專案需要讀取sql中的資料才能正常使用,所以我們也必須要將資料匯入到資料庫中。通過mysqld -uroot -p和輸入密碼,進入mysql後,我通過語句進行插入資料。測試時,在頁面中發現一直沒有中文資料,30分鐘後發現命令列不能接收中文,根本就沒插入進去。
後來我使用source命令匯入.sql檔案終於解決了233

3、MySQL大小寫敏感的問題

在研究了一個小時已選課程表為何有數目沒有資料的時候,發現SQL語句中select from 的 course 大寫了,改回來就好了,我的心裡是崩潰的,說好的大小寫不敏感呢,怎麼linux的就變了,所以這個故事告訴我們,一定要規範書寫SQL語句!

開發工具

Eclipse

Eclipse 是一個開放原始碼的、基於 Java 的可擴充套件開發平臺。Eclipse 是 Java 的整合開發環境(IDE),當然 Eclipse 也可以作為其他開發語言的整合開發環境,如C,C ,PHP,和 Ruby 等。Eclipse 附帶了一個標準的外掛集,包括Java開發工具(Java Development Kit,JDK)。
這裡寫圖片描述

Webstorm

使用過幾款編寫前端程式碼的軟體後,Webstorm的快捷鍵和自動補全功能真的是讓人印象深刻。

這裡寫圖片描述

Mysql-Front

有著比Mysql workbench更加簡潔的操作介面對新使用者很友好。

這裡寫圖片描述

總結

當解決完伺服器端MySQL區分表名大小寫的問題後,終於完成了所有課程和可選課程的正常讀取,這個專案也可以基本上告一段落了。
通過完成一個專案的製作,除了成功的把資料庫課程設計拿了優秀之外,更重要的是對一個完整的Web專案的開發有了一個新的認識,這篇分享,多的主要是從零開始做這整個專案的心路歷程,技術類的知識書上都有,我也只提了個比較精彩的部分,學習的路子很多,但是方向卻只有一個,就是做出能讓自己滿意的作品,而且自己很喜歡,這個是我對開發的一個看法,雖然在這其中可能因為一個知識點不熟,一個大小寫的錯誤,導致一兩個小時,或者更多的Debug時長,但是當作品放在這裡的時候,感覺就沒那麼累了。
最後送給還處在新手階段的我們幾句話,有人說跑步是忠誠度最高的運動,因為你練了,你就能跑這麼遠,程式設計何嘗又不是呢。
Stay hungry, stay foolish。