TP5后端,VUE前端请求聚合数据成语大全

最新推荐文章于 2024-04-26 17:14:33 发布

叫我福建

最新推荐文章于 2024-04-26 17:14:33 发布

阅读量645

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/qq_38192709/article/details/122512649

版权

本文介绍了如何使用TP5后端和VUE前端来聚合以特定字开头的成语数据。通过VUE前端代码实现请求，利用TP5的HTTP请求封装和路由设置，创建了包括成语大全在内的多个接口，如新闻、笑话、天气和视频等接口，实现了数据的聚合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PS：聚合接口上描述的是成语大全，其实只是以用户查找字为开头的成语而已。先上演示效果：
TP5后端,VUE前端请求聚合数据成语大全

1： VUE 前端代码

<template>
    <div class="content">
        <!--
            请求地址：http://apis.juhe.cn/idiomJie/query
            请求参数：wd=%E9%80%BC&size=&is_rand=1&key=b1bcc301******24cdbe1b
            请求方式：GET

            参数名	  类型	 是否必填	        说明	                值
            wd	    string	是	        查询的成语，如：一心一意        逼
            size	int	    否	        返回的结果数量限制，如：5。     默认所有
            is_rand	int	    否	        是否随机返回结果，1:是 2:否。   默认2

            {
   
                "reason":"success",
                "result":{
   
                    "last_word":"逼",
                    "data":[
                        "逼良为娼",
                        "逼上梁山",
                        "逼人太甚",
                        "逼不得已"
                    ],
                    "total_count":4
                },
                "error_code":0
            }
            从返回结果上看，这并不是成语接龙，而是查询开头为 查询字的 成语

            1: 查询字， 如果查询结果的 total_count < 1 ，返回没有结果，不然全部显示出来

        -->
        <el-card :span="12">
            <div class="queryEle">
                <el-input placeholder="请输入开头字" v-model="queryWord" class="queryIpt"></el-input>
                <el-button type="success" plain @click="queryIdioms">查询</el-button>
            </div>

            <h1>{
   {
    beforeQueryS }}<span class="heightLight">{
   {
    midQueryS }}</span>{
   {
    endQueryS }}</h1>
            <ol class="idiomsOl">
                <li v-for="(d, index) in data" :key="index" >
                    <span>{
   {
    index + 1 }} ：</span>
                    <span class="idiom">{
   {
    d }}</span>
                </li>
            </ol>
        </el-card>
    </div>
</template>

<script>

export default {
   
    name: 'idioms',
    mounted: function () {
   
        this.getData()
    },
    data () {
   
        return {
   
            apiUrl: '/api_8',
            queryWord: '', // 需要查询的开头字
            beforeQueryS: '输入开头字，查询相关',
            midQueryS: '',
            endQueryS: '字开头的成语',
            data: [ '逼良为娼', '逼上梁山', '逼人太甚', '逼不得已' ]
        }
    },
    methods: {
   
        getData: function () {
    // 获取数据
            console.log('I am getting')
            this.$axios({
   
                url: this.apiUrl,
                params: {
   
                    queryWord: this.queryWord
                },
                methods: 'get'
            }).then(res => {
   
                if (res.data.error_code === 0) {
   
                    console.log(res.data.result)
                    this.data = res.data.result.data
                } else

最低0.47元/天解锁文章