Vue2
とFlask
使用して、フロントエンドとバックエンドが分離された RESTful 個人ブログを構築します。
プロジェクトに関する手順の一部は、IdealYard についてこちらでご覧いただけます。必要なものが見つからない場合は、電子メールまたは問題点でご連絡ください。
このブログは原則を学ぶためだけのものです。フロントエンド ページにはレスポンシブ レイアウトがまだ実装されておらず、ブログのコンテンツを管理する時間がありません。美園牧会記録では日々の記録を中心にブログを更新しています。
Flask の初心者には、中国語の本「Flask Web Development in Practice: Getting Started, Advanced and Principle Analysis」をお勧めします。私もこの本の読者であり、恩恵を受けています。同時に、この Web サイトにもっとアクセスすることをお勧めします: HelloFlask - Flask リソースの収集場所
サーバーの有効期限が切れたため、このブログにはデモ機能がありません。オンラインでデプロイしている人がいて、デモのリンクを提供していただければ幸いです。現時点では、以下のリンクをクリックして簡単な機能のデモンストレーションをご覧ください。 VueとFlaskを使って前端と後端を分離したRESTful個人ブログ機能表示を構築_bilibili(゜-゜)つろ乾杯~-bilibili
ここで述べた理由により、Flask-RESTful はもはや良い選択ではなくなりました。おそらく、flask-restx と Apiflask <中国開発> (注: このフレームワークは現在開発中であるため、使用する際は慎重に評価してください) がより信頼性の高い代替手段となります。良い代替品です。学習する必要がある場合は、より積極的にメンテナンスされている拡張機能に移行することもお勧めします。
拡張機能とフレームワークの違いに注意してください: Flask と FastAPI を一緒に比較しないでください | Li Hui を参照してください。
「FastAPIはFlaskベースのWeb APIフレームワークと比較する必要がある」ということで、適切な比較対象は何でしょうか? Flask-RESTX、Flask-Rebar、flask-apispec、flask-smorest、Flask-RESTful、および APIFairy はフレームワークであることを目指していますが、特定の実装という点では依然として Flask 拡張機能です。
知らせ
不要な場合は加入するかどうかよく検討してください!グループに参加したのに何も言わずにグループを去ってしまう生徒もいます。グループへの参加を申請してからグループを離れるというこの操作は、私に無用な迷惑を与えます。
3.6+
mysql Ver 14.14 Distrib 5.7.26, for linux-glibc2.12 (x86_64) using EditLine wrapper
または
[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;
現在のディレクトリに入ったら、まずpipenv管理パッケージをpip経由でインストールします。
pip install pipenv [--user]
Python の依存関係をインストールする
pipenv install
環境変数を構成する
vi .flaskenv
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
front/config/dev.env.js
内のバックエンドによって要求されたアドレスとポートを実際のAPIアドレスに変更します。npm run dev
cd front
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地址
}
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 : [ ]
} )
npm run build
詳細については、 document/deploy.md
ファイルを参照してください。
合格
時間の制約により、まだ解決されていない問題がいくつかあります。詳細については、ここを参照してください。学生がPR
必要とする場合は、ここで既知の未解決の問題とbug
シートを参照してください。
他を見上げるのではなく、ここで肩を並べた方が良いでしょう。 開発モードの構成と手順については、その他のドキュメントを参照してください。
ディレクトリ構造とコード量の統計はここを参照してください
Gさん @Sabiner の励ましのおかげで、個人ブログを書くことを思いつきました。すべては午後、邱忠基が牛家村を通りかかったときから始まりました...
また、開発中に問題が発生したときに、 bug
発見と問題の解決に時間を費やしてくれた @LeiWong にも感謝します。
人間はおむつを替え、侵略を計画し、豚を屠殺し、船を操縦し、建物を設計し、ソネットを書き、帳簿を付け、壁を築き、骨を立て、死にかけている人を慰め、命令を受け、何かを与えることができなければなりません。命令し、協力し、単独で行動し、方程式を解き、新しい問題を分析し、肥料を売り、コンピュータをプログラムし、おいしい食事を作り、効率的に戦い、勇敢に死ぬのが専門です。
人間はおむつを替え、戦争を計画し、豚を殺し、船を操縦し、家の設計をし、ソネットを書き、精算をし、壁を築き、脱臼した骨をつなぎ、瀕死の人を慰め、命令に従うことができなければならない。命令を出し、協力し、独立して行動し、数式を解き、新しい問題を分析し、肥料をかき集め、コンピュータープログラミングをし、おいしい食事を作り、戦いに強く、勇敢に死にます。 昆虫のみが 1 つのカテゴリに限定されます。
-- ロバート・アンソン・ハインライン、「Time Enough to Love」