vite+vue3中使用mock模拟数据问题

vite+vue3的开发中，我们希望在开发过程中使用mock数据进行测试，而不是依赖于后端API接口。这样可以在不影响后端开发的情况下，快速开发并测试前端页面。在这里，我们提供一个完整的攻略，介绍如何在vite+vue3中使用mock模拟数据。

1. 安装mockjs

首先，在项目根目录下，使用npm或者yarn安装mockjs：

npm install mockjs --save-dev

# 或者

yarn add mockjs --dev

2. 创建mock数据

在根目录下，创建一个mock文件夹，并在其中创建一个user.js文件，用于模拟用户数据：

import Mock from 'mockjs'

const users = []
for (let i = 0; i < 10; i++) {
  users.push(Mock.mock({
    id: Mock.Random.guid(),
    name: Mock.Random.cname(),
    age: Mock.Random.integer(20, 50),
    address: Mock.mock('@county(true)'),
    time: Mock.Random.datetime()
  }))
}

export default {
  userList: users
}

这个文件导出了一个userList数组，包含了10个用户数据，用Mock.js随机生成了各种数据类型。

3. 使用mock数据

在Vue3的组件中，使用fetch获取mock数据：

<script>
export default {
  data() {
    return {
      userList: []
    }
  },
  mounted() {
    fetch('/api/userList')
      .then((response) => response.json())
      .then((result) => {
        this.userList = result.userList
      })
  }
}
</script>

这里我们使用/fetch来获取数据，这个路径是手动实现的，只要保证和mock数据文件user.js导出的路径相同即可。

4. 配置mock数据

在vite.config.js文件中，设置代理和路由规则：

import { createServer } from 'vite'
import { readFileSync } from 'fs'
import { resolve } from 'path'
import userMock from './mock/user'

function serveMock() {
  const server = createServer({
    server: {
      middlewareMode: true
    }
  })

  server.use((req, res, next) => {
    if (req.url.endsWith('.js')) {
      const file = readFileSync(resolve(process.cwd(), `./src${req.url}`), 'utf-8')
      res.end(file)
    } else {
      next()
    }
  })

  server.get('/api/userList', (req, res) => {
    res.json({
      code: 200,
      data: userMock.userList
    })
  })

  server.listen(3200)
}

serveMock()

export default {
  optimizeDeps: {
    include: [
      'mockjs',
      'path-to-regexp'
    ]
  }
}

这里我们使用vite的createServer方法创建了一个server，使用use方法根据请求路径返回mock数据。在vite.config.js中导出的默认配置中，通过optimizeDeps选项包含了需要的依赖，这样vite会正确的分析并执行mockjs的代码。

示例

下面提供两个示例，演示如何使用mockjs模拟每日一文和音乐列表的数据：

每日一文

首先，我们需要在mock文件夹中创建一个daily.js文件，用来模拟每日一文的数据：

import Mock from 'mockjs'

const content = Mock.Random.paragraph(6)
const author = Mock.Random.cname()
const title = Mock.Random.ctitle(10, 32)

export default {
  daily: {
    content,
    author,
    title
  }
}

然后，在vite.config.js中增加一个路由规则：

server.get('/api/daily', (req, res) => {
  res.json({
    code: 200,
    data: dailyMock.daily
  })
})

最后，在Vue3的组件代码中使用fetch获取数据即可：

<script>
export default {
  data() {
    return {
      daily: {}
    }
  },
  mounted() {
    fetch('/api/daily')
      .then((response) => response.json())
      .then((result) => {
        this.daily = result.data
      })
  }
}
</script>

音乐列表

首先，我们需要在mock文件夹中创建一个music.js文件，用来模拟音乐列表的数据：

import Mock from 'mockjs'

const musicList = []
for (let i = 0; i < 10; i++) {
  musicList.push(Mock.mock({
    id: Mock.Random.guid(),
    name: Mock.Random.ctitle(4, 16),
    singer: Mock.Random.cname(),
    album: Mock.Random.ctitle(8, 16),
    duration: Mock.Random.integer(120, 600),
    cover: Mock.Random.image(),
    url: Mock.Random.url()
  }))
}

export default {
  musicList
}

然后，在vite.config.js中增加一个路由规则：

server.get('/api/musicList', (req, res) => {
  res.json({
    code: 200,
    data: musicMock.musicList
  })
})

最后，在Vue3的组件代码中使用fetch获取数据即可：

<script>
export default {
  data() {
    return {
      musicList: []
    }
  },
  mounted() {
    fetch('/api/musicList')
      .then((response) => response.json())
      .then((result) => {
        this.musicList = result.data
      })
  }
}
</script>

这就是vite+vue3集成mockjs的完整攻略，希望对大家有用。

阅读剩余 78%