vue请求百度日历api以及跨域问题解决

示例链接：https://sp1.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php?tn=wisetpl&format=json&resource_id=39043&query=2022%E5%B9%B45%E6%9C%88&t=1650007952471&cb=op_aladdin_callback1650007952471

url:https://sp1.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php

params:
query: 2022年5月 （要查询的月份，必传）
resource_id: 39043（资源ID，必传）
t: 1650005331470（时间戳，axios可以不传）
format: json （返回值格式，可以不传）
tn: wisetpl（提交搜索请求来源，必传）
cb: op_aladdin_callback1650005331470 （跨域jsonp用的，axios等不传）

method: ‘get’

return:

{
  "animal": "虎",// 生肖
  "avoid": "开业.入宅.开工.开张.开市",// 忌
  "cnDay": "日",// 星期
  "day": "8",// 日
  "gzDate": "辛酉",// 天干地支日
  "gzMonth": "乙巳",// 天干地支月
  "gzYear": "壬寅",// 天干地支年
  "isBigMonth": "",// 是否大月 空 大月 1 小月
  "lDate": "初八",// 农历日文字
  "lMonth": "四",// 农历月文字
  "lunarDate": "8",// 农历日
  "lunarMonth": "4",// 农历月
  "lunarYear": "2022",// 农历年
  "month": "5",// 月份
  "oDate": "2022-05-07T16:00:00.000Z",// 日期
  "suit": "结婚.领证.安葬.破土.祈福.祭祀.嫁娶.斋醮.治病",// 宜
  "term": "母亲节",// 节日，展示到日历上
  "type": "i",// 现在找到了a,t,h,i 4个类型+还可能没这个字段，具体干啥不知道
  "value": "世界微笑日 世界红十字日",// 其他节日
  "year": "2022",// 年份
  "status": "" // 2 班 1休 没这个字段就正常执行作息天
},

需要注意的是，这个会连带着返回你想查询的那个月的前后两个月信息，比如你查询2022年5月，会返回2022年3月到5月所有信息。

vue访问百度日历api方法

1. 使用axios访问：

到vue.config.js里配一下：

devServer: {
    proxy: {
    '/thirdApi': {
        target: 'https://sp1.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php',
        changeOrigin: true,
        pathRewrite: {
          '^/thirdApi': ''
        }
      },
    }
 }

用于解决跨域问题。

再在对应的vue页面里：

import axios from 'axios'
getCalendar (selectDate) {
      axios.get('/thirdApi?tn=wisetpl&format=json&resource_id=39043&query=' +
      this.getYearMonth(selectDate) + '&t=' + new Date().getTime())
        .then(res => {
          console.log(res)
          this.calendarData = res.data.data[0].almanac
          this.calendarData.forEach(item => {
            item.oDate = this.getStandardDay(new Date(item.oDate))
          })
          const data = this.calendarData[0].oDate
          console.log(data)
        })
    },
    // 年月
    getYearMonth (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      return y + '年' + m + '月'
    },
    // 年月日
    getStandardDay (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      var d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + m + '-' + d
    },

我猜你应该用了el-calendar了所以顺带给需要比对的值做了格式化了~

2022-05-19更新

2. jsonp访问：

上述1.只能测试阶段有用，但是上线会出现问题，引入vue-jsonp解决跨域问题。
2.1 首先是引入vue-jsonp

npm install vue-jsonp --save

main.js
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)

2.2 使用方法：

const url = 'https://sp1.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php'
      // url = url + '?tn=wisetpl&format=jsonp&resource_id=39043&query=' + this.getYearMonth(date) + '&t=' + new Date().getTime() + '&cb=op_aladdin_callback1650007952471'
      console.log(url)
      this.$jsonp(url, {
        tn: 'wisetpl',
        format: 'json',
        resource_id: '39043',
        query: this.getYearMonth(date),
        t: new Date().getTime(),
        callbackQuery: 'cb',
        callbackName: 'jsonp_func'
      }).then(res => {
          console.log(res)
      })

这里的cb对应上面参数列表里那个cb，具体看一下vue-jsonp的文档（https://www.npmjs.com/package/vue-jsonp）

2022-05-30补充，上述方法会间歇性失败，解决方案是在callbackName内添加时间戳：格式如下：

var sec = new Date().getTime()
      const url = 'https://sp1.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php'
      this.$jsonp(url, {
        tn: 'wisetpl',
        format: 'json',
        resource_id: '39043',
        query: this.getYearMonth(date),
        t: sec,
        callbackQuery: 'cb',
        callbackName: 'op_aladdin_callback' + sec
      }).then(res => {

另，el-calendar在我实施过程中会发生点击灰色日期（也就是上个月或者下个月的日期）的时候，有时候会多跳一个月，原以为是因为我查询条件绑定的值和calendar绑定的值用了同一个的原因，去掉calendar的 v-model=""就好了，但实际去掉还是会出现问题，留存后期解决。