Vue+Flask實現一個圖片分享網站及多平臺部署

PicShare 網站簡介

---

源碼地址

這是一個圖片分享平臺，借鑑Instagram的基礎功能和頁面佈局並進行一點減法的移動端網頁，也是我在移動端乃至Web項目的處女做，文章或者項目有問題的地方歡迎你們多多指正(o^^o)

先來點圖

---

登陸&註冊

首頁&內容發佈

評論&轉發

消息

我的中心

項目技術棧

---

• 前端：Vue.js + Vue Router + Vuex + ElementUI
• 後端： Python Flask
• 數據： MariaDB,對象雲存儲,圖牀

功能模塊

---

登陸&註冊

網站的內容須要登陸使用，其中註冊的第一項爲設置頭像，很多小夥伴及面試官沒有看見而致使提交時候失敗，這個地方是個人疏忽，後期有時間了進行優化其顯示與驗證功能

首頁&關注

用戶登陸成功後進入首頁，首頁能夠獲取到全部用戶最近發表的圖文動態，關注頁面能夠獲取到全部關注用戶的最近動態，用戶能夠經過點擊點贊按鈕對動態進行點贊操做，點擊轉發按鈕進入內容轉發頁面，點擊評論按鈕進入評論頁面

發表&轉發

提供給用戶一個能夠自由發表與轉發的面板

消息

用戶能夠收到與本身發表或者轉發內容相關的消息，包括點贊，轉發，評論，同時用戶還能夠收到與帳戶關係相關的消息，如關注，私信（有待實現）

我的中心

頁面的佈局及內容徹底模仿Instagram的移動端網頁，用戶能夠經過我的中心展現本身或者他人的信息，他人信息的入口爲顯示用戶頭像及用戶名的地方（首頁&關注的內容去，評論內容區，消息詳情區域）

粉絲&關注

經過一個列表展現用戶之間的關係，同時提供給用戶關注與取消關注的按鈕

項目部署

---

前端

默認當前目錄爲前端目錄(frontend/)

1. 安裝全部的npm依賴

   npm install

2. build

   npm run build

   此時前端目錄上一級獲得的dist文件夾就是咱們服務器部署須要的文件夾

後端

默認當前的目錄爲後端目錄(backend/)

1. 確保你的服務器已安裝Python 3 （推薦Python 3.6及以上）及虛擬環境 venv

2. 建立虛擬環境

   python3 -m venv ./venv

3. 激活虛擬環境

   source ./venv/bin/activate

4. 安裝後端須要的依賴

   pip install -r requirements.txt

5. 編輯本身的private_config.py

   1. SECRET_KEY 能夠是字符串，經過這個字符串進行密碼加密存儲時的加鹽
   2. HOST 數據庫的地址，默認爲本地
   3. USERNAME 數據庫的鏈接用戶名，我使用的是root
   4. PASSWORD 數據庫的鏈接密碼
   5. PORT 數據庫的監聽端口，默認爲3306
   6. DATABASE 數據庫的名稱，須要先創建數據庫，不用創建表結構
   7. 若是須要使用對象雲存儲服務，則須要對Bucket進行相應的配置

服務器

1. 使用Nginx進行反向代理，配置文件參考backend目錄下的default文件
2. 使用Heroku進行持續部署，配置文件參考backend目錄下的Procfile文件

部署結果

• 我的主機：Picshare_running on_host
• Heroku：Picshare runing on Heroku
• Azure: Picshare running on Azure

總結

---

這是個人第一個web應用，經過77次代碼的提交，不斷爬坑不斷學習，從中學習到了如何使用H5，CSS3，JS，Python以及服務器部署 Github源碼