nodeを使用してhero小プロジェクトを行う(二)

三、indexを完成する.htmlページ開発
3.1 getHeroesインタフェースの完了
app.js中

// =======================================================
//   
//      db  
const db = require('./db');
// 1.        
app.get('/getHeroes', (req, res) => {
  //     db  ，      
  db('select * from heroes order by id desc', null, (err, result) => {
    if (err) throw err;
    //             
    res.send(result); // send   js      json  ，     
  });
});

ブラウザまたはpostmanを使用して、すべてのヒーローを受信できるかどうかをテストします.
[外部チェーンピクチャの転送に失敗しました(img-SyQvX 8 A f-157857697489)(assets/1567818235874.png)]
実行git add app.jsおよびgit commit -m ' getHeroes ， '3.2フロントエンドはajax要求を送信し、応答したデータをページにレンダリングする
indexでhtmlで、コードを作成し、リクエストを送信します.

    $.get('/getHeroes', function (res) {
      // console.log(res);
      var str = template('muban', {
        arr: res
      });
      $('tbody').html(str);
    }, 'json')

テンプレートコード

  <script id="muban" type="text/html">
    {{each arr}}
    <tr>
      <td><img src="{{$value.file}}" alt="" /></td>
      <td>{{$value.name}}</td>
      <td>{{$value.skill}}</td>
      <td>
        <button onclick="location.href='./edit.html'" class="btn btn-primary">  </button>
        <button onclick="alert('   ')" class="btn btn-danger">  </button>
      </td>
    </tr>
    {{/each}}
  </script>

実行git add manager/index.htmlおよびgit commit -m ' getHeroes ， '四、新規の完成
4.1処理フォーム

フォームに欠落している項目があるかどうかを確認する

各項目にname属性があるかどうかをチェック

コミットボタンがsubmitかbuttonかを見て、デフォルトの動作を阻止するかどうか

に関連します.
4.2ローカル画像プレビュー

    $('#heroIcon').change(function () {
      // 1.       
      // console.dir(this);
      var fileObj = this.files[0];
      // 2.             url
      var url = URL.createObjectURL(fileObj);
      // 3.         src    url  
      $('.preview').attr('src', url);
    })

4.3フロントエンドは要求を送信し、データをインタフェースに提出し、追加を完了する

    $('.btn-success').click(function (e) {
      e.preventDefault();
      var formdata = new FormData($('form')[0]);
      $.ajax({
        type: 'POST',
        url: '/addHero',
        data: formdata,
        dataType: 'json',
        success: function (res) {
          alert(res.msg);
          if (res.code == 200) {
            location.href = 'index.html';
          }
        },
        contentType: false,
        processData: false
      });

    });

4.4サービス側がインタフェースの追加を完了
端末にmulterモジュールnpm i multerをインストールする
app.jsでヒーローを追加するインタフェースを完了

// 2.          
//   multer  
const multer = require('multer');
//   multer
const upload = multer({dest: 'upload/'});

app.post('/addhero', upload.single('heroIcon'), (req, res) => {
  let sql = 'insert into heroes set ?';
  let values = {
    name: req.body.heroname,
    nickname: req.body.heroNickName,
    skill: req.body.skillName,
    file: req.file.filename
  };
  db(sql, values, (err, result) => {
    if (err) {
      res.send({code: 201, message: '    '});

    } else {
      res.send({code: 200, message: '    '});
    }
  })
})

body-parserを使うべきですか、それともmulterを使うべきですか.

リクエストボディのフォーマット(リクエストヘッダのContent-Type)

application/x-www-form-urlencoded

serialize()を使用する場合、この符号化フォーマット

になります.

body-parser

を使用

multipart/form-data

FormDataを使用する場合、この符号化フォーマット

になります.

multer

を使用


ヒーローを追加する場合は、ファイルアップロードがあるのでFormDataを使わなければなりません.Multierを使わなければなりません.
詳細については=>express/multer