IdealYard

使用 Vue 和 Flask 搭建前后端分离的 RESTful 个人博客。

关于该项目的部分说明可在此处找到👉About IdealYard，如果没有找到需要的内容，请邮件或者 Issues 交流；

⚠ 注意

1. 该博客仅用于学习原理，前端页面并未实现响应式布局，暂时也没有精力去实现，博客内容也没有时间去打理。关于日常的记录博客主要在别院牧志之中更新。

2. 如果你是 Flask 初学者，推荐一本国人书籍给大家《Flask Web开发实战：入门、进阶与原理解析》，本人也是该书的阅读者与受益者。同时建议多去这个网站看看：HelloFlask - Flask资源集合地

3. 由于服务器到期，本博客暂无演示功能，如果有同学部署上线并可以提供演示链接，则非常感谢。暂时请点击下方链接观看简单的功能演示。 使用 Vue 和 Flask 搭建前后端分离的 RESTful 个人博客功能展示_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

4. 由于此处 提到的原因，Flask-RESTful 已经不是一个很好的选择，可能flask-restx 和 Apiflask <国人开发>（注意：由于本框架正在活跃开发期内，使用时请慎重评估） 是一个更好的替代品。如果需要学习，也推荐迁移到维护更加积极的扩展上面去。

注意区分扩展和框架的区别，参阅：请不要把 Flask 和 FastAPI 放到一起比较 | 李辉

既然「FastAPI 应该和基于 Flask 的 Web API 框架比较」，那么合适的比较对象有哪些？Flask-RESTX、Flask-Rebar、flask-apispec、flask-smorest、Flask-RESTful、APIFairy 这些虽然试图做成框架，但在具体实现上仍然是 Flask 扩展。

交流

1. 技术问题请尽量使用Issues · imoyao/idealyard提问回馈社区，参阅：Issue #15 · imoyao/idealyard
2. 在网友的提议下建立了 QQ 群，群号：613922612。但是请注意：该项目为单纯开源，本人并不靠此盈利（有自己的砖要搬），在可预见的未来也没有可能投入到为大家答疑解惑中去。所以该群的目的更多是建立一个小白之间互相交流的途径。如果可能，请在公开场合讨论你的问题而不是简单地抛出截图等待答案。

注意

如非必要，请谨慎考虑是否加入！有部分同学加入后一句话不说又退群，这样申请加群然后又退群的操作会对我造成不必要的打扰。

3. 友善、友善、友善。网络一线牵，珍惜这段缘。请务必和善、诚恳地对待其他同学。

前置条件

Python

3.6+

MySQL

mysql  Ver 14.14 Distrib 5.7.26, for linux-glibc2.12 (x86_64) using  EditLine wrapper

或者

MariaDB

[root@python]# mysql --version
mysql  Ver 15.1 Distrib 5.5.64-MariaDB, for Linux (x86_64) using readline 5.1

创建数据库

开发模式数据库：iyblog_dev，可以在此处修改配置

CREATE USER 'USERNAME'@'localhost' IDENTIFIED BY 'PASSWORD';
-- 如果需要支持emoji，则设置utf8mb4编码。否则使用utf-8编码即可
CREATE DATABASE DATABASENAME CHARSET=utf8mb4;
grant all privileges on DATABASENAME.* to USERNAME@localhost identified by 'PASSWORD';
flush privileges;

环境配置

1. 进入当前目录之后，先通过pip安装pipenv管理包

   pip install pipenv [--user]
   

2. 安装Python依赖

   pipenv install 
   

3. 配置环境变量

   vi .flaskenv
   

4. 编辑dot.env文件,配置环境变量并重命名为.env

   vi dot.env
   mv dot.env .env        # 参考 master 分支
   

前端

node和npm/yarn的安装和换源请网络搜索教程自行完成。

前端部署部分是以npm作为包管理工具进行演示的，如果使用yarn进行包管理，请自行修改（你都使用yarn了，肯定不会找不到package.json的。😉）

前端指令配置请参考front/package.json中的scripts章节。

安装依赖

npm install

开发模式

1. 修改前端文件front/config/dev.env.js中后端请求的地址和端口为实际api地址
2. 启动前端

npm run dev

生产模式

1. 切换目录

cd front

2. 设置prod环境BASE_API地址

// /idealyard/front/config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://192.168.116.21:5000/api"'  // TODO:修改为真实API地址
}

3. 设置router为history模式

// path: front/src/router/index.js:16

const router = new VueRouter({
  // https://router.vuejs.org/zh/guide/essentials/history-mode.html#html5-history-%E6%A8%A1%E5%BC%8F
  // mode: 'history',
  routes: []
})

4. build文件

npm run build

请参阅document/deploy.md 文件了解更多。

Docker 支持

pass

TODO

因为时间关系，还有一些问题没有解决，详见此处
如果有同学需要PR，也可以参考此处已知未解决问题和bug单。

更多

与其在别处仰望,不如在这里并肩。 开发模式配置及说明参见更多文档

代码概览

目录结构和代码量统计参考此处

前端概览

致谢

感谢 G 小姐@Sabiner的鼓励才会产生动手写个人博客的想法。一切缘起，都要从丘处机路过牛家村的那个下午说起……

同时感谢@LeiWong在开发中遇到问题帮助寻找bug并解决问题时付出的时间。

A human being should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building, write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate, act alone, solve equations, analyze a new problem, pitch manure, program a computer, cook a tasty meal, fight efficiently, die gallantly. Specialization is for insects.

一个人应该能够换尿布， 策划战争， 杀猪， 开船， 设计房子， 写十四行诗， 结算账户， 砌墙， 接脱臼的骨头， 安慰濒死的人， 服从命令， 发布命令， 携手合作， 独立行动， 解数学方程， 分析新问题， 铲粪， 电脑编程， 做出可口的饭， 善打架， 勇敢地死去。 只有昆虫才囿于一门。

-- 罗伯特·安森·海因莱因 《时间足够你爱》