vue

 

 

 

1. 에러 메시지 출력을 위한 토스트  vue-toasted 설치

https://www.npmjs.com/package/vue-toasted

 

 

 

2. 토스트  plugins/vue-toasted.js

임의 변소 error, success, type1 등을 만들어서 사용한다.

전역으로 설정 vue-toasted.js

 

import Vue from 'vue'
import Toasted from 'vue-toasted';


Vue.use(Toasted, {
    iconPack: 'mdi',
    
});

//Vue.prototype.$toasted = Toasted;




Vue.toasted.register('error', (payload) => {
    return payload;
}, {
    icon: 'mdi-alert',
    position: 'bottom-right',
    duration: 5000,
    className:'red',
    action: {
        text: "닫기",
        class: 'title',
        onClick: (e, toastObject) => {
            toastObject.goAway(0);
       }
    }
});


Vue.toasted.register('success', (payload) => {
    return payload;
}, {
    icon: 'mdi-alert',
    position: 'bottom-right',
    duration: 5000,
    className: 'success',
    action: {
        text: "닫기",
        class: 'title',
        onClick: (e, toastObject) => {
            toastObject.goAway(0);
        }
    }
});


Vue.toasted.register('type1', (payload) => {
    return payload;
}, {
    icon: 'mdi-alert',
    position: 'bottom-right',
    duration: 5000,
    className: 'dark',
    action: {
        text: "닫기",
        class: 'title',
        onClick: (e, toastObject) => {
            toastObject.goAway(0);
        }
    }
});



 

 

 

 

3. main.js  같은 위치에 공통 error.js 파일 생성

import Vue from 'vue'



Vue.config.errorHandler = e => {    
    // console.log("errorHandler");
    // console.error(e.message);
    Vue.prototype.$toasted.global.error(e.message);
}



 

 

4. main.js  에  vue-toasted.js,  error.js 임포트 

 

import Vue from 'vue'
import './error'
import './plugins/vue-toasted'
import './plugins/vuetify'
import './plugins/firebase'
import './plugins/axios'
...


 

 

 

 

ex) try catche 사용하지 않아도 에러 메시지를 사용자에게 표시

       async axiosRead(){
           try {
             const res= await this.$axios.get('http://localhost:3000/test/12');
             this.textRead=res.data;               
           } catch (error) {
               console.error(error);
           }
        },


=>

       async axiosRead(){         
           //this.$toasted.global.error('ee');
             const res= await this.$axios.get('http://localhost:3000/test/12');
             this.textRead=res.data;                        
        },

 

 

 

etc) css 클래스 수정

.toasted-container .toasted .action {
    text-decoration: none !important;
    color: white !important;
}

 

 

개별 메시지 알람 사용시 다음과 같이 호출해서 사용

  
             1)   this.$toasted.global.error('메시지 !');
              2) this.$toasted.global.success('메시지 !');
                3)this.$toasted.global.type1('메시지 !');

 

 

 

 

vueitfy  클래스

https://v15.vuetifyjs.com/ko/framework/colors

 

소스 :

https://github.com/braverokmc79/vf/blob/main/src/plugins/vue-toasted.js

 

 

 

 

 

 

백엔드 Nodejs 에러 처리

 

express-async-errors 설치

 

npm install express-async-errors --save

 

https://www.npmjs.com/package/express-async-errors

 

require('express-async-errors');

임포트 후 다음과 같이 사용

app.use((err, req, res, next) => {

  res.send(err.message);

});

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  라이트

술은 게으름의 원인이 되는 것이다. 술에 빠지게 되면 다음과 같은 여섯 가지의 과오가 생긴다. 첫째, 당장 재산의 손실을 입게 되며, 둘째, 다툼이 잦아지며, 셋째, 쉽게 병에 걸리며, 넷째, 악평을 듣게 되며, 다섯째, 벌거숭이가 되어 치부를 드러내게 되며, 여섯째, 지혜의 힘이 약해진다. -아함경

댓글 ( 0)

댓글 남기기

작성