vux 獲取後端數據並顯示出來並且帶 請求頭token

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)
        })
      }


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章