node.js 4日目ノート整理~

28042 ワード
Node.js 4日目教室ノート
インテリジェントポイント
  • Express
  • ファイルに基づいてCRUD
    • を作成
    復習する
  • jQueryのeachとオリジナルのJavaScriptメソッドforEach
  • 301と302の違い
  • モジュールで単一のメンバーをエクスポートし、複数のメンバーをエクスポートする方法
  • module.exports = xxx
  • 複数回通過:exports.xxx = xxx
  • 複数を導出してもよい:moudle.exports = { }
  • module.exportsとexportsの違い
  • exportsはmoduleだけです.exportsの1つの引用で、目的はただ書き方を簡略化するためです
  • 各モジュールの最終returnはmoduleである.exports

  • requireメソッドロードルール
  • キャッシュから優先的にロード
    • .
  • コアモジュール
  • パス形式のモジュール
  • ./xxx
  • ../xxxx
  • /xxxx/ここではディスクルート
    • を示す.
  • c:/xxx

  • サードパーティモジュール
  • サードパーティモジュールの識別はサードパーティモジュールの名称(サードパーティモジュールとコアモジュールの名前が一致するはずがない)
    • である.
  • npm
  • 開発者は、作成したフレームワーク、ライブラリをnpm上の
    • に公開することができます.
  • 利用者は使用時にnpmで
    • を簡単にダウンロードできる.
  • 使用方法:var = require('npm install ')
  • node_modules
  • node_modules/express
  • node_modules/express/package.json
  • node_modules/express/package.json main
  • package.jsonかpackage.json mainが成立しない場合、予備オプションを検索します:index.js
  • 上記の条件が成立しない場合は、前のレベルのディレクトリのnode_に進みます.modules上記のルールに従って
    • を検索し続けます.
  • 現在のファイルモジュールが属するディスクルートディレクトリが見つからない場合は、can not find module xxx
    • とエラーが発生します.

  • package.jsonパッケージ記述ファイル
  • は製品の説明書
    • である.
  • dependencies属性は、プロジェクトのサードパーティパケット依存情報
    • を保存するために使用される.
  • ですので、各プロジェクトにpackageが1つしかないことをお勧めします.json(プロジェクトに格納されているルートディレクトリ)
  • npm init [--yes]でpackageを生成できます.jsonファイル
  • 同様に、依存項目情報を保存するために、サードパーティ製パッケージをインストールするたびに、--saveオプションを追加します.

  • npm共通コマンド
  • install
  • uninstall

  • Express基本使用
  • Expressを使用して、以前のメッセージのこのケースを自分で改造します
    • 1.コードを修正して自動的に再起動する
    ここでは、サードパーティ製パッケージ、nodemonを使用して、コードの変更が完了して自動的にサーバを再起動する問題を解決することができます.nodemonはnodeに基づくものである.jsが開発したサードパーティコマンドラインツールは、独立してインストールする必要があります.
    //          
npm install --global nodemon

    次の操作を行います.
    nodemon app.js

    2.モジュールIDの/とファイル操作経路の/私たちが使用しているすべてのファイル操作のAPIは非同期です.
  • ファイル操作における相対パスは省略することができる.
    • fs.readFile('data/a.txt', function (err, data) {
  if (err) {
    return console.log('    ')
  }
  console.log(data.toString())
})
  • モジュールロード中、相対パスの./
        ：
Error: Cannot find module 'data/foo.js'
// require('data/foo.js')

//    ：
 require('./data/foo.js')('hello')
    • は省略できません
  • ファイル操作の相対パス
  • ./data/a.txt現在のディレクトリ
    • に対して
  • data/a.txt現在のディレクトリ
    • に対して
  • /data/a.txt絶対パス、現在のファイルモジュールが存在するディスクルートディレクトリ
  • c:/xx/xx...絶対パス
    •  fs.readFile('./data/a.txt', function (err, data) {
   if (err) {
     console.log(err)
     return console.log('    ')
   }
   console.log(data.toString())
 })

    3.expressスタート
    3.1インストール
    npm install --save express

  node     ，       
                       nodemon        
        npm install --global nodemon//（         ）
              
        nodemon app.js
             nodemon    ，          ，        ，

    3.2 hello world 
    var express = require('express')
var app = express()

app.get('/',function(req,res){
    res.send('hello world')
})
app.listen(3000, function() {
	console.log('express app is running ...')
})

    3.3基本ルート
  • 要求方法
  • 要求経路
  • 要求処理関数
    • get: 
    //   GET       ，       
app.get('/',function(req,res){
    res.send('hello world')
})

    post: 
    //   POST       ，       
app.post('/',function(req,res){
    res.send('hello world')
})

    3.4静的サービス
    app.use(express.static('public'))
//    public     ===/public

app.use(express.static('files'))
//    files     ===/files

app.use('/public/', express.static('public'))
//   /public/(public       )===/public/xxx

