分享給大家一個我的起步就夭折的校園論壇項目
2022-04-25 22:51:13

“?分享一個校園論壇項目雛形，希望大家能在我的源碼中學(xué)到一些”

這是演示地址，最好用電腦打開

http://101.43.250.43/page/discuss.html

這個項目的源碼在文章最后可以知道下載鏈接

2022.2月份心血來潮想做一個校園論壇項目，給學(xué)校使用，但是和學(xué)校老師交流過后，發(fā)現(xiàn)學(xué)校曾經(jīng)存在過一個論壇，但是因為走偏了，所以關(guān)閉了，所以我的論壇想要和學(xué)校合作可以說很難了，本來也是邊學(xué)邊做的，現(xiàn)在就把這個沒寫多少東西的項目分享給大家參考參考吧

這里面我寫好了用戶注冊登錄和討論發(fā)布，討論查看，并且在討論下面發(fā)送消息實時討論

數(shù)據(jù)庫是用的mysql

這里面的實時討論我是自己琢磨的邏輯實現(xiàn)的

大概就是，第一次加載界面的時候先獲取一次對應(yīng)帖子的評論數(shù)據(jù)表，并且把這時候的第一條評論id記錄下來，然后開始一個定時器，每隔一秒獲取對應(yīng)帖子的評論數(shù)據(jù)表，把第一次加載界面獲取到的最新評論id拿給后端去和數(shù)據(jù)表里面的每一條記錄進行比較，后端在監(jiān)測的時候遇到相同的id就把那條id前面的所有記錄返回給前端，前端在把接收到的所有記錄添加到列表當(dāng)中，然后再次把這時候的最新評論的id記錄下來

這是實時討論的前端代碼

這是實時討論的后端代碼

發(fā)布評論就是把數(shù)據(jù)提交給后端，后端在添加數(shù)據(jù)的時候會自動加上評論ID，在添加成功過后會把ID返回給前端，供前端記錄下來

這是發(fā)表評論的前端代碼，后端代碼就在上面type類型為1的時候

這里要注意的就是在把新討論添加到列表的的順序問題，還有就是返回數(shù)據(jù)的順序問題，我在自己寫的時候就在這方面想了很久，

邏輯實現(xiàn)的都比較基礎(chǔ)，可能還是有問題的，但是這個項目已經(jīng)沒搞好久了，最后一次搞是3.22號，已經(jīng)過了一個多月了，做項目的時候有很多細(xì)節(jié)都已經(jīng)搞忘了

帖子發(fā)布在項目里面是可以發(fā)布圖片的，這里我的思路是用的添加元素，就是在一個div里面添加我想要的元素，最終把div里面的所有元素的html代碼提交到后端，然后用戶在點擊帖子進行查看的時候，利用在點擊列表時記錄在cookie當(dāng)中的articleID去后端查詢對應(yīng)的數(shù)據(jù)表把對應(yīng)的html代碼返回給前端，前端再把代碼添加到界面相應(yīng)的位置去

這是發(fā)布的代碼

這是瀏覽時獲取討論內(nèi)容的代碼

這里我有一個研究了很久的問題，因為在編輯帖子的時候會添加圖片，我是把圖片讀取成base編碼添加到img元素的src屬性里面，但是這個base編碼里面會有很多的+符號，這個符號在用post提交到后端過后，這個符號會被替換成空格，所以在瀏覽帖子的時候，從后端讀取到的html代碼就不能正常顯示原先編輯時候添加的圖片，這個問題，我是提交的時候把+全部替換~，在從后端獲取到前端過來過后，我在把~替換成+在把代碼添加到對應(yīng)的div里面去就可以正常顯示了

就是這樣解決的

這是提交

這是獲取

在編輯帖子的時候，我只寫了兩種元素，文字和圖片，文字可以改變大小、顏色、內(nèi)容，圖片不能改，添加的時候有兩種添加方式，一種是直接在文章末尾添加（第一次添加元素默認(rèn)就是這種模式），一種是在選擇的元素上方添加，這里用到的思路其實就是在div中添加dom節(jié)點

這個代碼就讓大家自己去項目里看吧

希望大家能在我的源碼中學(xué)到一些

這個項目整體比較粗糙，因為是才開始做的嘛，大家僅供參考，互相學(xué)習(xí)，不要用于其它用途，切勿轉(zhuǎn)賣！?。?/p>

如需下載源碼請在公眾號聊天界面回復(fù)【01】

公眾號里面可以查看項目演示視頻