nuxt.jsを使用したカレンダー2の作成

実装済み機能

その他の実装機能

エラー時間の長い部分

オープンAPI axiosを使用したインポート時のエージェントの設定

axiosによるオープンapiのコードのインポート

nationalDayList: []

getNationalList({commit}, currentYear) {
      let url = "http://localhost:3000/api";
      let ServiceKey = '?_type=json&ServiceKey={APISERVICE키}&solYear=';

      axios.get(url + ServiceKey + currentYear.toString(), {headers: {"Accept": "application/json"}})
        .then(res => {
          let nationalDayList = res.data["response"]["body"]["items"]["item"];
          commit('getNationalList', nationalDayList);
        }).catch(err => {
        console.log("error : ", err);
      })

    }

getNationalList(state, data) {
      state.nationalDayList.push(data);
    }

プロキシの設定

proxy: {
    '/api': {
      target: 'http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getHoliDeInfo',
      changeOrigin: true,
      secure: false,
      pathRewrite: {
        '^/api': ''
      }
    }
  }

VUE Bootstrapページングカラーの変更

色を変更するには:

.page-item.active .page-link {
 z-index: 3;
 color: #fff;
 background-color: #42b983;
 border-color: #42b983;
}