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 ライブラリを導入するので、ページは次のようになります

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

<頭>
<タイトル>
                                                                                                           

                                                                                       

タイトル:

コンテンツ:

<スクリプトタイプ="text/javascript">
$(document).ready(function () {
$('#ok').click(function () {
var param = {};
param.title = $('#title').val();
param.content = $('#content').val();
$.post('/addNews', param, function () {
console.log('正常に追加されました');
});
});
});

要求応答プログラムはまだ存在しないため、データは処理されません。また、ここには添付ファイルがありません (現在添付できる添付ファイルは 1 つだけです)。そのため、コードを変更して画像を追加します。

PS: さらに面倒なのは、画像の ajax 処理が少し面倒なので、フォーム操作に戻すだけです。そうしないと時間がかかります...

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

<頭>
    <タイトル>
        <%= title %>
   


   

        <%= タイトル %>

   

   

        标题：
   

   

        画像：
   

   

        内容：
   

   

       
   

   

この子には多くの考慮事項の添付ファイルは必要ありません、先の時点でこのように、先の処理请要求プログラム、ここの先の公開里面にある新しいニュース文書はその写真を保存するために使用されます

モデル

モデル文件夹新增news.js文件、その構築体のために、新しい增查询関連操作を与えます:

复制代 代码如下:

var mongodb = require('./db');

関数ニュース(タイトル、コンテンツ、写真) {
  this.title = タイトル;
  this.content = コンテンツ;
  this.pic = pic;//保存储路径
};
module.exports = ニュース;
//存储データ
News.prototype = {
  保存: 関数 (コールバック) {
    var date = new Date();
    var time = {
      日付: 日付、
      年: date.getFull Year(),
      月: date.getFull Year() "-" (date.getMonth() 1),
      日: date.getFull Year() "-" (date.getMonth() 1) "-" date.getDate(),
      分: date.getFull Year() "-" (date.getMonth() 1) "-" date.getDate() " "
      date.getHours() ":" (date.getMinutes()     }
    //データ存储对オブジェクト
    var ニュース = {
      タイトル: this.title、
      コンテンツ: this.content,
      pic: this.pic, //图片处処理最終来说，现在先乱存
      時間: 時間
    };
    //打开データ接続，打开就は一周调....
    mongodb.open(関数 (err, db) {
      //错误就退出
      if (エラー) {
        return callback(err);
      }
      //打开ニュースセット
      db.collection('ニュース', function (err, collection) {
        if (エラー) {
          mongodb.close();
          return callback(err);
        }
        //写入セット（写入パケット库）
        collection.insert(news, {safe: true }, function (err) {
          return callback(err);
        });
        callback(null);//エラーは null
      });
    });
  }
};

データベースに書き込むプログラムが存在します。ここでは、それをデータベースに挿入できるかどうかを確認します。もちろん、ルーティング プログラムを変更する必要があります。

追伸: もちろん、ルーティング部門にあまりにも多くのロジック コードを記述することはできません。このファイルは将来的には分離する必要があります。

現時点では、/addNews のロジックを変更する必要があります

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

app.post('/addNews', function (req, res) {
var title = req.body.title;
var content = req.body.content;
var pic = req.body.pic;
var news = 新しいニュース(タイトル、内容、写真)
news.save(function (err, data) {
res.send(データ);
})
});

確認したところ、問題は大きくありません。今解決する必要があるのは、添付ファイルの問題です。

写真をアップロード

Express 自体は画像アップロード機能をサポートしており、Express は bodyParser を通じてリクエスト本文を解析し、内部的には formidable

を使用してファイルをアップロードします。

ここで、app.js の app.use(express.bodyParser()) を次のように変更します。

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

app.use(express.bodyParser({ keepExtensions: true) 、uploadDir: './public/news' }));

index.js を開き、先頭にコード行を追加します。

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

fs = require('fs'),

インデックス ファイルを変更します:

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

