【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建

Mock.js是一款用于前后端分离开发的模拟数据工具，它可以模拟各种HTTP请求，比如GET、POST等，以及相应的响应数据。下面是如何使用Mock.js来模拟首页导航栏左侧菜单数据的示例代码：

// 引入Mock
const Mock = require('mockjs')
 
// 定义模拟数据
const data = Mock.mock({
  'nav|1-5': [
    {
      'id|+1': 1, // 自增ID
      'name': '@ctitle' // 随机中文标题
    }
  ]
})
 
// 导出模拟数据
module.exports = data

在Vue组件中，你可以使用axios等HTTP客户端来发起请求，并渲染模拟的数据。

<template>
  <div>
    <ul>
      <li v-for="item in navList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios'
import data from './mock/data' // 假设mock/data是模拟数据的路径
 
export default {
  data() {
    return {
      navList: data.nav
    }
  },
  created() {
    // 实际项目中，这里会发起真实的HTTP请求
    // axios.get('/api/nav').then(response => {
    //   this.navList = response.data.nav
    // })
  }
}
</script>

在上述代码中，我们首先使用Mock.js定义了一组模拟数据，然后在Vue组件的created钩子中，我们将模拟数据赋值给navList，并渲染到页面上。实际项目中，你会用axios或其他HTTP客户端发起真实的HTTP请求，并在请求成功后处理数据。