system_node.js を公開する簡単な記事を作成するための nodejs チュートリアル

はしがき

今日は簡単なニュースリリースシステムを作成します。システムの最初の段階は、主に次の機能を備えています。

①ニュース型管理

②ニュース管理（画像アップロード機能付き）

③ ニュース閲覧

機能は多くありませんが、添付ファイルの追加、削除、確認、アップロードのみで十分な基本的な操作が含まれています。それでは、今日から勉強を始めましょう

準備

昨日のトラブルの後、すでに nodeJS と mongoDB 環境ができました。新しいプロジェクト ファイルとデータベース ファイルを直接作成できるようになりました。

最初のステップは、コマンド プロンプトを開いて D ドライブに切り替え、

と入力することです。

コードをコピー コードは次のとおりです:

D:>express -e news

その後、システムは基本的な環境を自動的に構築します

明らかに、現時点では多くのモジュールの依存関係は存在しません。昨日の package.json のテストを行ってください。

コードをコピーします コードは次のとおりです:

{
"name": "アプリケーション名",
"バージョン": "0.0.1",
"プライベート": true、
"スクリプト": {
"start": "node app.js"
}、
"依存関係": {
"エクスプレス": "3.4.8",
"ejs": "*",
"mongodb": "*"
}
}

次に、プロジェクト ディレクトリに切り替えます:

コードをコピー コードは次のとおりです:

nmp install

すべての依存ファイルがダウンロードされたら、

と入力します。

コードをコピーします コードは次のとおりです:

D:ニュース>ノードアプリ
Express サーバーはポート 3000 で待機しています

それで、プログラムは問題なく実行されましたが、URL を開いたところ、実際に問題がないことがわかりました。

追記: ここで注意が必要な問題があります。ダウンロードしたファイルは UTF-8 でエンコードされていないため、中国語が文字化けする可能性があります。ファイルのエンコードは自分で統一する必要があります。

プログラムの実行時には、データベース関連の構成が必要です

① まず、mongoDB ディレクトリに新しいニュースフォルダーを作成します

② 設定ファイル settings.js をプロジェクトに追加します

コードをコピーします コードは次のとおりです:

module.exports = {
cookieSecret: 'myNews',
db: 'ニュース',
ホスト: 'ローカルホスト'
};

③ 新しいmodelsディレクトリを作成し、新しいdb.jsを作成します

コードをコピーします コードは次のとおりです:

var settings = require('../settings'),
Db = require('mongodb').Db,
接続 = require('mongodb').Connection,
サーバー = require('mongodb').Server;
module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT), {safe: true });

④ デスクトップに新しい news.bat プログラムを作成します

コードをコピーします コードは次のとおりです:

d:mongodbbinmongod.exe -dbpath d:mongodbnews

今後データベースを起動するには、これを実行するだけで基本的な準備は完了です。

しかし、ここには 2 つの面倒な点があります。1 つは、毎回ニュース番組を起動するのが面倒であるということ、もう 1 つは、何かを変更するには再起動する必要があるということです。そのため、最初にこの 2 つの問題をここで解決します。

① デスクトップに新しい news_app.bat を作成し、後で実行してプログラムを起動します

コードをコピーします コードは次のとおりです:

node d:newsapp

② スーパーバイザーはプロセス保護プログラムです。最初にフォローしてから、node_app.bat を調整します。

コードをコピー コードは次のとおりです:

supervisor d:newsapp

もちろん、事前にインストールする必要があります:

コードをコピー コードは次のとおりです。

npm install -gvisor

この後、ファイルを変更した後に手動で再起動する必要はありません (news_app をプロジェクト ディレクトリに配置する必要があります)ので、準備作業はここで終了です

プロジェクトの構造

最初のステップの後、プロジェクトの構造について考える必要があります

① トップページはインデックスになっており、すべてのニュースの種類とニュース項目がリストされます

