node js naver news APIのバインド

46908 ワード
テキストリンク

結果ウィンドウ




コードニュース。js

// 네이버 검색 API예제는 블로그를 비롯 전문자료까지 호출방법이 동일하므로 blog검색만 대표로 예제를 올렸습니다.
// 네이버 검색 Open API 예제 - 블로그 검색
var express = require('express');
var app = express();

app.get('/search/news', (req, res)=> { //람다식
    const client_id = '너님들 아이디';
    const client_secret = '너님들 비번';
    const api_url = 'https://openapi.naver.com/v1/search/news?display=30&query=' + encodeURI('코인'); // json 결과
//   var api_url = 'https://openapi.naver.com/v1/search/blog.xml?query=' + encodeURI(req.query.query); // xml 결과
    // const request = require('request');
    var request = require('request');
    const option = {};
    const options = {
       url: api_url, qs: option,
       headers: {'X-Naver-Client-Id':client_id, 'X-Naver-Client-Secret': client_secret}
    };
   request.get(options, (error, response, body)=> { //function이 =>로 해결되네
     if (!error && response.statusCode == 200) {
       let newsItems = JSON.parse(body).items; //items - title, link, description, pubDate
       const newsArray = [];
       for(let i=0; i< newsItems.length; i++){
           let newsItem = {};
           newsItem.title=newsItems[i].title.replace(/(<([^>]+)>)|&quot;/ig,""); //나머지 아이템들 생략
           newsItem.link=newsItems[i].link.replace(/(<([^>]+)>)|&quot;/ig,"");
           newsItem.description=newsItems[i].description.replace(/(<([^>]+)>)|&quot;/ig,"");
           newsItem.pubDate=newsItems[i].pubDate.replace(/(<([^>]+)>)|&quot;/ig,"");
           newsArray.push(newsItem);
       }
    //    res.writeHead(200, {'Content-Type': 'text/json;charset=utf-8'});
    //    res.end(body);
    res.json(newsArray);
     } else {
       res.status(response.statusCode).end(); //출력하는 부분
       console.log('error = ' + response.statusCode);
     }
   });
 });
 app.listen(3000, function () {
   console.log('http://127.0.0.1:3000/search/news?query=검색어 app listening on port 3000!');
 });
itemの名前はです
ここで見ればいい
ニュースアイテム名のページを表示
今、ニュースを見せてあげます.
出力の仕方がとても难しいです.(張基俊)

タイトルをクリックすると、リンクでニュースを見ることができます.

コア


jsでnaver apiコードをいくつか書きました
これをコアとして提示します.
ではejsを使うのは簡単です.

レンダー(Render)


まずviewsフォルダで
newsList.ejsを作成します.

さらにejsはhtmlとjavaのjspを学習する際に使用される<%>も提供する.
<%=%>を使用します.

newsList.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>네이버 뉴스 검색 결과</h1>
    <ul>
       <%for(var i=0;i< result.length;i++){%>
        <li># <%=i%> <br>
            <h2 style="color:blue"><a href='<%=result[i].link%>'><%=result[i].title%></a></h2><br>
        <%=result[i].description%>
        <%}   %>
    </li>
        <br>
    </ul>
</body>

</html>
このように使う
結果の原因は

news.js

// 네이버 검색 API예제는 블로그를 비롯 전문자료까지 호출방법이 동일하므로 blog검색만 대표로 예제를 올렸습니다.
// 네이버 검색 Open API 예제 - 블로그 검색
var express = require('express');
var app = express();

//ejs뷰 템플레이트
//익스프레스에서 뷰 엔진을 ejs로 설정
app.set('/views',__dirname+'/views');
app.set('view engine', 'ejs');

