一個 Vue & Node 的全棧小項目

約學 - 能夠尋找一塊兒自習的小夥伴的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 跨域問題

沒人可問的狀況下查了不少資料，邊查邊嘗試。有些生效了。有些是在沒辦法，就只能迴避問題。最終實現的效果不算太好，不過至少把最初想的寫完了（我想的就是一個很簡陋的樣子……

 

總結

仍是要動手寫一寫代碼，否則你根本不知道你有多菜……

 

參考資料（雖然不少不記得了……

• koa入門

• Mint UI 使用文檔

• node-sqlite3 學習筆記

• 先後端分離 Vue + NodeJS(Koa) + MongoDB，從產品到開發，全棧實踐

• node.js 應答跨域請求實現 （以koa2-cors爲例）

• 簡單實現JS Loading功能