初心者が Vue.js + Node.js を通じて個人ブログを作成するにはどうすればよいですか-jsチュートリアル-php.cn

初心者が Vue.js + Node.js を通じて個人ブログを作成するにはどうすればよいですか

零到壹度

リリース： 2018-03-26 10:34:47

オリジナル

2866 人が閲覧しました

この記事では主に初心者が Vue.js + Node.js を使って個人ブログを作成する方法をサンプルコードを通して詳しく紹介しており、皆さんにとって一定の参考と学習価値があることを願っています。

Scheme

UIスタイル: 主にRandyのブログのスタイルを参照し、私自身のアイデアを少し追加します(主に単なる怠惰のため)。
フロントエンドページ: Vue2.0 ベースのレスポンシブ SPA、あれ?理由を尋ねますか？「About」の自己紹介のように、私は Vue SPA 開発が得意だと思っています。
バックエンド: フルスタックへのフロントエンドエンジニアのショートカット: Node.js。インターフェイスの作成と静的ページのレンダリングを担当します。
データベース: 当初の計画では MongoDB を使用する予定でしたが、スケジュールを守るためにデータベースはまったく使用されませんでした。これが最初のバージョンです。
記事: マークダウン構文を使用して記事を作成し、それを HTML に変換する hexo の方法を参照してください。 md形式の記事もローカルで編集してサーバーにアップロードします。Node.jsはmdファイルを直接読み込んでhtmlに変換してフロントに返すため、当面はデータベースは必要ありません。
導入: AWS、1 年間無料! 1年後に何をするか尋ねますか？神のみぞ知る! もしかしたら 1 年で、私は始めてから諦めることができたのかもしれません。

出航!出航する！

ページレイアウト: Cloud のブログを自分の目で見て、簡単な紹介をしてください。最初の画面は、表示領域全体をカバーする幅と高さ 100% の壁紙で、コンテンツにはブログ名、サブタイトル、およびブロガーに関する 3 つのリンクが含まれており、下向き矢印をクリックして 2 番目の画面のメイントピックに移動します。 [Home]、[Article]、[Works]、[About]の4つのタブモジュールに分かれています。デフォルトは[ホームページ]で最新の記事詳細、[記事]は記事一覧、クリックして記事内容を読む、[作品]は作品一覧、この部分はまだ完成していません、[概要]は紹介文ですブロガーについて。 PS: この壁紙を見つけるまで、朝から Google 画像検索の最初の画面で壁紙を探していましたが、携帯電話の壁紙が中央に表示され、表示される領域全体をカバーしていることを考えると、非常に満足しています。 PC や携帯電話で見栄えのする写真を見つけるのは簡単ではありません。ところで、ブロガーは依然として患者を選ぶのに苦労しています。
フロントエンド開発: Vue スキャフォールディングから始めます

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack blog
# 安装依赖，走你
$ cd blog
$ npm install
$ npm run dev

ログイン後にコピー

次に、SPA ルーティング用の Vue-router と、Ajax 用の vue-resource または axios をインストールします。
```
$ npm install --save vue-router
$ npm install --save axios
# vue官方推荐的ajax库不再是vue-resource,而是axios
```
ログイン後にコピー
次に、最初のステップでページレイアウトのアイデアに基づいて静的ページを作成するのは難しくありません。3 番目のステップでは、node.js が提供するインターフェイスを呼び出す必要があります。ここではこれ以上は言いません。静的ページが完了したら、
```
$ npm run build
```
ログイン後にコピー
をコンパイルします。バックエンド開発: サーバーのディレクトリ構造を作成し、Express フレームワークをインストールし、md ファイルを HTML に変換するようにマークされます
```
$ mkdir blog-server && cd blog-server
$ mkdir public
$ npm install --save express$ npm install --save marked
```
ログイン後にコピー
インターフェースを記述するため、現在 3 つの主要なインターフェースがあります。
静的ページをレンダリングし、パート 2 でコンパイルした静的ファイルと md 形式の記事ファイルをパブリックフォルダーにコピーし、Express の組み込みミドルウェアを使用してパブリックフォルダーを静的リソースファイルのルートディレクトリとして指定し、それをキャッシュします。これは単一ページのアプリケーションであるため、404 エラーの処理に注意してください。
```
# server.jsvar express = require(&#39;express&#39;);var app = express();
app.use(express.static(&#39;public&#39;,{maxAge:60*60*24*30}));
app.get(&#39;/&#39;,function(req,res){
 res.sendFile(&#39;/index.html&#39;,{root: __dirname + &#39;/public/&#39;});
});
app.listen(80);
```
ログイン後にコピー

記事リストインターフェースを取得します。 fs.readdir メソッドは、md ファイルが配置されているフォルダーを読み取り、すべての md ファイルのファイル名、つまり記事のタイトル、作成時間、記事のパスを返し、[記事] ページに作成順に並べて表示します。時間。
記事コンテンツのインターフェース。最初のインターフェイスによって返されたファイル名とパスに従って、fs.readFile メソッドを使用して md ファイルのコンテンツを読み取り、marked を使用してそれを HTML に変換してクライアントに返し、記事コンテンツページにレンダリングします。。

ホームページのコンテンツインターフェイス。インターフェイス 2 と同様に、最新の記事を読んで返します。クロスドメインの問題に対処することを忘れないでください。

app.all(&#39;*&#39;, function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",&#39; 3.2.1&#39;)
res.header("Content-Type", "application/json;charset=utf-8");
next();
});

ログイン後にコピー

導入

AWS（Amazonクラウドホスト）のお申込み、1年間の無料トライアル、クレジットカード情報が必要です。 EC2、Win、または Linux システムのインスタンスでは、Linux を推奨します。対応するポートを開いて、node.js をインストールします。
PM2 をインストールし、3 番目のステップで server.js サービスを実行し、システムで PM2 を起動します。
```
$ npm install -g PM2
$ pm2 start server.js
$ pm2 startup
```
ログイン後にコピー
此时我们的博客系统已经运行在EC2上了。

购买域名。在腾讯云上购买的xyz域名，第一年8块钱。解析到该EC2的公网IP上，即可通过域名访问。

以上が初心者が Vue.js + Node.js を通じて個人ブログを作成するにはどうすればよいですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。