TP5后端,VUE前端请求聚合数据过去的今天

先上效果:

1: 前端 vue 文件:

<template>
    <!--
        接口地址    http://v.juhe.cn/todayOnhistory/queryEvent.php

        参数名	   类型	        是否必填	        说明	                                                值
        date	 string	        是	    日期,格式:/日 如:1/1,/10/1,12/12 如月或者日小于10,前面无需加0

        1: 日期选择,一个月, 一个天;【 如果月份选择的天数小于 31 天, 就把该月份的天数重新赋值给 days, 让用户重新选择 天 】
        2: 先试试返回 josn 文件,渲染
        3:提交日期函数
    -->
    <div class="history-event">
        <!-- <el-button type="success" @click="test">试试</el-button> -->

        <el-card :span="12" >

            <el-select v-model="monthNmb" class="day-selector" @change="monthChange">
                <el-option v-for="m in date" :key="m.month" :label="m.month + '月'" :value="m.month"></el-option>
            </el-select>

            <el-select v-model="dayNmb" class="day-selector">
                <el-option v-for="d in days" :key='d' :label="d + '号'" :value="d"></el-option>
            </el-select>

            <el-button type="success" plain @click="submitDate" :disabled="queryCheck">确定</el-button>

            <h1>{{ querySentence }}</h1>
            <div class="card_body">
                <div class="card-avator" v-for="(q, index) in queryData" :key="index">
                    <div class="year">{{ q.date }}</div>
                    <div class="title" :title="q.title">{{ q.title }}</div>
                </div>
            </div>

        </el-card>

    </div>
</template>

<script>

