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

最新推荐文章于 2023-07-20 09:50:00 发布

叫我福建

最新推荐文章于 2023-07-20 09:50:00 发布

阅读量519

点赞数

分类专栏： thinkphp5 网站操作 vue技术总结文章标签： vue.js 前端后端

本文链接：https://blog.csdn.net/qq_38192709/article/details/122492788

版权

本文介绍了如何使用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