请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

正在回答

5回答

https://img.mukewang.com/szimg/5e06c08a09a9f65a06220086.jpg
你这里取的 res.data。

https://img.mukewang.com/szimg/5e06c0a00914b72908600392.jpg

你服务端返回的 key 是 res,看出问题了吗?

0 回复 有任何疑惑可以回复我~
  • 提问者 Annanelle #1
    应该是data:seller吗
    回复 有任何疑惑可以回复我~ 2019-12-28 11:01:58
  • 提问者 Annanelle #2
    非常感谢!
    回复 有任何疑惑可以回复我~ 2020-02-21 09:35:15
提问者 Annanelle 2019-12-27 16:50:50


vue.config.js文件:


const webpack = require('webpack');

const path = require('path');

const appData = require('./data.json');

const seller = appData.seller;

const goods = appData.goods;

const ratings = appData.ratings;


function resolve(dir) {

  return path.join(__dirname, dir);

}


module.exports = {

  css: {

    loaderOptions: {

      stylus: {

        'resolve url': true,

        'import': [

          './src/theme'

        ]

      }

    }

  },

  pluginOptions: {

    'cube-ui': {

      postCompile: true,

      theme: true

    }

  },

  devServer: {

    before(app) {

      app.get('/api/seller', function(req, res) {

        res.json({

          errno: 0,

          res: seller

        });

      });

      app.get('/api/goods', function(req, res) {

        res.json({

          errno: 0,

          res: goods

        });

      });

      app.get('/api/ratings', function(req, res) {

        res.json({

          errno: 0,

          res: ratings

        });

      });

    }

  },

  chainWebpack(config) {

    config.resolve.alias

      .set('components', resolve('src/components'))

      .set('common', resolve('src/common'))

      .set('api', resolve('src/api'));


    config.plugin('context')

      .use(webpack.ContextReplacementPlugin,

        [/moment[/\\]locale$/, /zh-cn/]);

  },

  //将原来的baseUrl改为publicPath

  publicPath: ''

}



index.js文件:


import { get } from './helpers';


const getSeller = get('api/seller');

const getGoods = get('api/goods');

const getRatings = get('api/ratings');


export {

  getSeller,

  getGoods,

  getRatings

};


helpers.js 文件:

/*
*  安装了axios后需要引入,然后进行数据的获取
*  1.封装get方法
* */
import axios from 'axios';
const ERR_OK = 0;

export function get(url) {
 return function(params = {}) {
   return axios.get(url, {
     params
   }).then((res) => { // 成功
     const { errno, data } = res.data;
     if (errno === ERR_OK) { // 失败
       return data;
     }
   }).catch((e) => {
   });
 };
}

