json-server , axios 연결하기 todolist

• vue
• json-server
• axios

1. json-server먼저 설치
   mnpm add json-server
   npx json-server --watch ./src/server/db.json --port 3001
   npx json-server --watch ./src/server/db.json

만약 json-server가 잘 안된다면?

• db.json에 오타 없는지 확인
• server: {
  proxy: {
  '/api/v1': {
  target: ' http://localhost:3000', <- 여기부분 확인
  changeOrigin: true,
  // path rewrite가 필요할 경우 사용
  rewrite: path => path.replace(/^\/api\/v1/, ''),
  

---

2. axios 설치
   sudo mnpm add axios

3. axios get을 사용해보자

const inquryTodos = async () => {  // async, await, try ,catch를 사용해서 get - 원하는 주소를 받아오자.

 
  try {
    const res = await axios.get('http://localhost:3001/todos')
    todos.value = res.data // 성공적으로 불러왔다면 화면에todos를 나타내줘라
  }
  catch (e) {
    logger.error(e)
  }
}

4. axios post를 사용해보자

const addTodo = async () => {
  const newTodos = {  // newTodos라는 서버에 추가할 객체를 만든다. 
    text: newTodo.value,
    done: false,
  }
  await axios.post('api/v1/todos', newTodos) // api/v1/todos라는 주소에 위에서 만든 newTodos를 넣어줄 예정임
  newTodo.value = ''  // 그리고 나서 input의 빈칸은 초기화를 시키고
  inquryTodos() //get을 해서 조회를 해주면 된다.
}

5. axios delete를 사용해보자

"user":[
  "id":"june",
  "name":"준희"