node.js+Express+pug로 DBD 맵 카운터 만들기
소개
DBD라는 대인 게임에서, 어떤 캐릭터를 사용하면 서투른 맵만 닿기 때문에, 의심에서 맵 카운터를 만들었습니다. (또한 결과로는 내가 서투른지도가 DBD에 많았을 뿐이었습니다!)
목차
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')
끝에
이상 모든 소스 코드를 기재한 것은 아니지만, 막힐 우려가 있는 점에 대해 해설할 수 있었습니다.
만약 질문이 있으면 부디 코멘트에 부디.
Reference
이 문제에 관하여(node.js+Express+pug로 DBD 맵 카운터 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/gorira/items/7381e98b37b528bf5ae5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)