node.js+Express+pug로 DBD 맵 카운터 만들기

소개



DBD라는 대인 게임에서, 어떤 캐릭터를 사용하면 서투른 맵만 닿기 때문에, 의심에서 맵 카운터를 만들었습니다. (또한 결과로는 내가 서투른지도가 DBD에 많았을 뿐이었습니다!)

목차


  • node.js+Express+pug 설치
  • DBD의 맵을 스크리핑
  • JSON 읽기/쓰기
  • 동적 링크 처리
  • .pug에 변수 전달
  • .pug로 HTML 생성
  • css 묘사

  • 1.node.js+Express+pug 설치



    여기 보면서 설치

    2. DBD 맵을 스크래핑



    치열한 소스이지만 움직입니다!

    dbdmap.py
    from time import sleep
    import json
    
    def main():
        import requests
        from bs4 import BeautifulSoup
    
        FullURL = "https://deadbydaylight.fandom.com"
        URL = "https://deadbydaylight.fandom.com/wiki/Dead_by_Daylight_Wiki"
        page = requests.get(URL)
    
        soup = BeautifulSoup(page.content, "html.parser")
    
        results = soup.find(id="fpRealms")
        results = results.find("div", {"class": "fplinks"})
        results = results.find_all("a")
    
        maplst = []
    
        mapdict = {}
    
        for result in results:
            dbdmap = result["href"]
            if not dbdmap in maplst:
                maplst.append(dbdmap)
    
        for mapdbd in maplst:
            mapurl = FullURL + mapdbd
            mappage = requests.get(mapurl)
            mapsoup = BeautifulSoup(mappage.content, "html.parser")
    
            mapresults = mapsoup.find("table", {"class": "wikitable"})
            mapresults = mapresults.find("tbody")
            mapresults = mapresults.find("tr")
            mapresults = mapresults.find_all("td")
    
            for mapresult in mapresults:
                mapresult = mapresult.find("center")
                mapresult = mapresult.find("a")
                mapdict[mapresult.text.strip()] = 0
    
            sleep(3)
    
        with open('<保存したい場所>.json', 'w') as outfile:
            json.dump(mapdict, outfile)
    
    if __name__ == "__main__":
        main()
    

    이렇게하면 다음과 같은 JSON을 얻을 수 있습니다.
    {"Coal Tower": 0, "Groaning Storehouse": 0, "Ironworks of Misery": 0, ...
    

    3.JSON 읽기/쓰기



    여기서 막혔으므로 몇 가지 주의점을 적어 둡니다.

    json은 클라이언트 측에서 읽고 쓸 수 없습니다.

    즉, 생성된 웹페이지에 내장된 스크립트에서는 조작할 수 없습니다. 따라서 서버 측에서 작업해야 합니다.

    또, 서버측에서의 조작은 routes/index.json로 실시합니다. (요청된 페이지에 해당하는 파일)
    const fs = require('fs');
    const filePath = "./routes/dbdmap.json"
    
    //jsonを読み取る
    const dbdmaplst = require("./dbdmap.json");
    
    //jsonに書き込む
    fs.writeFile(filePath, JSON.stringify(dbdmaplst), (err) => {
      if (err) console.log('Error writing file:', err)
    })
    

    4. 동적 링크 처리



    카운터이므로, index/"map명"/"up/down"와 같은 동적 링크를 취급할 수 있도록(듯이) 합니다.

    여러 개 설정할 수 있습니다.
    router.get('/', function(req, res, next) {
    
    router.get('/:map/:vote', function(req, res, next) {
    

    받은 링크의 키워드를 인수처럼 취급할 수 있습니다.
    router.get('/:map/:vote', function(req, res, next) {
      const dbdmaplst = require("./dbdmap.json");
      const vote = req.params.vote;
      if (vote == "up") {
        dbdmaplst[req.params.map] += 1;
      }
      else if (vote == "down") {
        if (dbdmaplst[req.params.map] > 0) {
          dbdmaplst[req.params.map] -= 1;
        }
      }
    

    5.pug에 변수를 전달



    json 형식으로 변수를 전달합니다.
    res.render('index', { title: 'Epress', dbdmap: dbdmaplst});
    

    이상 index.js의 완전한 소스는 여기

    index.js
    var express = require('express');
    var router = express.Router();
    
    //read json
    const fs = require('fs');
    const filePath = "./routes/dbdmap.json"
    
    /* GET home page. */
    router.get('/', function(req, res, next) {
      const dbdmaplst = require("./dbdmap.json");
      res.render('index', { title: 'Epress', dbdmap: dbdmaplst});
    });
    
    router.get('/:map/:vote', function(req, res, next) {
      const dbdmaplst = require("./dbdmap.json");
      const vote = req.params.vote;
      if (vote == "up") {
        dbdmaplst[req.params.map] += 1;
      }
      else if (vote == "down") {
        if (dbdmaplst[req.params.map] > 0) {
          dbdmaplst[req.params.map] -= 1;
        }
      }
    
      fs.writeFile(filePath, JSON.stringify(dbdmaplst), (err) => {
        if (err) console.log('Error writing file:', err)
      })
    
      res.render('index', { title: 'DBD MAP LOG', dbdmap: dbdmaplst});
    });
    module.exports = router;
    
    

    6 .pug에서 HTML 생성



    pug는 파이썬처럼 들여 쓰기로 관리되는 것 같습니다.

    이하 소스내에 주의점을 기재

    index.pug
    //layout.pugをテンプレートに使う
    extends layout
    
    //テンプレート内のblock contentに置き換えられる
    block content
      //'-'を先頭に記載することでjavascriptを組み込むことができる。
      -var count = 0;
      div(class="tbl")
        table(cellpadding=10)
          //pug 独自のfor/while/if-else文を扱える
          //ここの'dbdmap'はindex.jsから受け取ったもの
          each val, key in dbdmap
            -count += val;
            tr 
              //'#{}'で変数を扱うことができる。
              td #{val}
              td #{key}
              td
                a(href= "/" + key + "/up") up
              td 
                a(href= "/" + key + "/down") down
    
          h2 Match count: #{count}
    

    pug의 기술 방법은 여기

    7.css 묘사



    css 잘 모르겠습니다만, 이런 느낌으로 하면 좋은 느낌이 되었습니다. . .

    style.css
    body {
      padding: 50px;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    }
    
    a {
      color: #00B7FF;
    }
    
    table, tr, td {
      border: 1px solid black;
      padding: 10px;
    }
    
    table {
      display: inline-block;
      float: left;
    }
    

    css를 읽는 방법. 템플릿의 layout.pug에 기재한다.

    layout.pug
    doctype html
    html
      head
        title= title
      body
        block content
        //javascript
        script(src='/javascripts/todo.js')
        //css
        link(rel='stylesheet', href='/stylesheets/style.css')
    

    끝에





    이상 모든 소스 코드를 기재한 것은 아니지만, 막힐 우려가 있는 점에 대해 해설할 수 있었습니다.

    만약 질문이 있으면 부디 코멘트에 부디.

    좋은 웹페이지 즐겨찾기