app.get('/search/news', (req, res) => { //람다식
    const client_id = 'f9I06yzTAQxLEyAYNCIr';
    const client_secret = 'kbNXwsmN_D';
    const api_url = 'https://openapi.naver.com/v1/search/news?display=30&query=' + encodeURI('코인'); // json 결과
    //   var api_url = 'https://openapi.naver.com/v1/search/blog.xml?query=' + encodeURI(req.query.query); // xml 결과
    // const request = require('request');
    var request = require('request');
    const option = {};
    const options = {
        url: api_url, qs: option,
        headers: { 'X-Naver-Client-Id': client_id, 'X-Naver-Client-Secret': client_secret }
    };
    request.get(options, (error, response, body) => { //function이 =>로 해결되네
        if (!error && response.statusCode == 200) {
            let newsItems = JSON.parse(body).items; //items - title, link, description, pubDate
            const newsArray = [];
            for (let i = 0; i < newsItems.length; i++) {
                let newsItem = {};
                newsItem.title = newsItems[i].title.replace(/(<([^>]+)>)|&quot;/ig, ""); //나머지 아이템들 생략
                newsItem.link = newsItems[i].link.replace(/(<([^>]+)>)|&quot;/ig, "");
                newsItem.description = newsItems[i].description.replace(/(<([^>]+)>)|&quot;/ig, "");
                newsItem.pubDate = newsItems[i].pubDate.replace(/(<([^>]+)>)|&quot;/ig, "");
                newsArray.push(newsItem);
            }
            //    res.writeHead(200, {'Content-Type': 'text/json;charset=utf-8'});
            //    res.end(body);
            //res.json(newsArray);
            var context ={result:newsArray};
            req.app.render('newsList', context, function (err, html) {
                if (err) {
                    console.error('뷰 렌더링 중 오류 발생 : ' + err.stack);
                    res.writeHead('200', { 'Content-Type': 'text/html;charset=utf8' });
                    res.write('<h2>뷰 렌더링 중 오류 발생</h2>');
                    res.write('<p>' + err.stack + '</p>');
                    res.end();
                    return;
                    // //결과 객체 있으면 리스트 전송 
                    // console.dir(results);
                }
                res.end(html);
            })
        } else {
            res.status(response.statusCode).end(); //출력하는 부분
            console.log('error = ' + response.statusCode);
        }
        //  return newsItems;
    });

});
app.listen(3000, function () {
    console.log('http://127.0.0.1:3000/search/news?query=검색어 app listening on port 3000!');
});
news.jsのコードから見ると
//ejs뷰 템플레이트
//익스프레스에서 뷰 엔진을 ejs로 설정
app.set('/views',__dirname+'/views');
app.set('view engine', 'ejs');
ここにはviewsというフォルダがありますejsファイルを
ビューエンジンでレンダリングできるように設定します.
まだあります.
var context ={result:newsArray};
            req.app.render('newsList', context, function (err, html) {
                if (err) {
                    console.error('뷰 렌더링 중 오류 발생 : ' + err.stack);
                    res.writeHead('200', { 'Content-Type': 'text/html;charset=utf8' });
                    res.write('<h2>뷰 렌더링 중 오류 발생</h2>');
                    res.write('<p>' + err.stack + '</p>');
                    res.end();
                    return;
                    // //결과 객체 있으면 리스트 전송 
                    // console.dir(results);
                }
                res.end(html);
            })
このセクションではcontextは、レンダリング時に送信するオブジェクト名です.
contextが定義されていないので
var context ={result:newsArray};
として定義し、resultの名前でnewsArrayを送信します.
レンダリングビューでエラーが発生するのを恐れているので、errの場合はどうすればいいかも書いてあります.
styleを適用します

スタイルの適用



パスはこの状態です.

私はあなたをこのように出すことができるすべてのコードをアップロードします.