app.use('/static/', express.static('public'))
//   /static/(public       )===/static/xxx

app.use('/static/', express.static(path.jion(_dirname, 'public')))

    4.expressでメッセージを書き直す
    4.1 Expressでart-templateテンプレートエンジンを構成する
    インストール:
    npm install --save art-template
npm install --save express-art-template

    構成:
    var express = require('express')
var app = express()
//    ：
app.engine('html',require('express-art-template'))

    次の操作を行います.
    app.get('/',function(req,res){
	//express        	views	       ----      
    res.render('index.html',{
    	title:'hello world'
    })
})

    デフォルトのviewsビューレンダリングディレクトリを変更する場合は、次のコードを実行します.
    //  ：      views     
app.set('views',        )

    4.2フォームPOSTリクエストボディデータをexpressで取得する方法
    expressでは、フォームgetリクエストボディデータの取得にはreq.queryが使用されますが、フォームpostリクエストボディデータを取得するAPIは内蔵されていません.ここでは、サードパーティ製パケット:body-parserに依存できます.
    インストール:
    npm install --save body-parser

    構成:
    var express = require('express')
//  
var bodyParser = require('body-parser')

var app = express()

//   body-parser
//        ， req            ：`body`
//       req.body        post      

//       ：
`// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())`

    次の操作を行います.
    app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:
    '    )
  //    req.body     post     
  res.end(JSON.stringify(req.body, null, 2))
})
  • URL入力はいずれもget方式で要求
    • を送信する.
    5.CURD-スタート
  • 初期化
  • テンプレート処理ルーティング設計
    • 5.1ルーティング設計
    リクエストメソッド
    リクエストパス
    getパラメータ
    义齿
    コメント
    GET
    /students
    レンダリングトップページ
    GET
    /students/new
    [レンダリング](Render)学生ページを追加する
    POST
    /studens/new
    name、age、gender、hobbies
    学生の追加要求の処理
    GET
    /students/edit
    id
    [レンダリング編集](Render Editing)ページ
    POST
    /studens/edit
    id、name、age、gender、hobbies
    編集要求の処理
    GET
    /students/delete
    id
    削除要求の処理
    //  utf8               utf8  ，            
//         ，     data.toString()
fs.readFile('./db.json', 'utf8', function(err,data){
    if (err) {
        return res.status(500).send('Server err')
    }
    res.render('index.html', {
        students: JSON.parse(data).students
    })
})

    5.2ルーティングモジュールの抽出
    router.js: 
    /**
 * router.js     
 *   ：
 *       
 *            +               
 *        ，    
 *                         
 *       
 */

var express = require('express')

// 1.         
var router = express.Router()

// 2.         router      
router.get('/students/new', function (req, res) {
  res.render('new.html')
})

router.post('/students/new', function (req, res) {
 
})

router.get('/students/edit', function (req, res) {

})

router.post('/students/edit', function (req, res) {

})


router.get('/students/delete', function (req, res) {
 
})
//3.        
module.exports = router

    app.js: 
    var router = require('./router')

//    
app.user(router)

    5.3操作データを設計するAPIファイルモジュール
    /**
 *       
 * @param  {Function} callback     
 */
exports.find = function(callback) {
  
}

/**
 *       
 * @param  {Object}   student      
 * @param  {Function} callback     
 */
exports.save = function(student, callback) {
  
}

/**
 *     
 */
exports.updateById = function(student, callback) {
  
}

/**
 *     
 */
exports.deleteById = function(id, callback) {
  
}

    自分で作成したテンプレート
  • 処理テンプレート
  • オープンスタティックリソース
    • を構成する.
  • 単純ルーティング:/studentレンダリングページ
  • ルーティング設計
  • 抽出ルーティングモジュール
  • 次の操作はすべてデータを処理する必要があるため、student.js
    • をパッケージ化します.
  • まずstudentを書きます.jsのファイル構造
  • すべての学生のリストAPI find
    • を検索する
  • findByid
  • save
  • updateByid
  • deleteByid

  • 具体的な機能を実現
  • ルーティングにより要求
    • を受ける.
  • 要求中のデータを受信する(get,post)
  • res.query
  • res.body

  • 呼び出しデータ操作API処理データ
  • は、動作結果に基づいてクライアントに応答
    • を送信する.
  • 業務機能データ
  • リスト
  • 追加
  • 編集
  • 削除
  • ES 6のAPI
  • find
  • findIndex

  • ファイルパスの/およびモジュールIDの/
  • Expressでart-templateテンプレートエンジン
    • を使用するように構成
  • Expressではbody-parser
    • を使用するように構成されています.
  • Expressにおける構成処理静的リソース
  • CRUDケースにおけるルーティングモジュール
    • の個別抽出
    divをリアルタイムで傍受し、inputコンテンツを変更して値を取得します(スクリプトの動的追加を含む).
    ループループの方法