序文
今日は、シンプルなニュースリリースシステムを構築します。システムの最初の段階は、難しすぎる必要はありません。主に次の機能があります
①ニュースタイプの管理
②ニュース管理(画像アップロード機能を備えています)
③ニュースブラウジング
多くの機能はありませんが、多くの基本操作もカバーしています。プログラムは追加、削除され、チェックされ、変更されているだけで、添付ファイルを追加およびアップロードするのに十分です。それでは、今日私たちの研究を始めましょう
準備
昨日のトラブルの後、すでにnodejsとmongodb環境があります。これで、新しいプロジェクトファイルとデータベースファイルを直接作成できます
最初のステップは、コマンド文字を開き、Dディスクに切り替えて入力することです
次のようにコードをコピーします:d:/> express -eニュース
したがって、システムは自動的に基本的な環境を喜んで構築します
多くのモジュールに依存関係がないことは明らかです。この時点で、私は昨日のpackage.jsonを直接取ります:
コードコピーは次のとおりです。
{
「名前」:「アプリケーション名」、
「バージョン」:「0.0.1」、
「プライベート」:本当、
「スクリプト」:{
「start」:「node app.js」
}、
「依存関係」:{
「Express」:「3.4.8」、
「ejs」: "*"、
「mongodb」:「*」
}
}
次に、プロジェクトディレクトリに切り替えます。
次のようにコードをコピーします:NMPインストール
すべての依存関係が完了し、その後入力します
コードコピーは次のとおりです。
D:/News>ノードアプリ
ポート3000でリスニングサーバーを聴くエクスプレス
それで、私たちのプログラムは喜んで実行され始めました。 URLを開いたとき、問題はないことがわかりました。
PS:ここには、注意する必要がある問題があります。ダウンロードしたファイルはUTF-8エンコードではないため、中国語では文字化けコードがある可能性があり、ファイルエンコーディングは誰でも統合する必要があります。
プログラムの実行を開始すると、データベース関連の構成が必要です
mongodbディレクトリに最初に新しいニュースフォルダーを作成します
configuration構成ファイル設定をプロジェクトに追加します
コードコピーは次のとおりです。
module.exports = {
CookieSecret: 'mynews'、
DB:「ニュース」、
ホスト:「localhost」
};
③新しいモデルディレクトリを作成し、新しいdb.jsを作成します
コードコピーは次のとおりです。
var settings = require( '../ settings')、
db = require( 'mongodb')。db、
接続= require( 'mongodb')。接続、
server = require( 'mongodb')。server;
module.exports = new db(settings.db、new Server(settings.host、connection.default_port)、{safe:true});
desktopで新しいNews.BATプログラムを作成します
コードを次のようにコピーします:d:/mongodb/bin/mongod.exe -dbpath d:/mongodb/news
将来的には、データベースを開始する必要があります。実行するだけです。このようにして、私たちの予備的な準備は基本的に終わりました。
しかし、ここにはさらに2つの迷惑なことがあります。 1つは、毎回ニュース番組を開始するのは非常に迷惑であり、もう1つは何かを変更するときに再起動する必要があることです。最初にこれらの2つの問題を解決しましょう。
desktopでnews_app.batを作成し、それを実行してプログラムを開始します。
次のようにコードをコピーします:ノードD:/News/App
②スーパーバイザーはプロセスプロテクターです。それを使用して、プログラムを再起動し、最初にフォローしてからnode_app.batを調整するのに役立ちます
次のようにコードをコピーします:スーパーバイザーd:/news/app
もちろん、以前にインストールする必要があります。
次のようにコードをコピーします:NPMインストール-Gスーパーバイザー
この後、ファイルを変更した後に手動で再起動する必要はありません(News_Appをプロジェクトディレクトリに配置する必要があります)。
プロジェクト構造
最初のステップが終わった後、プロジェクト構造について考える必要があります
①ホームページはインデックスであり、すべてのニュースタイプとニュースエントリはこちらにリストされます
cidher各ニュース項目には、編集/削除/表示用の3つのボタンがあります
homeホームページにはニュースボタンがあります(追加時に写真をアップロードできます)
基本機能は上記のとおりです
そのため、アプリのルーティング機能を削除し、すべてのルートをインデックスに入れます
コードコピーは次のとおりです。
//ルーティング関数をインデックスに入れます
//app.get('/ '、routes.index);
//app.get('/users '、user.list);
ルート(アプリ);
コードコピーは次のとおりです。
module.exports = function(app){
//ホームページ、今もホームページです
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( 'ニュースリクエストの変更');
});
};
ニュースを追加するための個別のページがあるはずであり、[追加]ボタンをクリックすると他の処理が発生するため、内部リクエストを細分化する必要があるため、最初のステップは簡単です。現在、次の規制が次のとおりです。
/すべてのタイプとニュースを表示するデフォルトページ、削除ボタンを使用して
/追加するためにニュースページを追加します
/addnewsニュース固有の投稿リクエストアドレスを追加(ボタンをクリックするときの応答)
/削除ニュースリクエストを削除します
/特定のニュース問い合わせを表示します
したがって、上記のルートをわずかに変更します。
コードコピーは次のとおりです。
module.exports = function(app){
//ホームページ、今もホームページです
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ページを整理するには、いくつかの新しいテンプレートを作成する必要があります。ここでは、最初と最後のページを分離しません。
2つのテンプレートファイルを追加してビューを追加します。これは、index.ejsと一貫して実行され、ナビゲーションの変更に関連しています
コードコピーは次のとおりです。
module.exports = function(app){
//ホームページ、今もホームページです
app.get( '/'、function(req、res){
res.Render( 'index'、{title: 'Express'});
});
app.get( '/add'、function(req、res){
res.Render( 'add'、{title: 'add newsページ'});
});
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: 'View News request'});
});
};
プロジェクト構造は終了します
データ操作
全体的な構造が発表されたら、データ操作を実行する必要があります。
①データを追加する(ニュースを追加)
②表示データの表示(表示ニュースを表示)
③データの削除(ニュースを削除)
もともとはタイプ操作が関係していましたが、完了し、なくなっていました。当面は気にしないでください。初めてやるときに混乱するのは簡単だからです。
ニュースを追加します
ここでは、フォームの提出を使用せず、ajaxを使用します...ここではZeptoライブラリを紹介するので、私たちのページは次のようになります
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<title>
<%= title%> </title>
<link rel = 'styleSheet' href = '/styleSheets/style.css'/>
<Script src = "JavaScripts/zepto.js" type = "text/javascript"> </script>
</head>
<body>
<h1>
<%= title%> </h1>
<div>
タイトル:<入力型= "text" id = "title" />
</div>
<div>
コンテンツ:<textarea id = "content"> </textarea>
</div>
<div>
<入力タイプ= "ボタン" type = "ボタン" id = "ok" value = "add news" />
</div>
<script type = "text/javascript">
$(document).ready(function(){
$( '#ok')。クリック(function(){
var param = {};
param.title = $( '#title')。val();
param.content = $( '#content')。val();
$ .post( '/addnews'、param、function(){
console.log( 'addded ressuly');
});
});
});
</script>
</body>
</html>
まだリクエスト応答プログラムはありませんが、データは処理されず、ここに添付ファイルはありません(添付ファイルは1つだけ許可されています)。そのため、コードを変更して写真を追加しました。
PS:より厄介なことは、Ajax処理後に画像が少し厄介なので、ここで操作を形成するために切り替えましょう。
コードコピーは次のとおりです。
<html>
<head>
<title>
<%= title%> </title>
<link rel = 'styleSheet' href = '/styleSheets/style.css'/>
</head>
<body>
<h1>
<%= title%> </h1>
<form enctype = "multipart/form-data" method = "post" action = "/addNews">
<div>
タイトル:<入力タイプ= "テキスト" id = "title" name = "title" />
</div>
<div>
写真:<入力型= "ファイル" id = "pic" name = "pic" />
</div>
<div>
コンテンツ:<textarea id = "content" name = "content"> </textarea>
</div>
<div>
<入力型= "submit" id = "ok" value = "News" />>
</div>
</form>
</body>
</html>
添付ファイルの問題をあまり考える必要はありません。今のところやりましょう。次に、最初にリクエストプログラムを処理します。ここでは、写真を保存するために、公共の場で新しいニュースフォルダーを作成します。
モデル
新しいnews.jsファイルをモデルフォルダーに追加し、そのためのエンティティを構築し、新しいクエリ関連操作を提供します。
コードコピーは次のとおりです。
var mongodb = require( './ db');
機能ニュース(タイトル、コンテンツ、写真){
this.title = title;
this.content = content;
this.pic = pic; //ストレージパスを保存します
};
module.exports = news;
//ストレージデータ
news.prototype = {
保存:function(callback){
var date = new Date();
var time = {
日付:日付、
年:date.gettlyear()、
月:date.getTullyear() + " - " +(date.getmonth() + 1)、
day:date.getClulyear() + " - " +(date.getMonth() + 1) + " - " + date.getDate()、
minute:date.get.fullyear() + " - " +(date.getmonth() + 1) + " - " + date.getDate() + "" +
date.gethours() + ":" +(date.getMinutes()<10? '0' + date.getMinutes():date.getMinutes()))
}
//データストレージオブジェクト
var news = {
タイトル:this.title、
コンテンツ:this.content、
写真:this.pic、//最後に、画像処理に関しては、最初に保存します
時間:時間
};
//データ接続を開き、コールバックです...
mongodb.open(function(err、db){
//エラーが間違っている場合は終了します
if(err){
return callback(err);
}
//ニュースコレクションを開きます
db.collection( 'news'、function(err、collection){
if(err){
mongodb.close();
return callback(err);
}
//コレクションに書き込みます(データベースに書き込みます)
collection.insert(news、{safe:true}、function(err){
return callback(err);
});
callback(null); // errはnullです
});
});
}
};
そのため、データベースに書き込むプログラムがあります。ここでは、データベースを挿入してみます。もちろん、ルーティングオフィスでプログラムを変更する必要があります。
PS:もちろん、ルーティングは論理コードをあまり記述できません。このファイルは将来分離する必要があります
この時点で、 /addnewsのロジックを変更する必要があります
コードコピーは次のとおりです。
app.post( '/addnews'、function(req、res){
var title = req.body.title;
var content = req.body.content;
var pic = req.body.pic;
var news = new News(タイトル、コンテンツ、写真)
news.save(function(err、data){
res.send(data);
})
});
クエリ後、大きな問題はありません。添付ファイルの問題は問題です
写真をアップロードします
Express自体のアップロード機能はそれをサポートします。 Expressは、BodyParserを介してリクエストボディを解析し、それを介してファイルをアップロードします。内部でフォーマット可能な使用を行います。
ここで、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(var i in req.files){
if(req.files [i] == 0){
//同期してファイルを削除します
fs.unlinksync(req.files [i] .path);
console.log( '成功は空のファイルを削除しました');
} それ以外 {
var path = './public/news/' + req.files [i] .name;
//同期メソッドを使用してファイルの名前を変更します
fs.renamesync(req.files [i] .path、path);
console.log( 'sunccess amed a file');
}
}
// var title = req.body.title;
// var content = req.body.content;
// var pic = req.body.pic;
// var news = new News(タイトル、コンテンツ、写真)
// news.save(function(err、data){
// res.send(data);
//})
});
この時点で、ファイルを選択した後、[ニュースの追加]をクリックすると、ファイルがアップロードされます
この時点で、データベースにファイル名を録画するだけで、ファイルディレクトリに写真があります
コードコピーは次のとおりです。
app.post( '/addnews'、function(req、res){
var pic = null;
for(var i in req.files){
if(req.files [i] == 0){
//同期してファイルを削除します
fs.unlinksync(req.files [i] .path);
console.log( '成功は空のファイルを削除しました');
} それ以外 {
var path = './public/news/' + req.files [i] .name;
//同期メソッドを使用してファイルの名前を変更します
fs.renamesync(req.files [i] .path、path);
console.log( 'sunccess amed a file');
}
pic = req.files [i] .name;
}
var title = req.body.title;
var content = req.body.content;
var news = new News(タイトル、コンテンツ、写真)
news.save(function(err、data){
res.send(data);
})
res.send( '<a href = "./">リクエストが成功し、ホームページに戻ります</a>');
});
データベースにはデータがあり、ディレクトリにはファイルもあります。これで、データを読むだけです。
PS:兄弟たちは私に休暇中に飲み物に出かけるように促しました
データを読む
2番目のステップはもちろんデータを読むことであり、最初のステップはホームページのデータを読むことです。
コードコピーは次のとおりです。
var mongodb = require( './ db');
機能ニュース(タイトル、コンテンツ、写真){
this.title = title;
this.content = content;
this.pic = pic; //ストレージパスを保存します
};
module.exports = news;
//ストレージデータ
news.prototype = {
保存:function(callback){
var date = new Date();
//データストレージオブジェクト
var news = {
タイトル:this.title、
コンテンツ:this.content、
写真:this.pic、//最後に、画像処理に関しては、最初に保存します
日付:日付
};
//データ接続を開き、コールバックです...
mongodb.open(function(err、db){
//エラーが間違っている場合は終了します
if(err){
return callback(err);
}
//ニュースコレクションを開きます
db.collection( 'news'、function(err、collection){
if(err){
mongodb.close();
return callback(err);
}
//コレクションに書き込みます(データベースに書き込みます)
collection.insert(news、{safe:true}、function(err){
return callback(err);
});
コールバック(null); // errはnullです
});
});
}
};
//記事と関連情報を読む
news.get = function(id、callback){
//データベースを開きます
mongodb.open(function(err、db){
if(err){
return callback(err);
}
db.collection( 'news'、function(err、collection){
if(err){
mongodb.close();
return callback(err);
}
var query = {};
if(id){
query.id = id;
}
//クエリオブジェクトに基づいたクエリ記事
collection.find(query).sort({
日付:-1
})。toarray(function(err、data){
mongodb.close();
if(err){
return callback(err); //失敗した! errに戻ります
}
コールバック(null、data); //成功!クエリの結果を配列として返します
});
});
});
};
news.js
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<title>
<%= title%> </title>
<link rel = 'styleSheet' href = '/styleSheets/style.css'/>
</head>
<body>
<h1>
<%= title%> </h1>
<ul>
<%(データのvar k){%>
<li>
<div>
タイトル:<%= data [k] .title%> </div>
<div>
コンテンツ:<%= data [k] .content%> </div>
<div>
添付ファイル:<img src = "news/<%= data [k] .pic%>"/> </div>
</div>
<div>
<a href = "/delete?id = <%= data [k]%>"> delete </a>
</div>
<hr/>
</li>
<%}%>
</ul>
</body>
</html>
結論
さて、記事出版システムの制作のためにここで止めましょう。将来的には、徐々に機能を追加して美化します。