GyuhoLee

[Update] Nodejs, Jquery connect

...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 <link rel="stylesheet" href="/style.css" crossorigin="anonymous"> 7 <link rel="stylesheet" href="/style.css" crossorigin="anonymous">
8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
9 integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 9 integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10 - <link href="https://fonts.googleapis.com/css?family=Jua&display=swap" rel="stylesheet"> 10 + <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">
11 </head> 11 </head>
12 12
13 <body> 13 <body>
...@@ -21,17 +21,16 @@ ...@@ -21,17 +21,16 @@
21 </div> 21 </div>
22 <div class = "sub"> 22 <div class = "sub">
23 <input type="text" id="location_input" value="영통1동" autofocus="true"> 23 <input type="text" id="location_input" value="영통1동" autofocus="true">
24 - <button id="location_button">입력</button> 24 + <button id="location_button" onclick="button_click()">입력</button>
25 </div> 25 </div>
26 - <script src="https://code.jquery.com/jquery-3.3.1.min.js"
27 - integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
28 - crossorigin="anonymous"></script>
29 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 26 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
30 integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 27 integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
31 crossorigin="anonymous"></script> 28 crossorigin="anonymous"></script>
32 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 29 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
33 integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 30 integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
34 crossorigin="anonymous"></script> 31 crossorigin="anonymous"></script>
32 + <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
33 + <script src ="/js/app.js"></script>
35 </body> 34 </body>
36 35
37 </html> 36 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 +
2 +const locationData = function button_click(){
3 + var dTemp = $('#location_input').val();
4 + location.href="/result.html";
5 + return dTemp;
6 + }
7 +
8 +exports.locationData = locationData;
9 +
10 +
11 +
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +
4 +<head>
5 + <meta charset="UTF-8">
6 + <title>OSSW</title>
7 + <link rel="stylesheet" href="/style.css" crossorigin="anonymous">
8 + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
9 + integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10 + <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">
11 +</head>
12 +
13 +<body>
14 + <nav class="navbar navbar-light bg-light" style="border-bottom: 1px solid lightgray;">
15 + <a class="navbar-brand" href="#" style="margin-left: 15px;">
16 + <img src="/image/logo.png" style="height:250px;"/>
17 + </a>
18 + </nav>
19 + <div class = "main">
20 + <span class="result_icon">
21 + <div>최저</div>
22 + <div class="low temper">3ºC</div>
23 + </span>
24 + <span class = "result_icon">
25 + <div>평균</div>
26 + <div class="middle temper">5ºC</div>
27 + </span>
28 + <span class = "result_icon">
29 + <div>최고</div>
30 + <div class="high temper">7ºC</div>
31 + </span>
32 + </div>
33 + <div class = "sub">
34 +
35 + </div>
36 + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
37 + integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
38 + crossorigin="anonymous"></script>
39 + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
40 + integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
41 + crossorigin="anonymous"></script>
42 + <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
43 + <script src ="/js/app.js"></script>
44 +</body>
45 +
46 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +body{
2 + font-family: 'Noto Sans KR', sans-serif;
3 +}
4 +
1 .main, .sub{ 5 .main, .sub{
2 margin-top: 200px; 6 margin-top: 200px;
3 text-align: center; 7 text-align: center;
4 - background:color= gray;
5 } 8 }
6 9
7 .icon{ 10 .icon{
...@@ -16,4 +19,21 @@ ...@@ -16,4 +19,21 @@
16 19
17 #location_button{ 20 #location_button{
18 font-size:50px; 21 font-size:50px;
19 -}
...\ No newline at end of file ...\ No newline at end of file
22 +}
23 +
24 +.result_icon{
25 + font-family: 'Noto Sans KR', sans-serif;
26 + margin-left: 30px;
27 + margin-right: 30px;
28 + display: inline-block;
29 + width: 225px;
30 + height: 225px;
31 + background-image: url("/image/circle.png");
32 + padding-top: 50px;
33 + font-size: 35px;
34 +}
35 +
36 +.temper{
37 + font-size: 55px;
38 +}
39 +
......
...@@ -16,6 +16,9 @@ var app = http.createServer(function(request,response){ ...@@ -16,6 +16,9 @@ var app = http.createServer(function(request,response){
16 }); 16 });
17 app.listen(8080); 17 app.listen(8080);
18 18
19 +
20 +
21 +
19 const {PythonShell} = require('python-shell'); 22 const {PythonShell} = require('python-shell');
20 23
21 var options = { 24 var options = {
...@@ -26,12 +29,14 @@ var options = { ...@@ -26,12 +29,14 @@ var options = {
26 args: ["영통1동"] 29 args: ["영통1동"]
27 }; 30 };
28 31
32 +
33 +const appdata = require('./js/app.js');
34 +
29 var arr; 35 var arr;
30 var test = new PythonShell('recommend_clothes.py', options); 36 var test = new PythonShell('recommend_clothes.py', options);
31 -var data='영통1동'; 37 +var data= appdata.locationData();
32 test.send(data); 38 test.send(data);
33 test.on('message',function(message){ 39 test.on('message',function(message){
34 arr = message.split('\n'); 40 arr = message.split('\n');
35 console.log(arr); 41 console.log(arr);
36 -}) 42 +})
37 -
...\ No newline at end of file ...\ No newline at end of file
......