1.
を前に書きます。Web フロントエンド開発者としては、誰もがフルスタックのプログラマーになりたいと考えています。フルスタックを実現する簡単な方法は、node.js のようです。私は少し前にnode.jsを学びました。初心者がどのようにして独自のWebサービスを素早く構築し、フルスタックの旅を始めることができるかについて話しましょう。
2.node.js をインストールします
バックエンド開発に携わったことがある人なら、最初にサービスをインストールする必要があることを知っています。初心者の場合は、公式 Web サイト http://nodejs.org/ から、最も単純な視覚的なインストールを選択する必要があります (次のステップは簡単です。関連する操作に慣れれば、他の方法も自然に身に付きます)。 dist/v0.6.1/node-v0.6.1.msi コンピューターに対応したインストール パッケージをダウンロードし (これは Windows 用です。Mac を買う余裕はありません)、デフォルトでは次のようにインストールします。これは C:Program Filesnodejs ファイルの下にインストールされ、このディレクトリを PATH 環境変数に追加します。これを行うには、[マイ コンピュータ] を右クリックし、[プロパティ] - [システムの詳細設定] - [詳細設定] - [環境変数] - [変数名: PATH] を選択し、[値の変更: [C:Program] を追加します。 [end Filesnodejs] (独自のインストール ディレクトリに応じて)」。 cmd を開いてコマンドを直接実行します:
node -v は現在のバージョン番号を出力できます。 npm はノード ファイルに統合されているため、npm install XXX を使用して必要なプラグインまたはモジュールをインストールします。
3. Express フレームワークを使用する
しばらく作業した後、最終的に npm コマンドを使用して初期化、Express Framework のインストール、および hello world の書き込みを行いました。なぜ Express フレームワークを選択する必要があるのでしょうか? もちろん、Express フレームワークには特有の特徴があります。初心者にとって最大の懸念は、面倒で間違いを犯しやすいことです。もちろん、express はこれを考慮しているため、迅速なジェネレーターを提供します:express-generator
1. コマンド npm install Express-generator -g を使用して、グローバルにインストールします
2. Express コマンドを使用してプロジェクト構造を生成します
myapp を表現します。myapp はプロジェクト名です
3. cd myapp 経由でプロジェクト ファイルを入力します
npm install 経由で依存モジュールを初期化します
set DEBUG=myapp & npm start を使用して Web サーバーを起動します
4. ブラウザで http://localhost:3000/ URL を開いてアプリケーションを表示します。
デフォルトで使用されるテンプレート エンジンは jade であり、このテンプレートはプロジェクト内で設定されています。
4. Express ジェネレーター プロジェクトの紹介
1. myapp プロジェクトの構成は次のとおりです:
2. package.json これは、モジュール管理パッケージ、プロジェクト情報、およびモジュールのバージョン番号と言えます。実際、プロジェクト モジュールの初期化時に、ここでの設定によって生成されることがわかります。
3. app.jsはプロジェクトの核とも言える起動ファイルです。主にいくつかのパブリック関数を書きます。
4. bin ファイルの下にサフィックスのない www ファイルがあります。これはプロジェクトのエントリ ファイルであり、Web サービス ポートといくつかの監視イベントを設定します。
5. node_modules はプロジェクトが依存するファイルモジュールであり、データベースに接続する mongoose モジュールなど、後でインポートされるパッケージもそこに配置されます。これについては後で詳しく説明します。
6. public はプロジェクトの静的リソース ファイルセットです。ここに画像、css ファイル、js ファイルが配置されていることがわかります。
7. Routes はプロジェクトのルーティング モジュールであり、index.js ファイルと user.js ファイルがすでにデフォルトで設定されています。実際、これには一般的なバックグラウンド言語のコントローラー コンテンツも含まれます。もちろん、大規模なプロジェクトでは分離できます。
8. ビューは、jade テンプレート エンジンであるプロジェクトのテンプレート ファイルです。ただし、スペースの要件が非常に厳しいなど、多くの落とし穴もあります。スペースが 1 つ少ないとエラーが報告されます。実際、パフォーマンスはあまり高くないので、ejs を使用する方が良いでしょう。
5. mongoDB をインストールします
1. 公式 Web サイトから直接 msi ファイルをダウンロードします (http://www.mongodb.org/downloads)
2. デフォルトがある場合は、それをすべて選択してインストールします。
3. 次に、環境変数を設定します。これはノードと同じなので説明しませんが、中央の図を配置できます。ははは...
4. 次のステップは、mongoDB サービスを開始することです
5. コマンドを渡します: mongod --dbpath f:MongoDBdata ここで、f:MongoDBdata は、次の情報が表示されれば成功です。
6. MongoDB はポート 27017 をリッスンします。同時に、ブラウザを開いて
http://127.0.0.1:27017 と入力すると、次のプロンプトが表示されます。
ネイティブドライバーポートでHTTP経由でMongoDBにアクセスしようとしているようです。
7. 次に、cmd を開き、mongo コマンドを入力してデータベースに接続します。
2015-05-02T17:10:19.467+0800 I CONTROL Hotfix KB2731284 以降のアップデートがインストールされていないため、データ ファイルがゼロになります MongoDB シェル バージョン: 3.0.2 接続先: テスト
8. 以上で Windows 環境への monogDB のインストールが完了しました。
補足:
9. 毎回コマンドを使用してサービスを開くのが面倒な場合は、バッチ ファイルを作成して、拡張子 .bat を付けた新しいファイルを作成し、次のコードを作成できます。
mongod を開始 --dbpath F:MongoDBdata10. もちろん、MongoDB をサービスとして開始することもできますが、学習の過程ではあまり役に立たないと思います。必要に応じて、後で説明します。
11. コマンドラインが使いにくい場合は、navicat に似たグラフィカルインターフェイスを備えたソフトウェアをお勧めします。無料版もありますが、機能は少ないですが、学習には十分です。プロセス
6. ノードプロジェクトでの monogDB の使用
1. monogDB 接続モジュールをインポートします。Express では mongoskin モジュールが導入されています。ここでは mongoose を使用したインストールについて説明します。2. myapp プロジェクトでコマンド npm install mongoose -save を実行して、インストールを node_modules に保存し、package.json で "mongoose": "^4.4.12" を設定してから、コマンド npm install を実行してインストールすることもできます。 。
3. app.js ファイル内
a. mongoose モジュールをインポートします:
var mongoose = require('mongoose');
b. データベース接続を作成します
mongoose.connect('mongodb://localhost/myDB') //ローカルデータベースに接続します
の下に新しい users.js ファイルを作成します。
var mongoose = require('mongoose'); //申明一个mongoons对象 var UsersSchema = new mongoose.Schema({ name: String, paw: String, meta: { createAt: { type: Date, default: Date.now() }, updateAt: { type: Date, default: Date.now() } } }) //每次执行都会调用,时间更新操作 UsersSchema.pre('save', function(next) { if(this.isNew) { this.meta.createAt = this.meta.updateAt = Date.now(); }else { this.meta.updateAt = Date.now(); } next(); }) //查询的静态方法 UsersSchema.statics = { fetch: function(cb) { //查询所有数据 return this .find() .sort('meta.updateAt') //排序 .exec(cb) //回调 }, findById: function(id, cb) { //根据id查询单条数据 return this .findOne({_id: id}) .exec(cb) } } //暴露出去的方法 module.exports = UsersSchema
var mongoose = require('mongoose') var UsersSchema = require('../schemas/users') //拿到导出的数据集模块 var Users = mongoose.model('Users', UsersSchema) // 编译生成Movie 模型 module.exports = Users
var express = require('express'); var mongoose = require('mongoose');//导入mongoose模块 var Users = require('../models/users');//导入模型数据模块 var router = express.Router(); /* GET users listing. */ router.get('/', function(req, res, next) { res.send('respond with a resource'); }); //查询所有用户数据 router.get('/users', function(req, res, next) { Users.fetch(function(err, users) { if(err) { console.log(err); } res.render('users',{title: '用户列表', users: users}) //这里也可以json的格式直接返回数据res.json({data: users}); }) }) module.exports = router;
extends layout block content h1= title //jade取值方式 ul each user in users //jade模版的遍历方式 li h4 #{user.name} span #{user.paw}
8. 最後に、ブラウザで URL:
を開いて効果を確認します。この時点で、データベースからフロントエンド ディスプレイまでのプロジェクトが完了します。 以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。