드디어 노가다 시작… OTL
제한효소는 연동되는 DB가 있어서 그것도 해결봐야 하고, 정규식 쓸 일도 있고 해서 일단 얘부터 이식하기로 했다. DB는 csv파일 못 불러오면 몽고DB 연동해서 아예 쌩으로 갖고와야 해서 잘못하면 진짜 대공사 들어갈수도 있다.
현재 완성된 부분
아직 어비웃페이지까지만 만들었다. 뒤쪽은 입력받아야 해서 또 그려봐야됨…
구현된 기능
- 탭 메뉴(어바웃/텍스트/엔드레즈)
- 어바웃 페이지
뼈대 코드
app.py
from flask import Flask, render_template
from Bio import Entrez
from wordcloud import WordCloud
from wordcloud import STOPWORDS
import matplotlib.pyplot as plot
from PIL import Image
import numpy as np
from argparse import FileType
import tkinter
from tkinter import filedialog
import re
from konlpy.tag import Okt
import nltk
okt=Okt()
app = Flask(__name__)
@app.route('/')
def hello_world(): # put application's code here
return render_template('index.html')
if __name__ == '__main__':
app.run()참고로 플라스크 프로젝트의 첫 빠따는 app.py가 국룰이다. 여기 혹시 모듈 정모 있나요 네 있습니다
HTML(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/style.css">
<title>Project wordcloud</title>
</head>
<body>
<div class="wrap">
<h1>Project wordcloud</h1>
<div class="tab_wc">
<ul class="list">
<li class="focus">
<a href="#tab1" class="btn">About project wordcloud</a>
<div id="tab1" class="cont">어바웃 페이지입니다</div>
</li>
<li>
<a href="#tab2" class="btn">Wordcloud with text</a>
<div id="tab2" class="cont">Wordcloud with text</div>
</li>
<li>
<a href="#tab3" class="btn">Entrez with wordcloud</a>
<div id="tab3" class="cont">Entrez with wordcloud</div>
</li>
</ul>
</div>
</div>
<script src="/static/script.js"></script>
</body>
</html>이제 여기는 코드단에서 만질 건 내용밖에 없다.
CSS
@import url('https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap');
* {
margin:0;
padding:0;
font-family: 'Yeon Sung', cursive;
font-size:15pt;
}
ul {
list-style-type:none;
}
a{
text-decoration:none;
}
h1 {
text-align:center;
font-size:25pt;
margin:15px auto;
}
h2 {
font-size:18pt;
margin-bottom:5px;
}
h3{
margin-bottom:5px;
}
img {
width:500px;
}
span {
text-align:center;
display:block;
font-size:15pt;
}
p{
margin-bottom:20px;
}
.image{
margin:5px auto;
width:500px;
}
.wrap {
width:1080px;
margin:0 auto;
padding:15px;
letter-spacing:-0.5px;
}
.tab_wc {
position:relative;
}
.tab_wc .list {
overflow:hidden;
}
.tab_wc li {
float:left;
}
.tab_wc .list .btn {
font-size:16pt;
color:#00498c;
width:220px;
height:50px;
display:inline-block;
text-align:center;
line-height:50px;
background-color:#fefefe;
border-bottom:2px solid #fefefe;
}
.tab_wc .list .cont {
font-size:14pt;
display:none;
position:absolute;
left:0;
background-color:white;
color:#fff;
width:1080px;
height:auto;
line-height:30px;
padding:20px;
}
.tab_wc .list li.focus .btn {
background-color:#f5f5f5;
border-bottom:2px solid #00498c;
color:#00498c;
display:block;
}
.tab_wc .list li.focus .cont {
display:block;
background-color:#f5f5f5;
color:#000;
}여기는 요소가 추가되면 모를까, 크게 만질 건 없다.
JS
const tabList = document.querySelectorAll('.tab_wc .list li');
console.log(tabList)
for(var i = 0; i < tabList.length; i++){
tabList[i].querySelector('.btn').addEventListener('click', function(e){
e.preventDefault();
for(var j = 0; j < tabList.length; j++){
tabList[j].classList.remove('focus');
}
this.parentNode.classList.add('focus');
});
}탭 메뉴때문에 추가한 스크립트라 여기도 아직까지 크게 건들 건 없다. …없다고 해주세요.
Reply