Angular4 + Koa2 + MongoDBの個人的なブログを開発

公共の数のオリジナル記事:猿周Xiansenプログラム。このプラットフォームは、私の記事のように、私はマイクロチャンネル公衆番号への関心を歓迎し、定期的に更新されていません。
ファイル

実際には、個人のブログはすでにいくつかのバージョンがあり、非常に満足のいくバージョンされていない、それは常に進化していると常にテストは、まだ正式に発足されていません。フロントとリアエンドは、JSP悪いメンテナンスを分離しない、プラス前後端にはないため、昨年4月と5月に開発されたJSPで書かれた、UIは、スタイルのBaiduのポストバーのPC版を使用されている第一版を覚えますが、数ヶ月のためにプロジェクトの分離は非常に値ではありませんので、メンテナンスをあきらめます。VUE単一コンポーネントは、書き換えられた界面効果が状態の満足度を満たしていませんでしたので、Vueのは、フレームワークの使用の後ろに取り組んで、第二版は、私が捨てラインにされていません。当初、Vue.js +のNode.js + Angular.jsに設定年次休暇の個人的なブログ、第3版を設計しますが、新しい枠組みを見つけるために戻って考えて、そうAngular4はVue.jsを交換し使用し始め、インターフェースがあるため、比較的簡単です個人的に、私は少し簡単なページを好みます。
ファイル

これは、これらの三つの機能の開発について···分類を達成するために、ホームホームフロントデスクで、私は現在、前景と背景の管理システムは、主に早期に、孤立した後、自分の紙ベース、バックエンド管理システムが一時的に公衆にクローズされ作ら示しています。

サーバー開発プロジェクトが3分割されています、クライアント受信表示機能4200とのインタフェース、主な機能上記のように、管理者のバックグラウンド管理システム、4201とのインタフェース、主に削除するために新しい記事を追加するために使用され、新しいラベルを追加し、サーバーサービス、インターフェース4001を使用して、同じフロントエンド、データベース操作にサービスを提供することに関する。
ファイル

私は現在のデータが遅れて記憶するためのMySQLに転送することができる行に、MongoDBの中に直接格納されます。構築するためのプロジェクト全体の環境:Node.jsの+ MongoDBは、我々はMongoDBのサービスを開く必要があり、完全な環境を構築します。
ファイル

フロントとバックオフィス管理システムは、システムを使用すると、MongoDBのに持っているサーバーサービス、サーバーサービスの動作を開始する必要があるので、サーバーサービスに依存しているので、最初のオープンMongoDBは、その後、実行NPM DEVオープンサーバサービスからです。
ファイル

実際には、すべてのデータベース運用管理の背景と前景の表示をカプセル化し、メインサーバーサービス。開発言語としてのNode.jsを使用してサーバー側のNode.jsを使って開発するので、自分のプロジェクトのために現在責任ので。利便性のために私は、クライアント、管理、サーバーコードは内部のプロジェクト構造に三つの部分に書かれている。図に示されているサーバーのサービス構造だったことを維持します
ファイル

クライアント・サーバ・ポートとしてAngular4フレームワークのアーキテクチャを使用してクライアントの受信ディスプレイインタフェース、4200、4001、ダイレクトアクセスクロスドメイン問題のサーバーのサービスポートがあるでしょう場合。だから私は、プロキシのプロキシ、ポート4001へのすべてのデータベースクエリのプロキシフォアグラウンド4200ポート動作を使用するので、サーバが前提サービスをオンにする必要があります、またはエージェントは、警告が表示されます失敗します。
ファイル

