오늘은 Flask 라이브러리를 이용한 Python WEB Server를 구축하여 간단한 WEB Service를 구현해보았다.
app.py
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/smile')
def smile():
return render_template("smile.html")
@app.route('/dots')
def dots():
return render_template("dots.html")
@app.route('/404')
def error():
return render_template('404.html')
@app.route('/clock')
def clock():
return render_template('clock.html')
if __name__ == '__main__':
app.run(debug=True, host='192.168.31.179', port=5050)
app.run(debug=True, host='0.0.0.0', port=5050)
Frontend
HTML CSS JS 코드는 너무 방대하여 일부만 블로그에 올리겠습니다.
모든 소스 코드가 필요한 경우 아래에 소스 코드 링크를 걸어두도록 하겠습니다.
소스 코드는 상업적 목적으로 사용은 불가하며 참고용으로만 이용해 주시길 바랍니다.
주의 : 블로그에 등록된 소스코드만으로는 정상적인 실행은 불가하오니 GITHUB 링크에 접속하여 전체 소스코드를 실행해보시기 바랍니다.
index.html의 기능중 하나인 음악 재생 기능을 이용하려면 노래파일을 다운로드후 실행가능합니다.
노래 파일 다운 링크
[christmas.mp3]
https://drive.google.com/file/d/1Ye2_frVswUbaoPRTJt1kIIBmksRM2fBG/view?usp=sharing
christmas.mp3
drive.google.com
주의 : HTML 소스 코드에 노래 파일의 경로에 맞게 노래 파일을 넣어서 사용
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
</head>
<body>
<audio id="audio" autoplay loop">
<source src="{{ url_for('static', filename='music/christmas.mp3') }}">
</audio>
<script>
var audio = document.getElementById("audio");
audio.volume = 0.2;
</script>
<div class="container">
<div class="header">
<h1><a href="/">JAHYUN</a></h1>
<div class="nav">
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/clock">CLOCK</a></li>
<li><a href="/smile">SMILE</a></li>
<li><a href="/dots">DOTS</a></li>
<li><a href="/404">404</a></li>
</ul>
</div>
</div>
<div class="hero">
<h2>WELCOME TO MY WEBSITE</h2>
<p>이 웹사이트는 재밌는 경험을 할수 있는 웹 사이트입니다.<br>
MAIN 페이지에서는 눈이 내리는 예쁜 야경과 감미로운 크리스마스 배경음악이 깔려있습니다.<br>
노래를 재생하려면 상단 우측에 HOME버튼을 클락하거나 상단 좌측에 LOGO인 JAHYUN을 클릭하십시오.<br>
SMILE 페이지는 클릭요소가 들어간 귀여운 스마일 이모티콘과 네온색으로 색다른 경험을 하실 수 있습니다.<br>
404 페이지는 무한 동력의 구가 404 페이지를 꾸며준 색다른 에러페이지를 경험하실 수 있습니다.<br>
DOTS 페이지는 마우스포인터를 따라다니는 네온색의 원들을 경험하실 수 있습니다.<br>
CLOCK 페이지는 예쁜 시계를 볼수 있습니다.
</p>
<button>LIKE</button>
</div>
</div>
<div class="snow-wrapper" ref="wrapper">
<transition-group @before-enter="beforeEnter">
<div class="snow" :class="{falling:play}" v-for="(snow, index) in snowUnits" :key="index"></div>
</transition-group>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
</body>
</html>
index.css
@font-face {
font-family: abster;
src: url('/static/font/abster-webfont.woff') format('woff');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url('/static/image/index_background_image.jpg');
}
.container .header {
width: 80%;
height: 80px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .header h1 a {
text-decoration: none;
color: white;
font-family: abster;
}
.container .nav ul li {
display: inline-block;
margin: 0 10px;
}
.container .nav ul li a {
text-decoration: none;
color: white;
}
.container .nav ul li a:hover {
color: #ff6600;
text-shadow: 0px 0px 24px #ff6600;
cursor: pointer;
}
.container .hero {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container .hero h2 {
font-size: 60px;
margin-bottom: 20px;
}
.container .hero p {
font-size: 14px;
}
.container .hero button {
background: none;
border: 2px solid rgb(255, 255, 255);
color: white;
padding: 15px 20px;
border-radius: 20px;
margin-top: 30px;
outline: none;
cursor: pointer;
transition: all .4s;
}
.container .hero button:hover {
color: #ff6600;
border: 2px solid #ff6600;
text-shadow: 0px 0px 24px #ff6600;
box-shadow: 0px 0px 24px 2px #ff6600;
cursor: pointer;
}
.snow-wrapper > .snow {
position:absolute;
background:#fff;
width:1em;
height:1em;
border-radius: 50%;
z-index: 1000;
top:-5%;
}
.snow.falling {
animation-name: falling;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 10s;
}
@keyframes falling {
from {
top:-5%;
}
to {
top:95%;
}
}
@keyframes glittering {
0% {
opacity:0;
}
50% {
opacity:1;
}
100% {
opacity:0;
}
}
index.js
Vue.createApp({
data(){
return {
play:true,
sequence:1,
snowUnits:[],
};
},
methods:{
add(){
this.snowUnits.push(this.sequence++);
},
generateSnow(size){
for(let i=0; i < size; i++){
this.add();
}
},
beforeEnter(el){
const offset = -40;
const min = -offset;
const max = window.screen.width + offset;
const left = this.generateRandomInteger(min, max);
el.style.left = left + "px";
const scale = this.generateRandom(0.002, 0.4);
el.style.transform = "scale("+scale+")";
const opacity = this.generateRandom(0.02, 1);
el.style.opacity = opacity;
const delay = this.generateRandom(1, 10000);
const duration = this.generateRandom(6000, 40000);
el.style.animationDelay = delay+"ms";
el.style.animationDuration = duration + "ms";
},
generateRandom(begin, end){
const max = Math.max(begin, end);
const min = Math.min(begin, end);
const range = max - min;
return Math.random() * range + min;
},
generateRandomInteger(begin, end){
return parseInt(this.generateRandom(begin, end));
}
},
mounted(){
this.generateSnow(500);
},
}).mount(".snow-wrapper");
index 실행 화면
index.html + index.css + index.js
주의 : 블로그에 등록된 소스코드만으로는 정상적인 실행은 불가하오니 GITHUB 링크에 접속하여 전체 소스코드를 실행해보시기 바랍니다.
소스 코드 링크
https://github.com/levhyun/flaskWEB
GitHub - levhyun/flaskWEB: It is a web service that uses flask, a python web framework, to build a simple web server and build a
It is a web service that uses flask, a python web framework, to build a simple web server and build a design with various interesting elements. - GitHub - levhyun/flaskWEB: It is a web service that...
github.com
'Python' 카테고리의 다른 글
| Python Database (0) | 2023.01.18 |
|---|---|
| Python Translator (0) | 2023.01.18 |
| Python Socket Programming (0) | 2023.01.06 |