② 各ニュース項目には編集/削除/表示の 3 つのボタンがあります

③ ホームページにニュースを追加するボタンがあります (追加時に写真をアップロードできます)

基本的な機能は上記の通り

そこで、アプリのルーティング機能を削除し、すべてのルートをインデックスに追加しました

コードをコピーします コードは次のとおりです:

//ルーティング関数をインデックスに入れます
//app.get('/', Routes.index);
//app.get('/users', user.list);
ルート(アプリ);

コードをコピーします コードは次のとおりです:

module.exports = 関数 (アプリ) {
//ホームページ、ホームページにもなりました
app.get('/', function (req, res) {
res.render('index', { title: 'Express' });
});
app.get('/add', function (req, res) {
res.send('ニュースリクエストの追加');
});
app.get('/delete', function (req, res) {
res.send('ニュースリクエストの削除');
});
app.get('/view', function (req, res) {
res.send('ニュースの表示リクエスト');
});
app.get('/update', function (req, res) {
res.send('ニュースリクエストを変更');
});
};

ニュースの追加には別のページが必要であり、追加ボタンをクリックすると他の処理が行われるため、最初のステップはこれと同じくらい簡単です。そのため、各リクエストは内部で分割する必要があります。現在の規制は次のとおりです。

/ デフォルトのページ。すべてのジャンルとニュースが表示され、削除ボタンが付いています。

/add ニュース追加ページに入ります

/addNews ニュース固有の投稿リクエストアドレスを追加（ボタンクリック時の応答）

/delete ニュース削除リクエスト

/特定のニュースクエリを表示

そこで、上記のルートを少し変更しました:

コードをコピーします コードは次のとおりです:

module.exports = 関数 (アプリ) {
//ホームページ、ホームページにもなりました
app.get('/', function (req, res) {
res.render('index', { title: 'Express' });
});
app.get('/add', function (req, res) {
res.send('ニュースページを追加');
});
app.post('/addNews', function (req, res) {
res.send('ニュース追加リクエストを処理中');
});
app.get('/delete', function (req, res) {
res.send('ニュースリクエストの削除');
});
app.get('/view', function (req, res) {
res.send('ニュースの表示リクエスト');
});
};

そこで、Web ページを整理するためにいくつかの新しいテンプレートを作成する必要があります。ここでは先頭と末尾を分離せず、最も単純なページだけを作成します。

一時的にindex.ejsと同じように動作するaddとviewという2つのテンプレートファイルを追加し、ナビゲーションを変更しました

コードをコピー コードは次のとおりです:

module.exports = 関数 (アプリ) {
//ホームページ、ホームページにもなりました
app.get('/', function (req, res) {
res.render('index', { title: 'Express' });
});
app.get('/add', function (req, res) {
res.render('add', { title: 'ニュース ページを追加' });
});
app.post('/addNews', function (req, res) {
res.send('ニュース追加リクエストを処理中');
});
app.get('/delete', function (req, res) {
res.send('ニュースリクエストの削除');
});
app.get('/view', function (req, res) {
res.render('view', { title: 'ニュースの表示リクエスト' });
});
};

これでプロジェクト構造は終わりです

データ操作

全体的な構造が完成したら、データ操作を実行する必要があります。

①データの追加（ニュースの追加）

② データ表示（ニュース表示）

③ データ削除（ニュース削除）

本来は型の操作もするのですが、初めてだと混乱しやすいので、やってる途中で分からなくなってしまいました

ニュースを追加

ここではフォーム送信を使用せず、ajax を使用します...ここでは zepto ライブラリを導入するので、ページは次のようになります

コードをコピーします コードは次のとおりです:

                                                                                                           

                                                                                       

タイトル:

コンテンツ:

$(document).ready(function () {
$('#ok').click(function () {
var param = {};
param.title = $('#title').val();
param.content = $('#content').val();
$.post('/addNews', param, function () {
console.log('正常に追加されました');
});
});
});