打ち上げは成功したが、データベース内のすべてのデータを読み取ることはできませんがため、4001:私は、サービスのないサーバがクライアントサービスが正常に開始され始め開くが、報告された警告の下:ローカルホストへ4200のプロキシ要求:ないローカルホストから実際に、その理由は、あなたのサーバーサービスが開始されないということですので、サービスは通常のショーすることができ、フロントエンドインターフェースを見つけるオープンサーバー・クライアント・サービスの後に再開されたときには、開いているポート4001ではなかったです。彼はモバイル側、実際には、あなたが使用できる多くの方法がありますが、ブートストラップやレムを適応ブログに時間がかかるだろう、今の携帯端末を使っている人の数は、よりになりますので、そう、私のプロジェクトは、実際には比較的簡単ですが、私はすべてのインターフェイスを終了するには、showを移動しました個別に設計されたCSSは、フレームワークを使用すると、開発の効率を向上させるために多くのことを行いますが、最終的に、私はフレームワークを使用していなかったので、彼らは、何かを学ぶことができるように、開発プロジェクトの目的はあります。
ファイル

プロジェクトの構造が複雑であるので、フロントデスクでは、より多くの機能表示したよう。具体的な設計プロセスは、ナビゲーションバーの異なる機能をクリックすると、別のインタフェースが異なる表示するためにはsrc /アプリ/ページにジャンプします、PCとモバイルの辺に異なる設計スタイルは、それぞれのCSSのナビゲーションバーにあるapp.component.html効果。ポストビューコメント機能はGithubの問題は、コンクリートが公共の数に私の記事を見ることができます--gitmentベースのコメントシステムを使用しています。https://mp.weixin.qq.com/s?__biz=MzU5MTc1ODA0OQ==&mid=2247483833&idx = 1&SN = ce7dee57c3836ffba2aae3088ff8c3cd&chksm = fe2b5637c95cdf21c29feb442e7a33da7aa10ac435dfe37e14744829b5118d5d13aaea86801c&トークン= 2114299132&LANG = zh_CNに#RD
ファイル

レセプションには、(PC、モバイル端部を含む)のスクリーンショットを示しています。
ファイル

ファイル

ファイル

ファイル

ファイル

管理者の管理インタフェース、ダイレクトアクセスクロスドメインの問題があるだろうかのようにAngular4は、建築、管理サーバーのポート4201、サーバのポート4001のサーバ、クライアントとサーバで使用します。だから私は、データベースサーバ4001のサービスポートの操作にすべてのエージェントのプロキシプロキシ、楽屋管理ポート4201を使用していた、サーバが前提のサービスをオンにする必要があります、またはエージェントは、警告が表示されます失敗します。

サービス管理者の構造:
ファイル

管理者の管理投稿は、主にここで公開だけでなく、ラベルを保存するには、管理インターフェイスは、オープン外国では現在ありませんので、管理者を設定し、ログイン画面を設計し、現在の管理インターフェイスは、ログオンするアカウント。

ファイル

ログイン認証は、管理インターフェイスを入力します成功すると、あなたがマークダウンサポート機能を使用することができ、リリース、入力ボックスに統合値下げプラグインを投稿することができます。

ファイル

背景管理システム第二は、メモを追加する機能があり、この機能は何も言うことはありません、データ操作のみを保存することです。
ファイル

最後の特徴は、背景管理ビューは、ラベルの分類に従ってサポートを見つけるために記事をアーカイブします

ファイル

背景管理システムは、他のために解放されているので、新しい記事は主に、PC側にではなく、携帯端末の適応に適用されている使用します。ないローカルテストでは、いくつかのプロキシバグがあるので実際には、ブログ機能の個人的なブログはすでに実現されている、テストを生成するテスト、テストにオンラインで公開する準備ができていない問題に対処し、ネットワークの普及の中、これらの日になるだろうが、それは思われました最近の試運転が正式に発売されていないので、ネットワークの普及率が非常に遅いのアクセスの問題は、ある範囲内の問題は、完全があるでしょう。この記事では、ソースを説明するのに特異的ではない、ソースコードは、独自の研究を調達するために個人的に私に連絡したかったかもしれません。定期的にグループ内の学習リソースを更新し、私の技術交流グループへようこそ。公共の二次元コードグループ番号を見てください。

プログラムAPE周Xiansen:いいえ、私は個人的に国民に注意を歓迎します
ファイル

おすすめ

転載: www.cnblogs.com/niyueling/p/11563049.html