vue脚手架之mockjs，前后端数据对接交互

琉-璃

于 2019-08-28 14:25:06 发布

阅读量473

点赞数

分类专栏： vue 文章标签： vue.js node.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_42486438/article/details/100118219

版权

本文介绍了如何在Vue脚手架项目中集成MockJS，用于模拟前后端数据交互。首先，通过npm安装MockJS和axios。接着，创建mock文件夹和mock.js，配置模拟数据。然后，在main.js中引入mock.js。最后，更新Home.vue文件，添加按钮触发请求，浏览器访问应用，点击按钮将展示MockJS拦截并返回的模拟数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装 mockjs 和 axios

npm install mockjs

2、新建mock文件夹，底下建mock.js文件，在文件新增两个Mock.mock内容作为等下页面触发读取的内容

mocj.js 内容

// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock一组数据
const produceNewsData = function () {
    let articles = [];
    for (let i = 0; i < 100; i++) {
        let newArticleObject = {
            title: Random.csentence(5, 30), //  Random.csentence( min, max )
            thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
            author_name: Random.cname(), // Random.cname

最低0.47元/天解锁文章