idealyard

IdealYard

Use Vue2 and Flask to build a RESTful personal blog with separate front-end and back-end.

Some instructions about the project can be found here About IdealYard. If you do not find what you need, please communicate via email or Issues;

Notice

1. This blog is only for learning principles. The front-end page does not implement responsive layout. I don’t have the energy to implement it yet, and I don’t have the time to take care of the blog content. Blogs about daily records are mainly updated in Biyuan Pastoral Records.

2. If you are a beginner of Flask, I recommend a Chinese book to you: "Flask Web Development in Practice: Getting Started, Advanced and Principle Analysis". I am also a reader and beneficiary of this book. At the same time, it is recommended to visit this website more: HelloFlask - Flask resource collection place

3. Due to the expiration of the server, this blog does not have a demonstration function. If anyone has deployed it online and can provide a demonstration link, I would be very grateful. For now, please click on the link below to watch a simple functional demonstration. Use Vue and Flask to build a RESTful personal blog function display that separates the front and back ends_bilibili(゜-゜)つロCheers~-bilibili

4. Due to the reasons mentioned here, Flask-RESTful is no longer a good choice. Maybe flask-restx and Apiflask <Chinese development> (note: since this framework is under active development, please evaluate carefully when using it) are a more reliable alternative. Good substitute. If you need to learn, it is also recommended to migrate to an extension that is more actively maintained.

Pay attention to distinguishing the difference between extensions and frameworks. Please refer to: Please do not compare Flask and FastAPI together | Li Hui

Since "FastAPI should be compared with the Web API framework based on Flask", what are the suitable comparison objects? Although Flask-RESTX, Flask-Rebar, flask-apispec, flask-smorest, Flask-RESTful, and APIFairy try to be frameworks, they are still Flask extensions in terms of specific implementation.

comminicate

1. For technical issues, please try to use Issues · imoyao/idealyard to ask questions and give back to the community, see: Issue #15 · imoyao/idealyard
2. A QQ group was established at the suggestion of netizens, group number: 613922612. But please note: this project is purely open source. I do not make any profit from it (I have my own bricks to move), and it is not possible to devote myself to answering questions for everyone in the foreseeable future. Therefore, the purpose of this group is more to establish a channel for newbies to communicate with each other. If possible, discuss your issue in a public setting rather than simply throwing out screenshots and waiting for an answer.

Notice

If it is not necessary, please carefully consider whether to join! Some students joined the group and then left the group without saying a word. This operation of applying to join the group and then leaving the group would cause unnecessary disturbance to me.

3. Be friendly, be friendly, be friendly. The Internet is a thread, cherish this fate. Please be kind and sincere to other students.

Preconditions

Python

3.6+

MySQL

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

or

MariaDB

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

Create database

Development mode database: iyblog_dev , you can modify the configuration here

 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;

Environment configuration

1. After entering the current directory, first install the pipenv management package through pip

   pip install pipenv [--user]

2. Install Python dependencies

   pipenv install 

3. Configure environment variables

   vi .flaskenv

4. Edit the dot.env file, configure environment variables and rename it to .env

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

front end

Please search for tutorials on the Internet to install and change the sources of node and npm/yarn by yourself.

The front-end deployment part is demonstrated using npm as a package management tool. If you use yarn for package management, please modify it yourself (if you use yarn, you will definitely not find package.json .)

For front-end command configuration, please refer to the scripts chapter in front/package.json .

Install dependencies

npm install

development mode

1. Modify the address and port requested by the backend in the front-end file front/config/dev.env.js to the actual api address
2. Start the frontend

npm run dev

production mode

1. Switch directory

 cd front

2. Set prod environment BASE_API address

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

3. Set router to history mode

 // 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 file

npm run build

Please see the document/deploy.md file to learn more.

Docker support

pass

TODO

Due to time constraints, there are still some issues that have not been resolved. Please see here for details. If any students need PR , you can also refer to the known unresolved issues and bug sheets here.

More

Rather than looking up elsewhere, it is better to stand shoulder to shoulder here. For development mode configuration and instructions, see more documents

Code overview

Directory structure and code volume statistics refer here

Frontend overview

Acknowledgments

Thanks to Ms. G @Sabiner’s encouragement, I came up with the idea of ​​writing a personal blog. Everything started from the afternoon when Qiu Chuji passed by Niujia Village...

Also thank @LeiWong for the time he spent to help find bug and solve problems when he encountered problems during development.

---

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.

A man should be able to change a diaper, plan a war, kill a pig, sail a ship, design a house, write a sonnet, settle an account, build a wall, connect dislocated bones, comfort a dying man, obey orders, issue orders, and work together. , act independently, solve mathematical equations, analyze new problems, shovel manure, computer programming, make delicious meals, be good at fighting, and die bravely. Only insects are restricted to one category.

-- Robert Anson Heinlein, "Time Enough to Love"