約學 - 可以尋找一起自習的小伙伴的Web APP
一個基於 Vue & Node 的移動端全棧小項目
在線演示（請使用移動端查看效果）
源碼地址： https://github.com/G-lory/yuexue
(感覺要被玩壞了…我知道有很多bug…發現bug可以告訴我……謝謝dalao們……)
部分頁面截圖（不許吐槽我首頁的背景圖片！
技術棧
前端：Vue2 vue-router Webpack axios sass MintUI Iconfont 后端：NodeJS(v8.11.1) Koa2 Sqlite node-cache log4js
啟動項目
我將前后端項目到同一個github repo了
# 克隆項目 git clone https://github.com/G-lory/yuexue.git # 啟動后端項目 # 到后端項目 cd yuexue-server # 安裝依賴 可以通過 npm install --registry=https://registry.npm.taobao.org 重新指定 registry 來解決 npm 安裝速度慢的問題 npm install # 運行后端項目 打開瀏覽器訪問 http://localhost:3001 npm run start # 啟動前端項目 # 到前端目錄 cd yuexue-frontend # 安裝依賴 npm install # 熱加載啟動 打開瀏覽器訪問 http://localhost:8080 （保證后端項目已啟動 npm run dev # 生產環境壓縮打包 npm run build
實現功能
- 郵箱注冊
- 郵箱密碼登錄
- 查看個人信息
- 修改個人信息
- 上傳頭像
- 退出登錄
- 密碼找回
- 首頁信息展示
- 未讀消息提示
- 發布邀約
- 刪除已發布邀約
- 查看邀約
- 根據城市信息和關鍵字搜索邀約
- 接受邀約
- 密碼加密存儲
- 打印日志且保存到文件
未實現 & bug
- 邀約列表頁在某些瀏覽器中 列表不能完全加載
- 后端代碼未加單元測試
項目結構
前端
后端
其他
寫項目之前是不會 nodejs 的，因為有Java基礎，所以目錄結構在參考他人的基礎上，就着Java的MVC結構寫的。
單元測試實在不會（想）寫了。
開始數據庫使用的是Mysql，但是由於我的服務器內存太小了裝不上，改成了sqlite…（全部寫完又修改的……QAQ）
同樣的是問題是保存驗證碼之前還想着用一下redis（可以假裝很厲害）后來使用了node-cache
遇到了很多很多問題，包括但不限於
- 移動端滑動穿透的問題
- 仿移動端頁面切換效果，這兩個問題可見（https://www.cnblogs.com/wenruo/p/9948348.html）
- sqlite 數據庫操作問題 （后來發現是引用文件時要使用絕對路徑）
- 某些設備 #加8位十六進制數字表示透明色不生效 改成 rgba 修復
- 開始使用HTML自帶表單，通過 Ajax 提交，提交表單會導致刷新頁面，使的用 iframe 修復，后面全部刪除了表單
- 列表無限加載有些時候不生效（未修復，因為好像大部分都沒問題
- 跨域問題，包括 cookie 跨域問題
沒人可問的情況下查了很多資料，邊查邊嘗試。有些生效了。有些是在沒辦法，就只能回避問題。最終實現的效果不算太好，不過至少把最初想的寫完了（我想的就是一個很簡陋的樣子……
總結
還是要動手寫一寫代碼，不然你根本不知道你有多菜……