シングルページブログのフロントエンドからバックエンドへ

バックエンドのフロントエンドがなく、単一ページのアプリケーションが書けません...
単一ページアプリケーションの概念は長い間提案されており、vue、angular、reactに基づいても、みんなが耳を傾けたり、身を置いたりして体得していると信じています.結局、開発環境の構築からフロントエンドの各コンポーネントの開発、動作のインタラクション、バックエンドとのデータインタラクションまで、独自に開発すると、多くの問題に直面することは避けられない.この過程では、学習、共有が必要な知識点を記録する価値があります.
もしまだ自分で1ページのアプリケーションを実現したことがないならば、それでは私のいっしょに交流学習を参考にすることができて、もしすでに軽自動車が熟知しているならば、私に欠点をつけるを歓迎します
SITUATION
初心とは、上記のように、自分が学んだ知識を総合して、前後を通じています.しかし、結果は喜ばしい.当初は自分がreactできると思っていたが、アプリを書くのは大変だった.自分を偽のスタックエンジニアとして一つ一つの穴を踏んだとき、道が遠いことに気づいた.
TASK
フロントエンドとして、hexoを使用して自分のブログ==を生成することに満足していない.少なくともGatsbyである.それは自分を喜ばせるブログシステムを開発することができます.
ACTION
開発環境の構築
フロントエンドはreact、antd、dvaなどのreact生態圏などのフレームワークに基づいており、構築ツールの第一選択は必然的にwebpackである.足場を使って開発するとき、問題が発生したと信じています.やはりソースコードをかき集める必要があります.私たちは自分で開発環境を構築して、webpackの各構成を熟知したほうがいいです.

【シングルページブログのフロントエンドからバックエンドへ】環境構築

Dva+Antd導入によるフロントエンドインタラクション

【シングルページブログフロントエンドからバックエンドへ】DVA+ANTDに基づいてブログフロントバックグラウンドインタフェースを構築

ベースkoa@2+mongodb+passportバックエンドロジックを実現
バックエンドが単純な添削であれば、私たちの初心に反します.基本的なAuth 2を実現する.0権限認証は、基本的なビジネスロジックやデータ層の分離なども行います.

【シングルページブログのフロントエンドからバックエンドへ】PassportとKoa@2の権限検証とDVAのModel設計

Draftjsを導入してリッチテキストエディタを実現
Draft.jsは、Facebookオープンソースのリッチテキストエディタを構築するためのJavaScriptフレームワークです.Bearノートのようなwebエンドエディタを実現することができ、お勧めします.
RESULT
最初はバックエンドでexpressを使っていましたが、nodejsフレームワークに慣れていない方はこのgithub倉庫を参考にして、expressを手に入れることができます.その後koaを用いてプロジェクト全体を再構築し,async関数で非同期ストリームを整理する際に窃喜した.この文章を書いているうちに、突然自分のこのプロジェクトに2つの星があることに気づいて、とても嬉しいです.ここ数日の疲れは全くありません!
プロジェクトはすでにオンラインに配置して、プレゼンテーションアドレステストアカウントを表示します:{username: 'test', password: 'test'}予定計画

前後同構造、サービス側レンダリング

flowを導入してjsに対して静的タイプの検査

を行う

テストコード

を追加

完全文書

最後に
スター、pr、issuesへようこそ...