Flask-Vuejs-Madblog 项目教程

34 0 0

Flask-Vuejs-Madblog 项目教程

flask-vuejs-madblog基于 Flask 和 Vue.js 前后端分离的微型博客项目，支持多用户、Markdown文章（喜欢/收藏文章）、粉丝关注、用户评论（点赞）、动态通知、站内私信、黑名单、邮件支持、管理后台、权限管理、RQ任务队列、Elasticsearch全文搜索、Linux VPS部署、Docker容器部署等项目地址:https://gitcode.com/gh_mirrors/fl/flask-vuejs-madblog

1. 项目的目录结构及介绍




flask-vuejs-madblog/


├── back-end/


│   ├── app/


│   │   ├── __init__.py


│   │   ├── models.py


│   │   ├── views.py


│   │   └── ...


│   ├── config.py


│   ├── requirements.txt


│   └── run.py


├── front-end/


│   ├── public/


│   ├── src/


│   │   ├── assets/


│   │   ├── components/


│   │   ├── router/


│   │   ├── store/


│   │   └── main.js


│   ├── package.json


│   └── ...


├── LICENSE


├── README.md


└── ...

目录结构介绍

back-end/: 后端 Flask 项目的根目录。
app/: 包含 Flask 应用的主要文件。
__init__.py: 初始化 Flask 应用。models.py: 定义数据库模型。views.py: 定义视图函数。 config.py: 配置文件。requirements.txt: 项目依赖包列表。run.py: 启动文件。 front-end/: 前端 Vue.js 项目的根目录。
public/: 公共资源文件。src/: 源代码目录。
assets/: 静态资源文件。components/: Vue 组件。router/: 路由配置。store/: Vuex 状态管理。main.js: 入口文件。 package.json: 前端项目依赖配置。 LICENSE: 项目许可证。README.md: 项目说明文档。

2. 项目的启动文件介绍

后端启动文件

back-end/run.py 是后端 Flask 项目的启动文件。内容如下：




from app import create_app


 


app = create_app()


 


if __name__ == '__main__':


    app.run(debug=True)

前端启动文件

front-end/src/main.js 是前端 Vue.js 项目的入口文件。内容如下：




import Vue from 'vue'


import App from './App.vue'


import router from './router'


import store from './store'


 


Vue.config.productionTip = false


 


new Vue({


  router,


  store,


  render: h => h(App)


}).$mount('#app')

3. 项目的配置文件介绍

后端配置文件

back-end/config.py 是后端 Flask 项目的配置文件。内容如下：




import os


 


class Config:


    SECRET_KEY = os.environ.get('SECRET_KEY') or 'hard to guess string'


    SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL') or 


        'sqlite:///' + os.path.join(basedir, 'data.sqlite')


    SQLALCHEMY_TRACK_MODIFICATIONS = False


 


class DevelopmentConfig(Config):


    DEBUG = True


 


class ProductionConfig(Config):


    DEBUG = False


 


config = {


    'development': DevelopmentConfig,


    'production': ProductionConfig,


    'default': DevelopmentConfig


}

前端配置文件

front-end/package.json 是前端 Vue.js 项目的依赖配置文件。内容如下：




{


  "name": "flask-vuejs-madblog",


  "version": "1.0.0",


  "private": true,


  "scripts": {


    "serve": "vue-cli-service serve",


    "build": "vue-cli-service build",


    "lint": "vue-cli-service lint"


  },


  "dependencies": {


    "core-js": "^3.6.5",


    "vue": "^2.6.11",


    "vue-router": "^3.2.0",


    "vuex": "^3

# 随笔