newsList.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="/semantic/semantic.min.css" rel="stylesheet" />
	<script src="/semantic/semantic.min.js"></script>
    <title>Document</title>
    <style>
        * {
            padding:0;
            margin:0;
            box-sizing:border-box;
        }
        
        html {
            width:100%;
            height:100%;
        }
        
        body {
            width:100%;
            height:100%;
            color: #000;
            background-color: #fff;
        }
                
        .container {
            margin-right: auto;
            margin-left: auto;
            padding-left: 20px;
            padding-right: 20px;
        }

        #cardbox {
            width:60%;
        }

        #iconImage {
            display:inline;
            width:2em;
            height:2em;
        }
        
        .bottomArea {
            background-color:rgba(242,248,255,255) !important;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <div class="ui raised segment">
        <a class="ui blue ribbon label">검색 리스트</a>
        <br><br>
    </div>
    <%for(var i=0;i< result.length;i++){%>
    <div class="ui blue fluid card">
        <div class="content">
            <div class="header">
                <a href="<%=result[i].link%>"><%=result[i].title%></a>
            </div>
            <div class="description">
                <br>
                <p><%=result[i].description%></p>
            </div>
            <div class="meta">
                <span class="right floated time"><%=result[i].pubDate%></span>
            </div>
        </div>
    </div>
    <%}   %>
</div>

<!-- ----------------=-=-=-------------------------------------- -->
    <h1>네이버 뉴스 검색 결과</h1>
    <ul>
       <%for(var i=0;i< result.length;i++){%>
        <li># <%=i%> <br>
            <h2 style="color:blue"><a href='<%=result[i].link%>'><%=result[i].title%></a></h2><br>
        <%=result[i].description%>
        <%}   %>
    </li>
        <br>
    </ul>
</body>

</html>

検索機能の追加



直接公衆に入ることができる理由は.
app.use('/public', static(path.join(__dirname,'public')));
だから….
コインで検索すると

こうして出てきた
ファイル構造

では、コードを公開します.

select.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>네이버 뉴스 검색</h1>
    <form method="GET" action="/search/news">
        <input type="text" name="query">
        <input type="submit" value="검색">
    </form>
</body>
</html>
ルータとして受信するために/search/newsに送信

news.js

// 네이버 검색 API예제는 블로그를 비롯 전문자료까지 호출방법이 동일하므로 blog검색만 대표로 예제를 올렸습니다.
// 네이버 검색 Open API 예제 - 블로그 검색
var express = require('express');
var app = express();

//ejs뷰 템플레이트
//익스프레스에서 뷰 엔진을 ejs로 설정
app.set('/views',__dirname+'/views');
app.set('view engine', 'ejs');

var path=require('path');
static = require('serve-static');
app.use('/public', static(path.join(__dirname,'public')));
app.use('/semantic', static(path.join(__dirname,'semantic')));

var bodyParser = require('body-parser')
//body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({extended: false}))
//body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())

//라우팅
app.get('/search/news', (req, res) => { //람다식
    const client_id = 'f9I06yzTAQxLEyAYNCIr';
    const client_secret = 'kbNXwsmN_D';
    const api_url = 'https://openapi.naver.com/v1/search/news?display=30&query=' + encodeURI(req.query.query); // json 결과
    //   var api_url = 'https://openapi.naver.com/v1/search/blog.xml?query=' + encodeURI(req.query.query); // xml 결과
    var request = require('request');
    const option = {};
    const options = {
        url: api_url, qs: option,
        headers: { 'X-Naver-Client-Id': client_id, 'X-Naver-Client-Secret': client_secret }
    };
    request.get(options, (error, response, body) => { //function이 =>로 해결되네
        if (!error && response.statusCode == 200) {
            let newsItems = JSON.parse(body).items; //items - title, link, description, pubDate
            const newsArray = [];
            for (let i = 0; i < newsItems.length; i++) {
                let newsItem = {};
                newsItem.title = newsItems[i].title.replace(/(<([^>]+)>)|&quot;/ig, ""); //나머지 아이템들 생략
                newsItem.link = newsItems[i].link.replace(/(<([^>]+)>)|&quot;/ig, "");
                newsItem.description = newsItems[i].description.replace(/(<([^>]+)>)|&quot;/ig, "");
                newsItem.pubDate = newsItems[i].pubDate.replace(/(<([^>]+)>)|&quot;/ig, "");
                newsArray.push(newsItem);
            }
            //    res.writeHead(200, {'Content-Type': 'text/json;charset=utf-8'});
            //    res.end(body);
            //res.json(newsArray);
            var context ={result:newsArray};
            req.app.render('newsList', context, function (err, html) {
                if (err) {
                    console.error('뷰 렌더링 중 오류 발생 : ' + err.stack);
                    res.writeHead('200', { 'Content-Type': 'text/html;charset=utf8' });
                    res.write('<h2>뷰 렌더링 중 오류 발생</h2>');
                    res.write('<p>' + err.stack + '</p>');
                    res.end();
                    return;
                    // //결과 객체 있으면 리스트 전송 
                    // console.dir(results);
                }
                res.end(html);
            })
        } else {
            res.status(response.statusCode).end(); //출력하는 부분
            console.log('error = ' + response.statusCode);
        }
        //  return newsItems;
    });

});
app.listen(3000, function () {
    console.log('http://127.0.0.1:3000/search/news?query=검색어 app listening on port 3000!');
});
postでフォームに送るなら
var bodyParser = require('body-parser')
//body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({extended: false}))
//body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
bodyParserが必要
でもgetで送りますxxが必要です
var path=require('path');
static = require('serve-static');
app.use('/public', static(path.join(__dirname,'public')));
これにより、アドレスウィンドウ/パブリックフォルダへのアクセスが容易になります.
newsList.ejsは上に置いて終わりました.
検索機能を追加しても触れませんでした
検索終了~
JSONのSuperObject(1)
エクスプローラコマンド:オープンWindowsエクスプローラ