使用vue,mock,axios等实现商城详情页，包括接口

好的，我会尽力回答你的问题。

首先，你需要准备一个后端API接口，用于返回商城详情页所需要的数据。这个接口可以使用mock.js来模拟。下面是一个简单的示例：

import Mock from 'mockjs'

// 模拟商品详情数据
Mock.mock('/api/goods/detail', 'get', {
  code: 200,
  msg: 'success',
  data: {
    id: '@id',
    name: '@ctitle(10, 20)',
    price: '@integer(100, 5000)',
    desc: '@cparagraph(2, 4)',
    image: '@image("200x200", "#50B347", "#FFF", "Mock.js")',
    detail: '@cparagraph(10, 20)'
  }
})

上面的代码中，我们使用Mock.js来模拟了一个商品详情接口，返回了一个包含商品id、名称、价格、描述、图片和详情的JSON对象。

接下来，你需要使用axios来发送请求，获取接口数据，并在vue组件中展示。下面是一个简单的示例：

<template>
  <div>
    <h2>{{ goods.name }}</h2>
    <p>价格：{{ goods.price }}元</p>
    <img :src="goods.image" alt="">
    <p>{{ goods.desc }}</p>
    <div v-html="goods.detail"></div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      goods: {}
    }
  },
  mounted() {
    this.getGoodsDetail()
  },
  methods: {
    getGoodsDetail() {
      axios.get('/api/goods/detail').then(res => {
        if (res.data.code === 200) {
          this.goods = res.data.data
        }
      })
    }
  }
}
</script>

上面的代码中，我们使用axios发送了一个GET请求，获取了商品详情数据，并将数据赋值给了goods属性。在vue模板中，我们使用了{{}}语法来展示数据，同时使用v-html指令来展示商品详情的HTML内容。

以上就是使用vue、mock和axios实现商城详情页的基本流程。当然，这只是一个简单的示例，实际开发中还需要处理一些异常情况、添加loading等。希望能对你有所帮助。