摘要：網站簡介源碼地址這是一個圖片分享平臺，借鑒的基礎功能和頁面布局并進行一點減法的移動端網頁，也是我在移動端乃至項目的處女作，文章或者項目有問題的地方歡迎大家多多指正先來點圖登錄注冊首頁內容發布評論轉發消息個人中心項目技術棧前端后端數據對象云存

源碼地址

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

登錄&注冊

首頁&內容發布

評論&轉發

消息

個人中心

前端：Vue.js + Vue Router + Vuex + ElementUI

后端： Python Flask

數據： MariaDB,對象云存儲,圖床

網站的內容需要登錄使用，其中注冊的第一項為設置頭像，不少小伙伴及面試官沒有看見而導致提交時候失敗，這個地方是我的疏忽，后期有時間了進行優化其顯示與驗證功能

用戶登錄成功后進入首頁，首頁可以獲取到所有用戶最近發表的圖文動態，關注頁面可以獲取到所有關注用戶的最近動態，用戶可以通過點擊點贊按鈕對動態進行點贊操作，點擊轉發按鈕進入內容轉發頁面，點擊評論按鈕進入評論頁面

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

用戶可以收到與自己發表或者轉發內容相關的消息，包括點贊，轉發，評論，同時用戶還可以收到與賬戶關系相關的消息，如關注，私信（有待實現）

頁面的布局及內容完全模仿Instagram的移動端網頁，用戶可以通過個人中心展示自己或者他人的信息，他人信息的入口為顯示用戶頭像及用戶名的地方（首頁&關注的內容去，評論內容區，消息詳情區域）

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

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

安裝所有的npm依賴

npm install

build

npm run build

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

默認當前的目錄為后端目錄(backend/)

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

創建虛擬環境

python3 -m venv ./venv

激活虛擬環境

source ./venv/bin/activate

安裝后端需要的依賴

pip install -r requirements.txt

編輯自己的private_config.py

SECRET_KEY 可以是字符串，通過這個字符串進行密碼加密存儲時的加鹽

HOST 數據庫的地址，默認為本地

USERNAME 數據庫的連接用戶名，我使用的是root

PASSWORD 數據庫的連接密碼

PORT 數據庫的監聽端口，默認為3306

DATABASE 數據庫的名稱，需要先建立數據庫，不用建立表結構

如果需要使用對象云存儲服務，則需要對Bucket進行相應的配置

使用Nginx進行反向代理，配置文件參考backend目錄下的default文件

使用Heroku進行持續部署，配置文件參考backend目錄下的Procfile文件

個人主機：Picshare_running on_host

Heroku：Picshare runing on Heroku

Azure: Picshare running on Azure

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