app.post('/addNews', function (req, res) {
for (req.files の変数 i) {
If (req.files[i] == 0) {
//ファイルを同期的に削除します
fs.unlinkSync(req.files[i].path);
console.log('空のファイルの削除に成功しました');
} else {
var path = './public/news/' req.files[i].name;
//同期メソッドを使用してファイルの名前を変更します
fs.renameSync(req.files[i].path, path);
console.log('ファイル名が変更されました');
}
}
// var title = req.body.title;
// var content = req.body.content;
// var pic = req.body.pic;
// var news = 新しいニュース(タイトル、コンテンツ、写真)
// news.save(function (err, data) {
// res.send(data);
// })
});

この時点で、ファイルを選択して [ニュースの追加] をクリックすると、ファイルがアップロードされます

現時点では、ファイル名をデータベースに記録するだけでよく、ファイルディレクトリには写真が保存されます

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

app.post('/addNews', function (req, res) {
var pic = null;
for (req.files の変数 i) {
If (req.files[i] == 0) {
//ファイルを同期的に削除します
fs.unlinkSync(req.files[i].path);
console.log('空のファイルの削除に成功しました');
} else {
var path = './public/news/' req.files[i].name;
//同期メソッドを使用してファイルの名前を変更します
fs.renameSync(req.files[i].path, path);
console.log('ファイル名が変更されました');
}
Pic = req.files[i].name;
}
var title = req.body.title;
var content = req.body.content;
var news = 新しいニュース(タイトル、内容、写真)
news.save(function (err, data) {
res.send(データ);
})
res.send('リクエストが成功しました。ホームページに戻ります');
});

データベースにはデータがあり、ディレクトリにはファイルがあります。あとは、データを読み出すだけです。

追伸: 兄弟たちが私に休暇中に飲みに行くよう勧めています

データの読み取り

2 番目のステップは、もちろんデータを読み取ることです。最初のステップは、ホームページ上のデータを読み取ることです。

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

var mongodb = require('./db');
関数 ニュース(タイトル、内容、写真) {
this.title = タイトル;
this.content = コンテンツ;
this.pic = pic;//保存パス
};
module.exports = ニュース;
//ストレージデータ
News.prototype = {
保存: 関数 (コールバック) {
var date = new Date();
//データストレージオブジェクト
var ニュース = {
タイトル: this.title、
コンテンツ: this.content,
Pic: this.pic, //最後に画像処理、ランダムに保存します
日付: 日付
};
// データ接続を開きます。開くのはコールバックです...
mongodb.open(関数 (err, db) {
//エラーが発生した場合は終了
(エラー) {
の場合 return callback(err);
}
//ニュースコレクションを開きます
db.collection('ニュース', function (err, collection) {
(エラー) {
の場合 mongodb.close();
return callback(err);
}
// コレクションの書き込み (データベースへの書き込み)
collection.insert(news, {safe: true }, function (err) {
return callback(err);
});
callback(null) //エラーは null
; });
});
}
};
//記事とその関連情報を読む
News.get = 関数 (id, コールバック) {
//データベースを開く
mongodb.open(関数 (err, db) {
(エラー) {
の場合 コールバックを返す(err);
}
db.collection('ニュース', function (err, collection) {
(エラー) {
の場合 mongodb.close();
return callback(err);
}
var query = {};
If (id) {
query.id = id;
}
//クエリオブジェクトに基づいて記事をクエリします
Collection.find(query).sort({
日付: -1
}).toArray(関数 (エラー、データ) {
mongodb.close();
(エラー) {
の場合 return callback(err); //失敗しました。エラーを返します
}
callback(null, data); //成功!クエリの結果を配列の形式で返します
});
});
});
};
news.js

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

<頭>
    <タイトル>
        <%= title %>
   


   

        <%= タイトル %>

   

        <%for(データ内の変数 k) { %>
       
• 
             
  
                 标题： <%=data[k].title %>
  
             
  
                内容： <%=data[k].content%>
  
               
  
                添付ファイル：
  
               

             

              删除
             

             

---

       
       
   

结语

はい、文章配信システムの制作がここに完了し、その後、さらにゆっくりと機能を追加し、ゆっくりと美化していきます。