export default {
    name: 'historyEven',
    mounted: function () {
        this.getData()
    },
    data () {
        return {
            apiUrl: '/api_7', // API URL
            queryData: [], // 查询得到的数据
            queryCheck: false, // 查询确认按钮
            date: [
                {month: 1, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ]},
                {month: 2, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29 ]},
                {month: 3, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ]},
                {month: 4, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30 ]},
                {month: 5, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ]},
                {month: 6, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30 ]},
                {month: 7, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ]},
                {month: 8, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ]},
                {month: 9, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30 ]},
                {month: 10, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ]},
                {month: 11, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30 ]},
                {month: 12, day: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ]}
            ],
            days: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ], // 天先放 31 天,再进行变换
            monthNmb: 1, // 月份
            dayNmb: 1, // 天
            querySentence: '请选择您需要查询的历史上的今天' // 查询后需要显示的句子
        }
    },
    methods: {
        disableBtn: function () {
            this.queryCheck = false
        },
        submitDate: function () { // 提交日期
            this.getData() // 只要重新提交数据,这个方法里面它会重新自己渲染
            this.queryCheck = true
            setTimeout(this.disableBtn, 3000) // vue 里面的 setTimeout 里面不能用 () 方法
            this.querySentence = '以下是历史上' + this.monthNmb + '月' + this.dayNmb + '号发生的重大的事情'
        },
        monthChange: function () { // 修改该月份,日期变化
            let monthDayArr = this.date[this.monthNmb - 1].day
            if (monthDayArr.length < 31) {
                this.days = monthDayArr
                this.dayNmb = 1
            }
        },
        getData: function () { // 获取数据
            // let dataString = this.monthNmb + '\\' + this.dayNmb // 这里的话,拼接方式放后台
            this.$axios({
                url: this.apiUrl,
                params: {
                    monthNmb: this.monthNmb,
                    dayNmb: this.dayNmb
                },
                methods: 'get'
            }).then(res => {
                if (res.data.error_code === 0) {
                    // 下面把得到的数组数据处理一下,把年份留下,日期不用
                    let newData = res.data.result
                    let newDataLen = newData.length
                    for (let i = 0; i < newDataLen; i++) {
                        let newD = newData[i].date
                        let yearIndex = newD.indexOf('年')
                        // console.log(newD.substring(0, yearIndex + 1)) // 测试 console
                        newData[i].date = newD.substring(0, yearIndex + 1) // 把年这个字也保留
                    }
                    this.queryData = res.data.result
                } else {
                    console.log('请求失败')
                }
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>

<style scoped>
.history-event {
    text-align: center;
    margin-left: 12%;
}

.card_body{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.card-avator:hover {
    transform: scale(1.16) translateZ(0);
}
h1 {
    margin: 2rem 0 1rem 0;
}
.card-avator {
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    width: 8rem;
    height: 10rem;
    border-radius: 1rem;
    position: relative;
    box-shadow: #857d7d 0.5rem 0.5rem 0.5rem;
    padding: 0.5rem 1rem;
    background-image: url('/static/imgs/today history.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-right: 3rem;
    margin-top: 2rem;
}
.card-avator .year {
    background: #4E6EF2;
    position: absolute;
    min-width: 4rem;
    overflow: hidden;
    border-radius: 1rem;
    top: 0.5rem;
    left: 1rem;
    color: white;
}
.card-avator .title {
    text-align: left;
    text-indent: 0rem;
    position: absolute;
    color: #222222;
    font-size: 14px;
    margin-top: 7rem;
    /* font-family: 仿宋; */
    height: 3.5rem;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}
.day-selector {
    width: 6rem;
}
</style>

2: 前端 vue 配置文件:

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api_1': {
        target:'http://www.chaxun.com/joke', // 你请求的第三方接口
        changeOrigin:true,  // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{       // 路径重写,
          '^/api_1': '/api_1'       // 替换target中的请求地址,也就是说以后你在请求 target 的地址的时候直接写成 /api_1 即可。
        }
      },
      '/api_2': {
        target: 'http://www.chaxun.com/constellation',
        changeOrigin: true,
        pathRewrite: {
          '^/api_2': '/api_2'
        }
      },
      '/api_3': {
        target: 'http://www.chaxun.com/weather',
        changeOrigin: true,
        pathRewrite: {
          '^/api_3': '/api_3'
        }
      },
      '/api_4': {
        target: 'http://www.chaxun.com/news',
        changeOrigin: true,
        pathRewrite: {
          '^/api_4': '/api_4'
        }
      },
      '/api_5': {
        target: 'http://www.chaxun.com/videos',
        changeOrigin: true,
        pathRewrite: {
          '^/api_5': '/api_5'
        }
      },
      '/api_6': {
        target: 'http://www.chaxun.com/driverlicense',
        changeOrigin: true,
        pathRewrite: {
          '^/api_6': '/api_6'
        }
      },
      '/api_7': {
        target: 'http://www.chaxun.com/today_in_history',
        changeOrigin: true,
        pathRewrite: {
          '^/api_7': '/api_7'
        }
      }
    },

    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

3: TP5 先来一个 json 测试文件:

{
	"reason":"success",
	"result":[
		{
			"day":"1\/1",
			"date":"-45年1月1日",
			"title":"罗马共和国开始使用儒略历",
			"e_id":"1"
		},
		{
			"day":"1\/1",
			"date":"404年1月1日",
			"title":"东晋将领桓玄正式称帝,国号楚",
			"e_id":"2"
		},
		{
			"day":"1\/1",
			"date":"860年1月1日",
			"title":"西法兰克国王厄德一世诞生",
			"e_id":"3"
		},
		{
			"day":"1\/1",
			"date":"976年1月1日",
			"title":"南唐后主李煜被俘,南唐灭亡。",
			"e_id":"4"
		},
		{
			"day":"1\/1",
			"date":"1085年1月1日",
			"title":"司马光主持编撰的《资治通鉴》成书",
			"e_id":"5"
		},
		{
			"day":"1\/1",
			"date":"1788年1月1日",
			"title":"伦敦《泰晤士报》首次出版",
			"e_id":"6"
		},
		{
			"day":"1\/1",
			"date":"1804年1月1日",
			"title":"海地独立",
			"e_id":"7"
		},
		{
			"day":"1\/1",
			"date":"1814年1月1日",
			"title":"太平天国农民起义领袖洪秀全诞辰",
			"e_id":"8"
		},
		{
			"day":"1\/1",
			"date":"1823年1月1日",
			"title":"匈牙利诗人斐多菲诞生",
			"e_id":"9"
		},
		{
			"day":"1\/1",
			"date":"1863年1月1日",
			"title":"奥运之父顾拜旦出生",
			"e_id":"10"
		},
		{
			"day":"1\/1",
			"date":"1864年1月1日",
			"title":"著名画家、篆刻家齐白石诞生",
			"e_id":"11"
		},
		{
			"day":"1\/1",
			"date":"1904年1月1日",
			"title":"京剧表演艺术家程砚秋诞辰",
			"e_id":"12"
		},
		{
			"day":"1\/1",
			"date":"1912年1月1日",
			"title":"中华民国成立",
			"e_id":"13"
		},
		{
			"day":"1\/1",
			"date":"1912年1月1日",
			"title":"中华书局创办",
			"e_id":"14"
		},
		{
			"day":"1\/1",
			"date":"1916年1月1日",
			"title":"袁世凯复辟帝制",
			"e_id":"15"
		},
		{
			"day":"1\/1",
			"date":"1917年1月1日",
			"title":"胡适发起文学改良运动",
			"e_id":"16"
		},
		{
			"day":"1\/1",
			"date":"1923年1月1日",
			"title":"彭湃担任海丰县农会会长",
			"e_id":"17"
		},
		{
			"day":"1\/1",
			"date":"1926年1月1日",
			"title":"中国国民党第二次全国代表大会召开",
			"e_id":"18"
		},
		{
			"day":"1\/1",
			"date":"1933年1月1日",
			"title":"中国驻檀香山领事馆落成",
			"e_id":"19"
		},
		{
			"day":"1\/1",
			"date":"1934年1月1日",
			"title":"德国实施优生法",
			"e_id":"20"
		},
		{
			"day":"1\/1",
			"date":"1939年1月1日",
			"title":"国民党中常会决定开除汪精卫党籍",
			"e_id":"21"
		},
		{
			"day":"1\/1",
			"date":"1939年1月1日",
			"title":"惠普公司创办",
			"e_id":"22"
		},
		{
			"day":"1\/1",
			"date":"1942年1月1日",
			"title":"中苏美英等26国签署《联合国家共同宣言》",
			"e_id":"23"
		},
		{
			"day":"1\/1",
			"date":"1946年1月1日",
			"title":"天皇非神宣言发表",
			"e_id":"24"
		},
		{
			"day":"1\/1",
			"date":"1948年1月1日",
			"title":"中国国民党革命委员会在香港成立",
			"e_id":"25"
		},
		{
			"day":"1\/1",
			"date":"1949年1月1日",
			"title":"联合国促成克什米尔停火",
			"e_id":"26"
		},
		{
			"day":"1\/1",
			"date":"1950年1月1日",
			"title":"巴黎统筹委员会成立",
			"e_id":"27"
		},
		{
			"day":"1\/1",
			"date":"1956年1月1日",
			"title":"《解放军报》创刊",
			"e_id":"28"
		},
		{
			"day":"1\/1",
			"date":"1956年1月1日",
			"title":"苏丹独立",
			"e_id":"29"
		},
		{
			"day":"1\/1",
			"date":"1957年1月1日",
			"title":"萨尔在第二次世界大战后重归德国",
			"e_id":"30"
		},
		{
			"day":"1\/1",
			"date":"1958年1月1日",
			"title":"宝(宝鸡)成(成都)铁路正式通车",
			"e_id":"31"
		},
		{
			"day":"1\/1",
			"date":"1959年1月1日",
			"title":"古巴革命胜利",
			"e_id":"32"
		},
		{
			"day":"1\/1",
			"date":"1960年1月1日",
			"title":"刘家峡水利枢纽胜利截流",
			"e_id":"33"
		},
		{
			"day":"1\/1",
			"date":"1960年1月1日",
			"title":"喀麦隆独立",
			"e_id":"34"
		},
		{
			"day":"1\/1",
			"date":"1962年1月1日",
			"title":"西萨摩亚独立",
			"e_id":"35"
		},
		{
			"day":"1\/1",
			"date":"1963年1月1日",
			"title":"《铁臂阿童木》首播",
			"e_id":"36"
		},
		{
			"day":"1\/1",
			"date":"1965年1月1日",
			"title":"法塔赫领导的武装斗争开始",
			"e_id":"37"
		},
		{
			"day":"1\/1",
			"date":"1976年1月1日",
			"title":"著名传媒人柴静出生",
			"e_id":"38"
		},
		{
			"day":"1\/1",
			"date":"1978年1月1日",
			"title":"《新闻联播》正式开播",
			"e_id":"39"
		},
		{
			"day":"1\/1",
			"date":"1979年1月1日",
			"title":"告台湾同胞书发表",
			"e_id":"40"
		},
		{
			"day":"1\/1",
			"date":"1979年1月1日",
			"title":"中国与美国建立外交关系",
			"e_id":"41"
		},
		{
			"day":"1\/1",
			"date":"1980年1月1日",
			"title":"首都国际机场正式启用",
			"e_id":"42"
		},
		{
			"day":"1\/1",
			"date":"1981年1月1日",
			"title":"《中华人民共和国婚姻法》(修正草案)公布施行",
			"e_id":"43"
		},
		{
			"day":"1\/1",
			"date":"1981年1月1日",
			"title":"我国正式实行学位制度",
			"e_id":"44"
		},
		{
			"day":"1\/1",
			"date":"1982年1月1日",
			"title":"全国农村工作会议纪要",
			"e_id":"45"
		},
		{
			"day":"1\/1",
			"date":"1984年1月1日",
			"title":"中国工商银行成立",
			"e_id":"46"
		},
		{
			"day":"1\/1",
			"date":"1984年1月1日",
			"title":"中国正式成为国际原子能机构成员国",
			"e_id":"47"
		},
		{
			"day":"1\/1",
			"date":"1984年1月1日",
			"title":"关于1984年农村工作的通知",
			"e_id":"48"
		},
		{
			"day":"1\/1",
			"date":"1984年1月1日",
			"title":"文莱独立",
			"e_id":"49"
		},
		{
			"day":"1\/1",
			"date":"1985年1月1日",
			"title":"活跃农村经济,中共中央、国务院出台新政策",
			"e_id":"50"
		},
		{
			"day":"1\/1",
			"date":"1985年1月1日",
			"title":"欧洲音乐年拉开序幕",
			"e_id":"51"
		},
		{
			"day":"1\/1",
			"date":"1986年1月1日",
			"title":"里根与戈尔巴乔夫互致问候",
			"e_id":"52"
		},
		{
			"day":"1\/1",
			"date":"1988年1月1日",
			"title":"天安门城楼正式对外开放",
			"e_id":"53"
		},
		{
			"day":"1\/1",
			"date":"1992年1月1日",
			"title":"布特罗斯·加利成为联合国秘书长",
			"e_id":"54"
		},
		{
			"day":"1\/1",
			"date":"1993年1月1日",
			"title":"兰桂坊惨剧",
			"e_id":"55"
		},
		{
			"day":"1\/1",
			"date":"1993年1月1日",
			"title":"捷克和斯洛伐克两共和国解体",
			"e_id":"56"
		},
		{
			"day":"1\/1",
			"date":"1994年1月1日",
			"title":"欧洲经济区成立",
			"e_id":"57"
		},
		{
			"day":"1\/1",
			"date":"1994年1月1日",
			"title":"我国正式成为《专利合作条约》(PCT)成员国",
			"e_id":"58"
		},
		{
			"day":"1\/1",
			"date":"1995年1月1日",
			"title":"世界贸易组织成立",
			"e_id":"59"
		},
		{
			"day":"1\/1",
			"date":"1998年1月1日",
			"title":"我国与南非建交",
			"e_id":"60"
		},
		{
			"day":"1\/1",
			"date":"1999年1月1日",
			"title":"欧元诞生",
			"e_id":"61"
		},
		{
			"day":"1\/1",
			"date":"2000年1月1日",
			"title":"百度公司成立",
			"e_id":"62"
		},
		{
			"day":"1\/1",
			"date":"2002年1月1日",
			"title":"欧元正式进入流通",
			"e_id":"63"
		},
		{
			"day":"1\/1",
			"date":"2002年1月1日",
			"title":"国务院发布《中华人民共和国反补贴条例》",
			"e_id":"64"
		},
		{
			"day":"1\/1",
			"date":"2006年1月1日",
			"title":"中国政府废止农业税",
			"e_id":"65"
		},
		{
			"day":"1\/1",
			"date":"2007年1月1日",
			"title":"国际标准书号(ISBN)由10位制改为13位制",
			"e_id":"66"
		},
		{
			"day":"1\/1",
			"date":"2007年1月1日",
			"title":"潘基文正式出任联合国秘书长",
			"e_id":"67"
		},
		{
			"day":"1\/1",
			"date":"2010年1月1日",
			"title":"中国-东盟自贸区正式建成",
			"e_id":"68"
		},
		{
			"day":"1\/1",
			"date":"2016年1月1日",
			"title":"全面两孩元旦施行",
			"e_id":"69"
		},
		{
			"day":"1\/1",
			"date":"2017年1月1日",
			"title":"土耳其新年恐袭案",
			"e_id":"70"
		},
		{
			"day":"1\/1",
			"date":"2019年1月1日",
			"title":"中国首部《电子商务法》正式实施",
			"e_id":"71"
		}
	],
	"error_code":0
}

4: TP5 后台处理文件:


namespace    app\index\controller;

use app\index\controller\HttpRequest;
use think\Route;
use think\Request;

class Api7 {
    /* 
    接口地址:http://v.juhe.cn/todayOnhistory/queryEvent.php
    返回格式:json
    请求方式:get
    请求示例:http://v.juhe.cn/todayOnhistory/queryEvent.php?key=YOURKEY&date=1/1
    接口备注:根据日期查询事件

    名称	必填	  类型	            说明
    key	    是	    string	    在个人中心->我的数据,接口名称上方查看
    date	是	    string	    日期,格式:月/日 如:1/1,/10/1,12/12 如月或者日小于10,前面无需加0

    	名称	    类型	      说明
 	error_code	    int	        返回码
 	result	        string	    实体内容
 	reason	        string	    提示信息
 	day	            string	    日期
 	date	        string	    事件日期
 	e_id	        int	        事件id,即下一接口中所用的e_id
 	title	        string	    事件标题


*/

    const CONST_KEY = "自己申请的聚合数据的 KEY";   // 历史上的今天,自己申请的 KEY

    public function test() 
    {
        return "This query Event control is working.";
    }

    public function index() 
    {
        // 下面先返回本地 json 数据
        // $content = file_get_contents('./testjson/test7.json');
        // $data = json_decode($content);
        // return json($data);

        $url = "http://v.juhe.cn/todayOnhistory/queryEvent.php";
        $rsq = request() -> param();
        isset($rsq['monthNmb']) ? ($monthNmb = $rsq['monthNmb']) : ($monthNmb = 1); // 默认月份是 1
        isset($rsq['dayNmb']) ? ($dayNmb = $rsq['dayNmb']) : ($dayNmb = 1); // 默认具体天数是 1

        if ($monthNmb === 1 && $dayNmb === 1) {
            $content = file_get_contents('./testjson/test7.json');
            $data = json_decode($content);
            return json($data);
        } else {
            $params = [
                "date" => $monthNmb."/".$dayNmb
            ];
    
            $paramsString = http_build_query($params);
            $httpRsq = new HttpRequest;
            $data = $httpRsq -> httpRequest($url, $paramsString."&key=".self::CONST_KEY);
            return $data;
        }
    }
}

5: TP5 后台路由文件:

return [
    '__pattern__' => [
        'name' => '\w+',
    ],
    '[hello]' => [
        ':id'   => ['index/hello', ['method' => 'get'], ['id' => '\d+']],
        ':name' => ['index/hello', ['method' => 'post']],
    ],
    'joke'   => ['index/Api1/joke', ['method' => 'get']],
    'constellation' => ['index/Api2/index', ['method' => 'get']],
    'weather' => ['index/Api3/index', ['method' => 'get']],
    'news' => ['index/Api4/index', ['method' => 'get']],
    'videos' => ['index/Api5/index', ['method' => 'get']],
    'driverlicense' => ['index/Api6/index', ['method' => 'get']],
    'today_in_history' => ['index/Api7/index', ['method' => 'get']]
];

6: TP5 http请求封装文件:


namespace app\index\controller;

class HttpRequest {

    public function index () {
        return "constellation api";
    }

    /**
 * 发起网络请求函数
 * @param String $url 请求的URL
 * @param bool $params  请求的参数内容
 * @param int $isPost   是否POST请求
 * @return bool|string  返回内容
 */
    public function httpRequest($url, $params = false, $isPost = 0){
        $httpInfo = [];
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
        curl_setopt($ch, CURLOPT_USERAGENT,  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36');    // 浏览器代理信息,我这里设置的自己的浏览器
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3);    // 连接的等待时间, 3秒
        curl_setopt($ch, CURLOPT_TIMEOUT, 12);          // 函数最长的执行时间 
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // 将 curl_exec() 获取的信息以字符串返回,而不是直接输出
        if ($isPost) {
            curl_setopt($ch, CURLOPT_POST, true);       // true 表示 post 请求
            curl_setopt($ch, CURLOPT_POSTFIELDS, $params);  // post 的请求数据的处理
            curl_setopt($ch, CURLOPT_URL, $url);        // 设置访问的 URL
        } else {
            if ($params) {
                curl_setopt($ch, CURLOPT_URL, $url . '?' . $params);
            } else {
                curl_setopt($ch, CURLOPT_URL, $url);
            }
        }
        $reponse = curl_exec($ch);
        if ($reponse === FALSE) {
            return false;   // echo "cURL Error: ".curl_error($ch);
        }
        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        $httpInfo = array_merge($httpInfo, curl_getinfo($ch));
        curl_close($ch);
        return $reponse;
    }
}

?>

PS: history 的背景贴图:
TP5后端,VUE前端请求聚合数据过去的今天_第1张图片

TP5后端,VUE前端请求聚合数据新闻接口

TP5后端,VUE前端请求聚合数据笑话大全接口

TP5后端,VUE前端请求聚合数据天气接口

TP5后端,VUE前端请求聚合数据热门视频接口

TP5后端,VUE前端请求聚合数据驾照题库

你可能感兴趣的:(thinkphp5,网站操作,vue技术总结,vue.js,前端,后端)