項目簡介
留言牆：一個以在線便利簽的形式，也可以擴展成許願牆、樹洞的一個項目。
抽空來完成一個簡單的留言牆項目並完整介紹整個過程。留言牆，顧名思義，就是類似一個留言板，上面可以讓人留下自己的話。自己當ui和產品，所以外觀有點慘不忍睹，但是希望你能耐心看完。整個項目很簡單，分為兩個區域，一個是展示別人留言的區域；一個是寫留言的區域，留言成功自動刷新。
- 頭部標題(留言條數)
- 中間是牆體+可移動便簽
- 底部是留下足跡(留言)的板塊 可以自定義展示的昵稱和內容顏色
實現效果：
動手前先技術選型一下
前端：vue2
后端：項目小，直接借助leanclound。一個領先的 BaaS 提供商,提供數據存儲、文件存儲、雲引擎、容器、即時通訊、消息推送、短信、游戲雲等多項服務,為移動開發提供強有力的后端支持。(沒有收取廣告費，而是真的好用，當然我用的是免費試用版，不是企業級)
項目初始化
創建項目
vue create guestbook
我選了vue2
安裝依賴和運行
yarn //等待安裝
yarn run serve
一個vue2項目成功跑起來，到這步還屬於很簡單，沒什么好說的，如果你還不會這些。那你需要看一下Vue和Vue cli的相關文檔
頁面簡單布局
做一個切圖仔該做的事兒，實現上中下三部分，上為標題，中為一個放置便利貼紙的牆體，下為一個提交留言的板塊。
這步就寫幾個標簽和css，比較簡單和基礎就不詳細說了，不過因為我也沒有好的設計圖，這里實現的比較粗糙。
實現留言功能和獲取留言列表
想實現這步，建議先看看Leancloud之JS的SDK安裝指南
安裝
$ npm install leancloud-storage --save
// 或者yarn add leancloud-storage
安裝成功進行下一步引用
引用leancloud-storage
const AV = require('leancloud-storage')
AV.init({
appId: '你自己應用的appId',
appKey: '你自己應用的appKey',
serverURL: '你自己應用的serverURL'
})
this.query = new AV.Query('Message') //查詢調用get或者find
this.message = new AV.Object('Message') //可以調用save保存
分別對應下圖的三個地方
PS：如果你借鑒代碼，我完全沒有意見，不過你要自己申請Leancloud的賬號，然后自己去建應用，而不是直接用我的appId和appKey。我之前分享的個人博客留言系統也是分享了代碼，但是有人用我的賬號，這就很尷尬了，導致數據混亂了，另一個方面說，我是應用擁有者，可以隨時設置白名單或者刪除你的數據的，所以還是悠着點用
這個就是后台表管理的地方
新建一個Message表，然后新加三列，name(存放昵稱的字段)、content(留言內容的字段)、email(可以看留言的聯系方式的字段)
代碼實現
貼幾個重要的代碼實現，至於數據處理的邏輯之類就不詳細說了。
//獲取留言列表
this.query.find().then((todos) => {
//打印出todos看字段形式
})
//保存留言
this.message.save({ ...obj })
補充說明
上面所說已經實現了留言和獲取留言，那取到留言列表的渲染我也不多說了。
-
便利貼的移動我用了組件vue-xiaoer-drag-ele，可拖拽等功能...
-
每次獲取列表我都會有個讓便利貼隨機(隨機橫縱坐標)分布的,第一次我用了這個方法去獲取隨機橫縱坐標，但是有個bug，就是輸入框的值變化的時候都會觸發重新獲取坐標，這點我還沒想明白，雖然沒想懂為什么，但我先換了個方法去實現隨機獲取
獲取單個橫坐標或縱坐標
// 獲取隨機x坐標
getRandomX() {
return parseInt(Math.round(Math.random() * 800))
},
// 獲取隨機y坐標
getRandomY() {
return parseInt(Math.round(Math.random() * 300))
},
獲取坐標數組
// 獲取一個和留言列表一樣length的坐標數組
getXY() {
this.xyArr = this.msgList.map(() => {
return [
Math.round(Math.random() * 800),
Math.round(Math.random() * 300)
]
})
},
PS:服務器部署那些這里就不說明了，我之前也有相關篇幅。還有服務器配置不高，別惡意刷留言等操作，不然我只能被迫關閉了
可以提項目需求或者改進
我剛好發布了個沸點，有人在里面反饋需求。你們盡管提，合理的都實現
已實現或優化
- 字數限制(bug修復)
- 內容錯亂(bug修復)
- 增加字體顏色選擇(小需求)
- 換了便利簽顏色和背景牆(小需求)
- 新增前端分頁(小需求)
- 增加隨機顏色字體(小需求)
待實現
- 等人提合理小需求
本文小結
以上是對留言牆的一些基本說明，各位大佬，如果看見錯誤的地方感謝幫忙指出，謝謝了！
熟能生巧(Practice make perfect!)。