0 回复 有任何疑惑可以回复我~
  • 你获取完数据赋值的代码呢?
    回复 有任何疑惑可以回复我~ 2019-12-27 17:33:28
  • 提问者 Annanelle 回复 ustbhuangyi #2
    import { get } from './helpers';

    const getSeller = get('api/seller');
    const getGoods = get('api/goods');
    const getRatings = get('api/ratings');

    export {
      getSeller,
      getGoods,
      getRatings
    };
    回复 有任何疑惑可以回复我~ 2019-12-27 17:42:00
  • 提问者 Annanelle 回复 ustbhuangyi #3
    const webpack = require('webpack');
    const path = require('path');
    const appData = require('./data.json');
    const seller = appData.seller;
    const goods = appData.goods;
    const ratings = appData.ratings;

    function resolve(dir) {
      return path.join(__dirname, dir);
    }

    module.exports = {
      css: {
        loaderOptions: {
          stylus: {
            'resolve url': true,
            'import': [
              './src/theme'
            ]
          }
        }
      },
      pluginOptions: {
        'cube-ui': {
          postCompile: true,
          theme: true
        }
      },
      devServer: {
        before(app) {
          app.get('/api/seller', function(req, res) {
            res.json({
              errno: 0,
              res: seller
            });
          });
    回复 有任何疑惑可以回复我~ 2019-12-27 17:42:21
提问者 Annanelle 2019-12-27 16:41:41

https://img.mukewang.com/szimg/5e05c39c09e5223c18150676.jpg

这是运行后的https://img1.sycdn.imooc.com/szimg/images/unknow-80.png


0 回复 有任何疑惑可以回复我~
  • 获取数据相关代码贴一下
    回复 有任何疑惑可以回复我~ 2019-12-27 16:43:54
  • 提问者 Annanelle 回复 ustbhuangyi #2
    后缀到添加回答编辑器里了
    回复 有任何疑惑可以回复我~ 2019-12-27 16:51:22
提问者 Annanelle 2019-12-27 15:32:18

https://img.mukewang.com/szimg/5e05b36e0979568916480940.jpg

数据确实获取到了,页面不显示

0 回复 有任何疑惑可以回复我~
  • 那就检测一下你有没有把这个数据正确赋值给 data 中的变量 seller
    回复 有任何疑惑可以回复我~ 2019-12-27 16:32:51
  • 提问者 Annanelle 回复 ustbhuangyi #2
    没有值,没传过来,不知道怎么改,图片后面追加了
    回复 有任何疑惑可以回复我~ 2019-12-27 16:40:13
提问者 Annanelle 2019-12-27 15:20:56

<template>
 <div class="header">
   <div class="content-wrapper">
     <div class="avatar">
       <img width="64" height="60" :src="seller.avatar" alt="">
     </div>
     <div class="content">
       <div class="title">
         <span class="brand"></span>
         <span class="name">{{seller.name}}</span>
       </div>
       <div class="description">分钟送达</div>
       <div class="support">
         <span class="text"></span>
       </div>
     </div>
     <div class="support-count">
       <span class="count">个</span>
       <i class="icon_keyboard_arrow_right"></i>
     </div>
   </div>
   <div class="bulletin-wrapper">
     <span class="bulletin-title"></span>
     <span class="bulletin-text"></span>
     <i class="icon_keyboard_arrow_right"></i>
   </div>
   <div class="background">
     <img width="100%" height="100%" src="" alt="">
   </div>
 </div>
</template>

<script type="text/ecmascript-6">
export default {
 name: 'v-header',
 props: {
   seller: {
     type: Object,
     default() {
       return {};
     }
   }
 }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
 @import "~common/stylus/mixin"
@import "~common/stylus/variable"

.header
position: relative
overflow: hidden
color: $color-white
background: $color-background-ss
.content-wrapper
position: relative
display: flex
align-items: center
padding: 24px 12px 18px 24px
.avatar
flex: 0 0 64px
width: 64px
margin-right: 16px
img
border-radius: 2px
.content
flex: 1
.title
display: flex
align-items: center
margin-bottom: 8px
.brand
width: 30px
height: 18px
bg-image('brand')
           background-size: 30px 18px
background-repeat: no-repeat
.name
margin-left: 6px
font-size: $fontsize-large
font-weight: bold
.description
margin-bottom: 8px
line-height: 12px
font-size: $fontsize-small
.support
display: flex
align-items: center
.support-ico
margin-right: 4px
.text
line-height: 12px
font-size: $fontsize-small-s

.support-count
position: absolute
right: 12px
bottom: 14px
display: flex
align-items: center
padding: 0 8px
height: 24px
line-height: 24px
text-align: center
border-radius: 14px
background: $color-background-sss
.count
font-size: $fontsize-small-s
.icon-keyboard_arrow_right
margin-left: 2px
line-height: 24px
font-size: $fontsize-small-s

.bulletin-wrapper
position: relative
display: flex
align-items: center
height: 28px
line-height: 28px
padding: 0 8px
background: $color-background-sss
.bulletin-title
flex: 0 0 22px
width: 22px
height: 12px
margin-right: 4px
bg-image('bulletin')
       background-size: 22px 12px
background-repeat: no-repeat
.bulletin-text
flex: 1
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
font-size: $fontsize-small-s
.icon-keyboard_arrow_right
flex: 0 0 10px
width: 10px
font-size: $fontsize-small-s
.background
position: absolute
top: 0
left: 0
width: 100%
     height: 100%
     z-index: -1
filter: blur(10px)
</style>



0 回复 有任何疑惑可以回复我~

相似问题

登录后可查看更多问答,登录/注册

问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信