乐趣区

VueFlask实现一个图片分享网站及多平台部署

jiezi

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 源码

退出移动版