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

本文介绍了如何使用TP5后端与Vue前端进行数据聚合,包括前端Vue文件和配置、后端的JSON测试、处理、路由及HTTP请求封装等步骤,展示了新闻、笑话、天气、热门视频和驾照题库接口的实现。
摘要由CSDN通过智能技术生成

先上效果:
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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值