vux 获取后端数据并显示出来并且带请求头token

最新推荐文章于 2025-09-30 11:00:30 发布

原创最新推荐文章于 2025-09-30 11:00:30 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Vue.js框架实现的应用案例，包括了组件化的页面布局、动态数据绑定、API调用及数据处理等内容。通过具体代码示例展示了如何在Vue项目中组织结构、交互逻辑与数据流。

methods:{
    printconsole(){
            let that=this;
            //console.log(that.getToken());
            that.$http.post(that.getSvcUrl('/user/getMyUserInfo'),null,{headers: {  null是指请求带的参数
            'Authorization': 'Bearer ' +that.getToken()
            }})
                .then((res2)=>{
                 that.SetUserInfo(res2.data.data);
                console.log(res2.data.data);
                });
            }
        }
}

发送请求并返回数据

注意！

点击事件需要 @click.native="toShow"    如果返回的 数据 是数组 形式：例如 [{"name":"张三","age":"18"}] 那么需要写成 prod[0].name


<template>
    <div id="myAdd">
        <group>
            <calendar title="我的日历" ></calendar>
        </group>
        <group>
            <cell title="cell" value="hello" is-link></cell>
            <cell-box v-for="proddd in prods" :key="proddd"> 
               {{proddd}}
            </cell-box>
            <cell-box>
                cell-box hello world hello world hello world
            </cell-box>
            <cell title="cell" value="hello" is-link></cell>
        </group>
            <div><x-button plain type="primary" @click.native="toShow" style="border-radius:99px;"> 点击</x-button></div>
            <p>{{Goods}}</p>
        <ul>
            <li v-for="prod in prods" :key="prod.id">
               {{prod.prodclassname}}
            </li>
        </ul>    
     </div>
</template>

<script>
import { Group , Calendar,Cell, CellBox ,XButton} from 'vux'
import { setTimeout } from 'timers';
export default {
    name:'myadd',
    components: {
          Group,
          Calendar,Cell, CellBox,XButton
        },
        data (){
            return {
                Goods: '吃吃吃',
                prods:[]
            }
        },
        methods:{
            toShow(){
                let that=this;
                that.$http.post(that.getSvcUrl('/guideProduct/list'))
                    .then((res)=>{
                        setTimeout(()=>{
                             that.prods=(res.data.data.classList)
                             console.log(res.data.data.classList);
                             
                        })
                    })
            }
        }
}
</script>

methods: {
      jumpToIndex () {
        let that = this;
        that.$vux.loading.show({
          text: '请稍后...'
        })
        let par = {
          "logid": that.username,
          "password": that.password,
           
        };
        that.$http.post(that.getSvcUrl('/login/login.do'), par)
          .then((res) => {
            setTimeout(()=>{
              if(res.data.code == 0){
                that.setUser(res.data.data);
                that.$vux.loading.hide() //隐藏加载
                that.$router.push({ path: 'home'})  //这就是路由跳转的写法
              }else{
                that.clearUser()
                that.$vux.loading.hide()
                this.$vux.alert.show({
                  title: '登陆失败',
                  content: res.data.message
                })
              }
            })
          }).catch((err) => {
          console.log(err)
        })
      }