npm install --save axios

믹스 1) api.js

 

믹스2) TimeSpentByVisitors.js

export default {
    data() {
        return {
            startTime: 0,
            endTime: 0,
            stayTime: 0
        }
    },

    methods: {
        getCurrentDate() {
            const date = new Date();
            var year = date.getFullYear().toString();

            let month = date.getMonth() + 1;
            month = month < 10 ? '0' + month.toString() : month.toString();

            let day = date.getDate();
            day = day < 10 ? '0' + day.toString() : day.toString();

            let hour = date.getHours();
            hour = hour < 10 ? '0' + hour.toString() : hour.toString();

            let minites = date.getMinutes();
            minites = minites < 10 ? '0' + minites.toString() : minites.toString();

            let seconds = date.getSeconds();
            seconds = seconds < 10 ? '0' + seconds.toString() : seconds.toString();

            return year + month + day + hour + minites + seconds;
        }
    },
    mounted() {
        this.startTime = parseInt(this.getCurrentDate());
        console.log("믹스인 mounted  시작 시간: " + this.startTime);
    },

    unmounted() {
        this.endTime = parseInt(this.getCurrentDate());
        console.log("믹스인 unmounted : 종료 시간" + this.endTime);
        this.stayTime = this.endTime - this.startTime;
        console.log("믹스인 unmounted : 페이지 머문 시간" + this.stayTime);
    },
}

 

Data.vue

<template>
    <div>
        <h2>axios 목록 불러오기</h2>

    <table>
        <thead>
            <tr>
                <th>제품명</th>
                <th>가격</th>
                <th>카테고리</th>
                <th>배송료</th>
            </tr>
        </thead>    
        <tbody>
            <tr v-for="(product, i) in prodectList"  :key="i">
                <td>{{product.product_name}}</td>
                <td>{{product.price}}</td>
                <td>{{product.category}}</td>
                <td>{{product.delivery_price}}</td>                
            </tr>
        </tbody>
    </table>

    </div>
</template>

<script>
import ApiMixin from '@/mixins/api.js'
import TimeSpentByVisitors from '@/mixins/TimeSpentByVisitors.js'



export default {
    mixins:[ApiMixin,TimeSpentByVisitors],//사용할 믹스인 파일을 배열로 등록
    data(){
        return{
            prodectList:[],
            prodectList2:[]
        }
    },
    
    async mounted(){
        this.prodectList2 = await this.$callAPI("https://e9c0112a-ba7d-47e5-8d08-efcc00f358d2.mock.pstmn.io/list", "get");
        console.log("컴포넌트 mounted");
        console.log("prodectList2");
        console.log(this.prodectList2);

    },

    created(){
        this.getList();
    },
    methods:{
        async getList(){
            this.prodectList=await this.$api("https://e9c0112a-ba7d-47e5-8d08-efcc00f358d2.mock.pstmn.io/list", "get");
        }
    },
 
    unmounted(){
        console.log("컴포넌트 unmounted");
    },

}
</script>

<style  scoped>
table{
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td, th{
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
</style>

 

 

 

 

 

예 )

1)plugins/axios.js

import Vue from 'vue'
import axios from 'axios'


const firebaseAPI = axios.create({
    baseURL: 'http://localhost:5001/vue-test-841ad/us-central1/',
    timeout: 5000,
    headers: { 'X-Custom-Header': 'foobar' }
});



// 요청 인터셉터 추가하기
firebaseAPI.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    //헤더만 가로채서 인증 토큰만 변경후 서버로 보낸다. 
    config.headers.authorization = Math.random();
    return config;
}, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
});


Vue.prototype.$axios = firebaseAPI

 

 

2)axios.vue  (vuetify 사용)

