vuecli导致前端页面请求接口显示sockjs-node

最新推荐文章于 2022-09-02 00:10:11 发布

front_endxiaobaia

最新推荐文章于 2022-09-02 00:10:11 发布

阅读量419

点赞数

文章标签： vue socket 前端

本文链接：https://blog.csdn.net/front_endxiaobaia/article/details/104967878

版权

前两天写了一个垃圾分类智能查询系统，该页面一共只有三个请求，一个是绑定了点击事件点击后调用的，另外两个分别在vue生命周期中和wacth监听器中调用，刷新页面不进行任何操作竟然出现了三个接口请求。直接上图：

html部分代码：
<div class="baike_box_button" @click='handleSel(input,value)'>查询</div>
js代码：
        created(){
          axios({
            url:'/api/baike/selcity'
          }).then(res=>{
            this.citylist = res.data.data;
            this.value = this.citylist[0].cityid;
          }).catch(err=>{
            console.log('created数据获取失败');
          });
          //axios请求异步
          console.log('created里的--',this.value);
            // axios({
            //   url:`/api/baike/selkind?value=${this.value}`
            // }).then(res=>{
            //     this.typelist = res.data.data;
            // })
        },
        mounted(){
            console.log('mounted里的--',this.value)
        },
        methods:{
            handleSelectype(canshu){
                this.nowindex = canshu;
            },
            handleSel(input,value){
              axios({
                url:`/api/baike/seltype?input=${ input }&value=${ value }`
              }).then(res=>{
                console.log(res.data);
                this.detype = res.data.data[0].type;
                this.isShow = true;
              })
            }
        },
        watch:{
            value(){
                axios({
                    url:`/api/baike/selkind?value=${this.value}`
                  }).then(res=>{
                    this.typelist = res.data.data;
                }).catch(err=>{
                  console.log('城市数据获取失败');
                })
            }
        }