改造vue-cli,使用mockjs搭建mock server

时间: 2018-12-15阅读: 3002标签: cli

关于

最近准备开发一款web应用,考虑到可能会有前后端并行开发的场景,所以决定使用mockjs做mock server。浏览官网文档时发现没有跑在webpack上的例子,索性自己找方法解决。


什么是mockjs?他的使用场景是什么?

前端工程师需要独立于后端并行开发时,后端接口还没有完成,那么前端怎么获取数据?这时可以考虑前端搭建web server自己模拟假数据,mockjs用来生成随机数据,拦截 Ajax 请求。

下面引用mockjs官网的图片:


 

正文:如何改造vue-cli,将mockjs嵌入到webpack?

vue项目初始化

安装vue-cli脚手架工具,并初始化项目
//全局安装 vue-cli
npm install vue-cli -g
//创建一个基于 webpack 模板的新项目
vue init webpack mock-server-demo
//切换至mock-server-demo目录
cd mock-server-demo
安装依赖
//我们使用axios来发起http请求
npm install axios --save
//安装依赖mockjs
npm install mockjs --save-dev

搭建web server,响应浏览器的http请求

web server不需要自己搭建或者另外安装依赖,在webpack-dev-server中已经封装好了,我们只需要直接那过来用就可以了。

在项目根路径下创建mock文件夹,并创建图片中mock文件夹中的几个文件


index.js 文件

    const Mock = require(‘mockjs‘);//mockjs 导入依赖模块
    const util = require(‘./util‘);//自定义工具模块
    //返回一个函数
    module.exports = function(app){
        //监听http请求
        app.get(‘/user/userinfo‘, function (rep, res) {
            //每次响应请求时读取mock data的json文件
            //util.getJsonFile方法定义了如何读取json文件并解析成数据对象
            var json = util.getJsonFile(‘./userInfo.json‘);
            //将json传入 Mock.mock 方法中,生成的数据返回给浏览器
            res.json(Mock.mock(json));
        });
    }
util.js 文件
    const fs = require(‘fs‘);//引入文件系统模块
    const path = require(‘path‘);//引入path模块
    
    module.exports = {
        //读取json文件
        getJsonFile:function (filePath) {
            //读取指定json文件
            var json = fs.readFileSync(path.resolve(__dirname,filePath), ‘utf-8‘);
            //解析并返回
            return JSON.parse(json);
        }
    };
userInfo.json 文件
    {
        "error":0,
        "data":{
            "userid": "@id()",//随机生成用户id
            "username": "@cname()",//随机生成中文名字
            "date": "@date()",//随机生成日期
            "avatar": "@image(‘200x200‘,‘red‘,‘#fff‘,‘avatar‘)",//生成图片
            "description": "@paragraph()",//描述
            "ip": "@ip()",//IP地址
            "email": "@email()"//email
        }
    }
在路径build/webpack.dev.conf.js文件中的devServer属性中新添加一个before钩子函数,用来监听来自web的http请求。
    devServer: {
        clientLogLevel: ‘warning‘,
        historyApiFallback: {
          rewrites: [
            { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, ‘index.html‘) },
          ],
        },
        hot: true,
        contentBase: false,
        compress: true,
        host: HOST || config.dev.host,
        port: PORT || config.dev.port,
        open: config.dev.autoOpenBrowser,
        overlay: config.dev.errorOverlay
          ? { warnings: false, errors: true }
          : false,
        publicPath: config.dev.assetsPublicPath,
        proxy: config.dev.proxyTable,
        quiet: true,
        before: require(‘../mock‘),//引入mock/index.js
        watchOptions: {
          poll: config.dev.poll,
        }
      },

浏览器发起请求,获取mock data

在App.vue文件中使用axios发起http请求
export default {
  name: ‘App‘,
  data(){
    return {
      userInfo:{}
    }
  },
  created(){
    this.getUserInfo();
  },
  methods:{
    getUserInfo(){
     //请求‘/user/userinfo‘接口
      this.axios.get(‘/user/userinfo‘)
      .then(({data})=>{
        //打印mock data
        console.log(data);
        if(data.error === 0){
          this.userInfo = data.data;
        }else{
          this.userInfo = {};
        }
        
      });
    }
  }
}

 可以看到每次点击请求时会获取的随机生成的mock data。


最后

本页博客址是作为一个demo,更多的使用方法可以多参考官方代码。还有前端自己搭建mock server需要和后端开发首先沟通好才能定义数据结构和接口url,如果后端更改了商定好的数据结构,那么我们只能推倒重来,mock server只是在一定程度上解决问题的手段。

作者:林楠
链接:https://juejin.im/post/5acdb5345188255c5668caa5  


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1588

关闭

采用vue-cli搭建一个Vue.js项目工程

Vue很优雅,没太多废话和周折,代码漂亮,思路清晰,大赞!上手比较快。Vue.js 因其性能、通用、易用、体积、学习成本低等特点已经成为了广大前端们的新宠。

vue-cli中使用jquery

在webpack.base.conf.js里加入(新版的可能找不到这个文件,你可以npm install webpack --save-dev进行手动安装),在module.exports的最后加入,在main.js 引入,新版直接在main.js 引入

扔掉 cli,webpack工程轻量化配置实战

本文从实战出发,提供了一个相对普适的轻量化webpack工程配置方案。受篇幅所限,没有对一些配置项做过多解释,如果需要了解某个配置细节,可以查询相关文档或文章。有兴趣的同学也可以阅读webpack源码作深入了解

vue-cli3.0脚手架的使用_vue-cli3.0搭建与配置(vue.config.js)

vue-cli致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject

解决Angular CLI找不到模块angular-devkit/build-angular的问题

Angular CLI 是 Angular 客户端命令行工具,提供非常多的命令来简化 Angular 的开发。今天执行“ng serve”命令时,竟然报找不到模块@angular-devkit/build-angular的错误。

使用nodejs编写命令行工具_编写自己的cli工具

编写自己的cli工具,一行命令,3秒钟进入coding状态!看完本文,你将学会如何从零开发一个cli项目,如何上传到github库,以及如何使用npm发布自己的包。

vue-cli e2e测试_运行 npm run e2e报错解决

vue init webpack 项目名字创建项目时,就可以选择单元测试,运行npm run e2e进行e2e单元测试了,结果发现出现很多错误,下面就总结下如何解决这些问题?

在vue-lic脚手架中安装mockjs,实现前后端分离开发

在项目开发前期,前端开发中,页面布局基本开发完毕,但是后台还接口还没有开发完,等待后台开发完接口,在进行接口联调,浪费了等待时间,也压缩的测试的时间

解决vue cli2和cli3打包后不能运行问题 Failed to load resource: net::ERR_FILE_NOT_FOUND

打包后的文件要在服务器中运行 解决方法:放在服务器中打开,依次在终端执行下面命令;vue cli3 在项目根目录内vue.congfig.js文件(如没有,自行创建)加上如下代码

@vue/cli 项目编译重复命中缓存问题解析

最近遇到一个更新了 package,但是本地编译打包后没有更新代码的情况,先来复现下这个 case 的流程:翻了那些 issue 后,基本知道了是由于 webpack 在编译代码过程中走到 cache-loader 然后命中了缓存,这个缓存是之前编译的老代码

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!