vue-cli项目中使用mockjs模拟数据-配置和使用(超详细!)

在前端的开发中,很多时候都需要用到接口,但是后端的接口往往要比较晚才出来,那么前端有没有办法通过制造假数据来模拟后端端口,加快开发速度呢?答案是肯定的,这里有两种方法介绍下。

1. 使用网上一些提供数据的网站,如聚合数据极速数据等,但是需要注册,大部分API需要钱💴,且不如自己配置的方便;

2. 利用mockjs模拟数据。

下面就介绍在vue-cli项目中使用mockjs来模拟数据的步骤。

mock.js 提供了以下模拟功能:

  1. 根据数据模板生成模拟数据
  2. 模拟 Ajax 请求,生成并返回模拟数据

1.开始

搭建一个vue-cli项目(不介绍了)

2.安装mockjs

npm install mockjs --save-dev

 3.配置

// 项目根目录下的 vue.config.js 的 devServe 中
before: () => {
    var chokidar = require('chokidar')  // 监听
    var watcher = chokidar.watch('./tests/mock/', {
        ignored: /(^|[\/\\])\../,
        persistent: true
    })
    var forkMockServer = function () {
        return require('child_process').fork('./tests/mock/index.js')  // 子进程,fork父子通信
    }
    var n = forkMockServer()

    watcher.on('change', () => {
        console.log('restart mock server')
        n.kill()
        n = forkMockServer()
    })

    process.on('SIGINT', function () {
        n.kill()
        process.exit(0)
    })
}

4.创建 mockjs 文件

a. 在项目根目录下创建 mock 文件夹,文件夹里创建 index.js 文件

// index.js
const fs = require('fs')
const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()  // 集中处理URL,根据不同的URL调用不同的处理函数
const bodyParser = require('koa-bodyparser')  // 解析原始的request请求,把解析的参数绑定到 ctx.request.body中
// 上面的中间件 需要 npm install

app.use(bodyParser())
app.use(router.routes())
app.use(router.allowedMethods())

require('./api/articles.js')(router)


app.listen(3000, function() {
    console.log('\nmock server running, http://localhost:3000')
})

b. 在当前目录下新建api文件夹,在api文件夹里新建articles.js文件

const Mock = require('mockjs')

// 配置模拟数据:
const article = ctx => {
    ctx.body = Mock.mock({
        c: 0,
        m: 'ok',
        data: {
            articles: [
                {
                    id: '@integer()',
                    title: '@ctitle(3,6)',
                    date: '@date("yyyy-MM-dd HH:mm:ss")',
                    content: '@cparagraph(5,8)',
                    introduction: '@csentence(30,50)',
                    readNum: '@integer(10, 100)',
                    comNum: '@integer(10, 100)'
                }
            ]
        }
    })
}
  // 返回模拟的数据及接口:
module.exports = (router) => {
    return [
        router.get('/api/article', article),
    ]
}

5.在项目中配置api接口

a. 在src下新建 service 文件夹,文件夹内新建article.js 文件

// article.js
import axios from 'axios'

export function getArticles() {
    return axios.get('/api/article')  // mockjs返回的接口
}

b. 在需要请求数据的组件内使用

// src/components/article-main.vue

import {getArticles} from "@/service/articles"  // 引入
export default {
    data () {
        return {
            articles:[],  // 文章列表
        }
    },
    methods: {
        getArticlesList: function () {  
            getArticles().then(res => {      // 使用,返回数据
                let data = res.data.data.articles;
                this.articles = data;
            })
        }
    },
    created () {
        this.getArticlesList();
    }
}

6.重新启动项目

就可以看到生成的假数据啦!

至此,mockjs模拟数据的步骤已经完成,可以进行下一步的开发。等到后台接口对接好之后,mockjs直接取消使用就ok了。

发布了39 篇原创文章 · 获赞 60 · 访问量 2万+
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 终极编程指南 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览