[Nuxt.js] Vue+Node.js(Express) RESTFul API 만들기

SELECT

1. axios 모듈 설치 및 설정

npm install @nuxtjs/axios

nuxt.config.js

module.exports = {
	...
  	modules: ['@nuxtjs/axios'],
  	axios: {
    	// proxy: true
  	},
  	...
}

2. Vue 페이지 생성
   ~/pages/index/sample/view/_id.vue
   동적 라우팅 Vue 페이지에서 RESTFulAPI 요청
   http://localhost:3000/sample/view/:id

<template>
  <div>
    <h2 class="subtitle">
      Dynamic Route Demo Page
    </h2>
  </div>
</template>

<script>
export default {
  name: 'sampleViewPage',
  // props: ['id'],
  data () {
    return {
      sequence: this.$route.params.id,
      row: []
    }
  },
  beforeMount () {},
  mounted () {
    this.getList()
  },
  methods: {
    getList() {
      this.$axios
      .get(`/api/sample/getTestList/${this.sequence}`).then((res) => {
          if (res.status === 200) {
            console.log(res)
            console.log(res.data)
          } else {
            alert(res)
            this.$router.go(-1)
          }
       })
       .catch((error) => {
         console.log(error)
         console.log(error.response)
       })
    },
  }
}
</script>

@👀✔
-- router.js에 props:true가 설정 안되어서 그런지 route.params(=:id)가 props에 설정이 안됨,,,추가하는 방법 못찾겠음ㅠ

3. API 코드 작성
   ~/api/routes/sample.js

const { Router } = require('express');
const router = Router();
const Query = require('pg').Query
const postgre = require('../config/database');

router.get('/getTestList/:id', function (req, res) {
  let userId = req.params.id
  postgre
  .query('SELECT * FROM user WHERE user_id = $1', [userId],
  	function (err, result, fields) {
    if (!err) {
      console.log(result);
      console.log(fields);
      res.send(result);
    } else {
      console.log('query error : ' + err);
      res.send(err);
    }
});

module.exports = router;

@👀✔ --where절
-- Mysql의 경우 조건문의 파라미터를 ?로 처리 가능하나 postgre는 문법 오류가 남.
postgre의 경우 $1, $2... 등으로 처리해야함
mysql : SELECT FROM user WHERE user_id = ?
postgre : SELECT FROM user WHERE user_id = $1

위의 코드를 작성 후 http://localhost:3000/sample/view/1로 접속하면 콘솔창에 response객체에 담겨 넘어온 데이터가 console창에 찍히는걸 확인할 수 있다.
DB에서 데이터의 result는 command(명령어 종류), rowCount, oid, rows, fields 등의 정보가 담겨있다. rows가 가져오고자 했던 데이터 field는 말그대로 field 정보
데이터만 넘기고 싶을경우 res.send(result.rows)로 넘겨주면됨.

INSERT

1. Vue 페이지 생성
   ~/pages/index/sample/register.vue

<template>
  <div>
    <h2 class="subtitle">
      Register Page
    </h2>
    <div>
      이름
      <input
        type="text"
        ref="name"
        v-model="user.name"
      />
    </div>
    <div>
      나이
      <input
        type="text"
        ref="age"
        v-model="user.age"
      />
    </div>
    <div>
      아이디
      <input
        type="text"
        ref="userId"
        v-model="user.userId"
      />
    </div>
    <button type="button" @click="save">저장</button>
  </div>
</template>

<script>
export default {
  name: 'SampleRegisterPage',
  props: [],
  data () {
    return {
      user: {
        name: 'test name',
        age: '20',
        userId: 'testId'
      }
    }
  },
  mounted () {},
  methods: {
    save() {
      let params = {
        ...user
      }
      this.$axios.post('/api/sample/register', params).then((res) => {
          if (res.status === 200) {
            alert('성공적으로 등록되었습니다.')
            this.$router.push('/')
          } else {
            alert(res)
            this.$router.go(-1)
          }
        })
        .catch((error) => {
          console.log(error)
          console.log(error.response)
        })
    },
  },
  watch: {},
  computed: {}
}
</script>

3. API 코드 작성
   ~/api/routes/sample.js

 router.post('/register', function (req, res) {
   let params = req.body
   const sql = "INSERT INTO USER(name, age, user_id) VALUES($1, $2, $3)"
   const values = [params.name, params.age, params.userId]
   postgre.query(sql, values, function (err, result, fields) {
     if (!err) {
     	console.log(result);
     	res.send(result.rows);
     } else {
     	console.log('query error : ' + err);
     	res.send(err);
    }
  });
 });

client 측에서 전송한 데이터는 request body안에 들어있다.
@👀✔ --body-parser
미들웨어 없이 request.body에 접근하면 기본값이 undefined로 설정되어있으므로 body-parser나 multer와 같은 미들웨어를 사용하여 데이터에 접근해야 한다. 클라이언트 측에서 post와 put METHOD로 요청시 body를 포함하여 요청할 수 있는데 이 값을 서버에서 해석할 수 있는 형태로 변형해야 한다. 링크참고

• body-parser 모듈 설치

npm install body-parser

• ~/api/index.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// body-parser
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

module.exports = {
  path: '/api',
  handler: app
};

이렇게 추가해주면 되지만 express version 4.16 이상부터는 express 내부에 body-parser가 포함되기 때문에 body-parser 모듈을 설치해줄 필요가 없다.
package.json파일에서 express 버전 확인 후 4.16 이상일 경우에는 아래와 같이 코드 작성해주면 됨.링크참고

~/api/index.js

const express = require('express');
const app = express();

// body-parser
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

module.exports = {
  path: '/api',
  handler: app
};