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