All Projects → wangy8961 → Flask Vuejs Madblog

wangy8961 / Flask Vuejs Madblog

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

Projects that are alternatives of or similar to Flask Vuejs Madblog

Vue Visualization
Vue 结合 D3.js 进行数据可视化开发的练手案例
Stars: ✭ 125 (-76.89%)
Mutual labels:  webpack, axios, vue-router
Vue Shop
VUE移动小商城
Stars: ✭ 148 (-72.64%)
Mutual labels:  webpack, axios, vue-router
Vue Todos
vue最新实战项目教程,从零开始,一步一个脚印,循序渐进。跟着我一起学习vue吧!
Stars: ✭ 1,659 (+206.65%)
Mutual labels:  webpack, axios, vue-router
Vuedemo sell eleme
ele by vue2.x 🐧
Stars: ✭ 1,349 (+149.35%)
Mutual labels:  webpack, axios, vue-router
Vue Video
vue + vue-router + vuex + (fetch->axios)
Stars: ✭ 251 (-53.6%)
Mutual labels:  webpack, axios, vue-router
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (-80.96%)
Mutual labels:  webpack, axios, bootstrap4
Laravue
Admin dashboard for enterprise Laravel applications built by VueJS and Element UI https://laravue.dev
Stars: ✭ 1,964 (+263.03%)
Mutual labels:  webpack, axios, vue-router
Vue Spa
vue-spa : vue + vue-router + axios + vuex + vux 快速成型移动端项目,直接使用。欢迎star
Stars: ✭ 46 (-91.5%)
Mutual labels:  webpack, axios, vue-router
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (-53.97%)
Mutual labels:  webpack, axios, vue-router
Vue Blog
🎉 基于vue全家桶 + element-ui 构建的一个后台管理集成解决方案
Stars: ✭ 208 (-61.55%)
Mutual labels:  webpack, axios, vue-router
Xyy Vue
🎨基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》
Stars: ✭ 1,316 (+143.25%)
Mutual labels:  webpack, axios, vue-router
Vue Admin Design
基于vue + elementUI的管理系统模板
Stars: ✭ 279 (-48.43%)
Mutual labels:  webpack, axios, vue-router
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+140.67%)
Mutual labels:  webpack, axios, vue-router
Todolist Frontend Vuejs
Front-end application for Todolist Web application built with Laravel and Vue.js
Stars: ✭ 120 (-77.82%)
Mutual labels:  webpack, axios, vue-router
Putongoj Fe
The front end of the Putong Online Judge -- An online judge with nothing special
Stars: ✭ 74 (-86.32%)
Mutual labels:  webpack, axios, vue-router
Vue Cli Multi Page
基于vue-cli模板的多页面多路由项目,一个PC端页面入口,一个移动端页面入口,且有各自的路由, vue+webpack+vue-router+vuex+mock+axios
Stars: ✭ 145 (-73.2%)
Mutual labels:  webpack, axios, vue-router
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+34.75%)
Mutual labels:  webpack, axios, vue-router
Vue2 Study
vue 的webpack配置,按需加载,element-ui,vuex
Stars: ✭ 16 (-97.04%)
Mutual labels:  webpack, axios, vue-router
Vue Cnode
🚀 基于vue3 function-based 构建cnode社区
Stars: ✭ 192 (-64.51%)
Mutual labels:  webpack, axios, vue-router
Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256 (-52.68%)
Mutual labels:  webpack, axios, vue-router

Flask Vue.js全栈开发

Python Vue.js vue-router axios Bootstrap4 webpack

测试地址: http://120.77.33.143

RESTful API: http://120.77.33.143:5000/api/posts (用 Firefox 查看返回的 JSON 数据更佳),或者将仓库内的 flask-vuejs-madblog.postman_collection.json 导入你的 Postman 工具

本系列的最新代码及使用方式将持续更新到: https://madmalls.com/blog/post/latest-code/

pic 01 pic 02 pic 03

1. Flask Vue.js全栈开发教程系列

2. 如何使用

Github 仓库中只包含前半部分代码,获取最新完整代码请前往: Flask Vue.js全栈开发

2.1 git clone

Github 仓库中只包含前半部分代码,想获取最新完整代码请前往: https://madmalls.com/blog/post/latest-code/

$ git clone https://github.com/wangy8961/flask-vuejs-madblog.git

2.2 Backend

(1)提供 .env 文件

复制 backend/.env.example,并重命名为 backend/.env,然后修改里面的邮箱配置,具体参考: https://madmalls.com/blog/post/email-support/#12-qq

(2)修改 config.py 文件

修改 back-end/config.py 中的配置,比如 SECRET_KEYSQLALCHEMY_DATABASE_URI

ADMINS 这个配置一定要修改!

ADMINS = ['[email protected]']  # 管理员的邮箱地址

因为在这个列表中的邮箱地址,在注册时,会自动赋予管理员的角色

(3)启动后端 Flask 应用

Open a new terminal:

$ cd back-end
$ python -m venv venv
$ source venv/bin/activate  # 如果是Windows环境,则执行 venv\Scripts\activate
(venv)$ pip install -r requirements.txt

# Flask-Migrate create database
(venv)$ flask db upgrade

# Pre deploy, eg. insert roles
(venv)$ flask deploy

# create back-end/.env file, like this
FLASK_APP=madblog.py
FLASK_DEBUG=1

(venv)$ flask run

浏览器访问: http://localhost:5000/api/ping,比如返回 "Pong!" 则说明正常

2.3 Frontend

(1)安装 Node.js

请前往 官方网站 下载并安装 LTS 版本

安装好后,由于 npm 命令使用的国外镜像,在国内下载依赖包时很慢,这里换成 淘宝 NPM 镜像

打开 cmd

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之后,用 cnpm 来代替 npm 命令

(2)运行前端应用

Open a new terminal:

$ cd front-end
$ cnpm install
$ npm run dev

浏览器访问: http://localhost:8080

2.4 注册管理员账号

浏览器访问: http://localhost:8080/#/register 注册你的管理员账号 (注册时填写的 Email 在配置文件 config.pyADMINS 中即可!)

然后登录你的这个邮箱,去激活账号。Have fun

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].