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

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

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

http://101.43.250.43/page/discuss.html

這個(gè)項(xiàng)目的源碼在文章最后可以知道下載鏈接

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

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

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

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

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

這是實(shí)時(shí)討論的前端代碼

這是實(shí)時(shí)討論的后端代碼

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

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

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

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

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

這是發(fā)布的代碼

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

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

就是這樣解決的

這是提交

這是獲取

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

這個(gè)代碼就讓大家自己去項(xiàng)目里看吧

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

這個(gè)項(xiàng)目整體比較粗糙，因?yàn)槭遣砰_始做的嘛，大家僅供參考，互相學(xué)習(xí)，不要用于其它用途，切勿轉(zhuǎn)賣?。?！

如需下載源碼請?jiān)诠娞?hào)聊天界面回復(fù)【01】

公眾號(hào)里面可以查看項(xiàng)目演示視頻