!<template>
 <v-container fluid grid-list-md>
    <v-layout row warp>
        <v-flex xs12 >
            <v-toolbar color="primary" dark>
                    axios eg
            </v-toolbar>    
        </v-flex>   
    </v-layout>
  
    <v-layout row warp>
       
       
        <v-flex xs4>
            <v-card>    
                <v-card-title primary-title>
                    creat
                </v-card-title>
                <v-card-text>
                    <v-textarea v-model="textCreate" row="10"></v-textarea>
                </v-card-text>
                <v-card-actions>
                    <v-btn   color="primary" @click="axiosCreate">submit</v-btn>
                </v-card-actions>
            </v-card>
        </v-flex>


        <v-flex xs4>
            <v-card>    
                <v-card-title primary-title>
                    read
                </v-card-title>
                <v-card-text>
                    <v-textarea v-model="textRead" row="10"></v-textarea>
                </v-card-text>
                <v-card-actions>
                    <v-btn   color="primary" @click="axiosRead">submit</v-btn>
                </v-card-actions>
            </v-card>
        </v-flex>

        <v-flex xs4>
            <v-card>    
                <v-card-title primary-title>
                    update
                </v-card-title>
                <v-card-text>
                    <v-textarea v-model="textUpdate" row="10"></v-textarea>
                </v-card-text>
                <v-card-actions>
                    <v-btn   color="primary" @click="axiosUpdate">submit</v-btn>
                </v-card-actions>
            </v-card>
        </v-flex>


        <v-flex xs4>
            <v-card>    
                <v-card-title primary-title>
                    delete
                </v-card-title>
                <v-card-text>
                    <v-textarea v-model="textDelete" row="10"></v-textarea>
                </v-card-text>
                <v-card-actions style="display: flex; justify-content: flex-end;">
                    <v-btn   color="primary" @click="axiosDelete">submit</v-btn>
                </v-card-actions>
            </v-card>
        </v-flex>





    </v-layout>
  </v-container>
</template>

<script>
export default {
    data(){
        return{
            textCreate:'',
            textRead:'',
            textUpdate:'',
            textDelete:'',
        }
    },
    methods:{
       async axiosCreate(){
             //this.$toasted.global.error('ee');
             const res= await this.$axios.post('test');
             this.textCreate=res.data;               
        },

       async axiosRead(){
             const res= await this.$axios.get('test/12');
             this.textRead=res.data;  
        },

      async axiosUpdate(){
             const res= await this.$axios.put('test/111');
             this.textUpdate=res.data; 
        },

      async axiosDelete(){
            const res= await this.$axios.delete('test/11');
            this.textDelete=res.data;  
        }


    }
}
</script>

 

 

 

 

 

 

3)test.js  (백엔드 서버 : Node.js  )

node.js로 CORS 방식 허용하기로

# http, express, cors 모듈 설치 후

npm install http express cors

 

 

 

test.js

const express = require('express');
require('express-async-errors');

const app = express();
const cors = require('cors');
app.use(cors());


//인증 처리 미들웨어
app.use(require('../middlewares/verifyToken'));


//const router = express.Router();

/* GET users listing. */
//router.get('/', function (req, res, next) {
  //res.send('respond with a resource  test');
  //res.render("test", { student_id: 'tes1t' });
//});


app.post('/', async (req, res, next) => {  
  res.send("post ok : ");
});


app.get('/', (req, res, next) => {
  res.send("get ok  : " + req.params.id);
});

app.get('/:id', (req, res, next) => {  
  res.send("get ok  - " + req.params.id);
});


app.put('/:id', (req, res, next) => {
  res.send("put ok  - " + req.params.id);
});


app.delete('/:id', (req, res, next) => {
  res.send("delete ok  - " + req.params.id);
});


//에러 처리 미들웨어
app.use(require('../middlewares/error'));

module.exports = app;

 

middlewares/verifyToken.js

module.exports=(req, res, next) => {  
  //console.log(JSON.stringify(req.headers))
  console.log(req.headers);
  console.log("인증 처리hear");  
  next();
};