dukDukz

21.05.10 API 사용하는 법 본문

웹 개발/Node JS

21.05.10 API 사용하는 법

헤일리_HJ 2021. 5. 10. 14:08

 

1.  Client 에서 LiveServer로 요청

2.  Live server는 화면만 뿌려주는 역할

3.  Onclick 과 같은 event 발생

4.  API 로 요청

5.  API 에서 DB로 값 요청(쿼리 이용)

6.  DB에서 json 형태로 값 전달

7.  API에서 Client로 값을 전달 (가공된)

8.  화면에 출력됨

 

 

 

 

 

 

 

npm install cors

 

server.js

const app = express();

app.use(cors());

 이 설정값을 미들웨어에 탑재

 

 

app.use(cors());

다른 도메인도 허락해줄게

 

화면로딩서버    5000

데이터 넘겨주는 서버 따로 있는것    3000

 

 

 

 

API 사용

axios library 를 가지고 작업을 할거임

 

axios cdn 이라고 검색하기

https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js

→  누군가 만든 API

 

 

API 부분

routers/users/user.controller.js

더보기 
// 이 부분만 API, db에 요청해서 json으로 받아오는
let info = async (req,res)=>{
    let userList = await User.findAll({
        attributes:['id','userid','userpw','username','gender','userimage',
        [Sequelize.fn('date_format',Sequelize.col('userdt'), '%Y-%m-%d'),'userdt']]
    });
    res.json({
        userList,
    })
}

 

 

API로 가져온 json 값을 받아서 가공하는 부분

다른 파일에 index.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>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
    <button id="btn">데이터 가져오기</button>

    <table id="list">
        <td>아이디</td>
        <td>패스워드</td>
        <td>이름</td>
    </table>

    <script type="text/javascript">
        const table = document.querySelector('#list');
        function getData() {
            axios.get('http://localhost:3000/user/info')        //Promise 객체로 반환이 되어서 .으로 사용가능
                .then((res) => {
                    console.log(res);
                    let list = res.data.userList;
                    list.forEach(ele=>{
                        console.log(ele.userid);
                        const tr = document.createElement('tr');
                        const idTd = document.createElement('td');
                        const pwTd = document.createElement('td');
                        const nameTd = document.createElement('td');

                        idTd.innerHTML = ele.userid;
                        pwTd.innerHTML = ele.userpw;
                        nameTd.innerHTML = ele.username;

                        
                        tr.appendChild(idTd);
                        tr.appendChild(pwTd);
                        tr.appendChild(nameTd);

                        table.appendChild(tr);
                    })
                })
        }

        const btn = document.querySelector('#btn');
        btn.addEventListener('click', getData);
    </script>
</body>

</html>

 

 

 

 

 

'웹 개발 > Node JS' 카테고리의 다른 글

210511 (회원 가입) 이미지 파일 올리기  (2) 2021.05.11
210511 app.get() 에서 여러 개의 미들웨어 (콜백함수) 사용 - next 활용  (2) 2021.05.11
21.04.27 Router로 파일 쪼개기 2  (0) 2021.04.27
21.04.27 Router 로 파일 쪼개기  (0) 2021.04.27
21.04.26 게시판 번호 처리  (0) 2021.04.27
'웹 개발/Node JS' Related Articles more