登錄注冊





首頁&內(nèi)容發(fā)布







評論轉(zhuǎn)發(fā)






消息










個(gè)人中心

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

后端： Python Flask

數(shù)據(jù)： MariaDB,對象云存儲(chǔ),圖床

網(wǎng)站的內(nèi)容需要登錄使用，其中注冊的第一項(xiàng)為設(shè)置頭像，不少小伙伴及面試官?zèng)]有看見而導(dǎo)致提交時(shí)候失敗，這個(gè)地方是我的疏忽，后期有時(shí)間了進(jìn)行優(yōu)化其顯示與驗(yàn)證功能

用戶登錄成功后進(jìn)入首頁，首頁可以獲取到所有用戶最近發(fā)表的圖文動(dòng)態(tài)，關(guān)注頁面可以獲取到所有關(guān)注用戶的最近動(dòng)態(tài)，用戶可以通過點(diǎn)擊點(diǎn)贊按鈕對動(dòng)態(tài)進(jìn)行點(diǎn)贊操作，點(diǎn)擊轉(zhuǎn)發(fā)按鈕進(jìn)入內(nèi)容轉(zhuǎn)發(fā)頁面，點(diǎn)擊評論按鈕進(jìn)入評論頁面

提供給用戶一個(gè)可以自由發(fā)表與轉(zhuǎn)發(fā)的面板

用戶可以收到與自己發(fā)表或者轉(zhuǎn)發(fā)內(nèi)容相關(guān)的消息，包括點(diǎn)贊，轉(zhuǎn)發(fā)，評論，同時(shí)用戶還可以收到與賬戶關(guān)系相關(guān)的消息，如關(guān)注，私信（有待實(shí)現(xiàn)）

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

通過一個(gè)列表展示用戶之間的關(guān)系，同時(shí)提供給用戶關(guān)注與取消關(guān)注的按鈕

默認(rèn)當(dāng)前目錄為前端目錄(frontend/)

安裝所有的npm依賴

npm install

build

npm run build

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

默認(rèn)當(dāng)前的目錄為后端目錄(backend/)

確保你的服務(wù)器已安裝Python 3 （推薦Python 3.6及以上）及虛擬環(huán)境 venv

創(chuàng)建虛擬環(huán)境

python3 -m venv ./venv

激活虛擬環(huán)境

source ./venv/bin/activate

安裝后端需要的依賴

pip install -r requirements.txt

編輯自己的private_config.py

SECRET_KEY 可以是字符串，通過這個(gè)字符串進(jìn)行密碼加密存儲(chǔ)時(shí)的加鹽

HOST 數(shù)據(jù)庫的地址，默認(rèn)為本地

USERNAME 數(shù)據(jù)庫的連接用戶名，我使用的是root

PASSWORD 數(shù)據(jù)庫的連接密碼

PORT 數(shù)據(jù)庫的監(jiān)聽端口，默認(rèn)為3306

DATABASE 數(shù)據(jù)庫的名稱，需要先建立數(shù)據(jù)庫，不用建立表結(jié)構(gòu)

如果需要使用對象云存儲(chǔ)服務(wù)，則需要對Bucket進(jìn)行相應(yīng)的配置

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

使用Heroku進(jìn)行持續(xù)部署，配置文件參考backend目錄下的Procfile文件

[x] 個(gè)人主機(jī)：Picshare_running on_host

[x] Heroku：Picshare runing on Heroku

[x] Azure: Picshare running on Azure

這是我的第一個(gè)web應(yīng)用，通過77次代碼的提交，不斷爬坑不斷學(xué)習(xí)，從中學(xué)習(xí)到了如何使用H5，CSS3，JS，Python以及服務(wù)器部署 Github源碼