データをサーバー側に配置する-Express MongoDB を使って簡単なアプリを作る

前回の記事

Express MongoDB を使って簡単なアプリを作る
前回の記事で、おみくじが引けるようになったのですが、改ざんが容易に出来てしまいますので、占いの結果のみをサーバーからもらうように変更したいと思います。

サーバー側は、routes/index.js で作って行きます。 main.jsで作った配列を持ってきます。

簡単に説明しますと、/ にアクセスすると、index.pug を参照します。
/api/random にアクセスすると配列から一個値をランダムで取り出し,json形式で値を返します。

var express = require('express');  
var router = express.Router();  

/* GET home page. */  
router.get('/', function(req, res, next) {  
  res.render('index', { title: 'Express' });  
});  
router.get('/api/random', (req, res, next) => {  
  const items = [ '大吉', '中吉', '末吉', '凶']  
  const random = Math.floor(Math.random()*items.length)  
  const item = {  
    item: items[random]  
  }  
  res.json(item)  
})  

module.exports = router;  

ブラウザーのURL欄から、アクセスしてみます。


リロードをすると、値がランダムに変わるので、これをフロント側で取得すれば良さそうです。

/api/randomの値を取得をするには、httpリクエストを扱えるfetchを使います。

fetchを使って/api/randomにアクセスすると返り値は、プロミス値として返ってきます。具体的には、正常ならthenにエラーならcatchに返ってきます。 thenのデータは、数珠つなぎで処理を渡していけます。
fetchについては、別の記事で紹介していますので、よければ見ていってください。


javascripts/main.js


document.addEventListener('DOMContentLoaded', () => {  
  'use strict'  

  const btn = document.querySelector('#btn')  

  btn.addEventListener('click', () => {  
    // const items = [ '大吉', '中吉', '末吉', '凶']  
    // const random = Math.floor(Math.random()*items.length)  
    // btn.textContent = items[random]  

    const url = 'http://localhost:3000/api/random'  
    fetch(url)  
      .then(res => {  
        return res.json()  
      })  
      .then(result => {  
        btn.textContent = result.item  
        console.log(result.item)  
      })  
      .catch(err => {  
        console.error(err)  
      })  
  })  
})  

サーバー側で、json形式で投げていますが、fetchで受けると、jsonデータ以外のデータも渡ってきますので、改めてレスポンスをres.json()で必要なデータを取得しています。
このデータは、サーバー側から取得していますので、デベロッパーツールでの改ざんは出来ません。

今回は、ここまでにしたいと思います。
次回は、MongoDBにデータをいれて、データを操作できるようにしたいと思います。

MongoDBは、すでに使える前提ですので、まだの場合検索してインスールをしていただければと思います。

ここまでのコード

コミット: step2.0
コードは、githubにもupしていますので、うまく動かない方は覗いてみてください。https://github.com/atoris1192/omikujiExpress2

git reset --hard e0ce2a91e2e2f  
git pull origin master  
git reset --hard e87b2fc88c47