변환 VUE-CLI를 사용하여 mockjs 모의 서버를 구축

첫 등장이 문서 덴버

에

내가 mockjs 모의 서버을 사용하기로 결정 그래서 결국 전후 계정으로 장면을 복용, 웹 응용 프로그램을 개발할 준비가 최근이 병렬로 개발 될 수있다.

예를 들면 웹팩 문서, 단순히 자신의 해결책을 찾을 공식 웹 사이트에서 볼 수있는 브라우저에서 실행되지 않았다.

mockjs 무엇입니까? 자신의 사용 시나리오는 무엇인가?

프론트 엔드 엔지니어의 요구가 독립적 인 백엔드 병렬 개발을 할 때, 백엔드 인터페이스가 완료되지 않은, 다음 프론트 엔드에서는 데이터를 얻으려면?

이때 전단 유사체는 자신의 웹 서버에 더미 데이터를 랜덤 데이터 절편 Ajax 요청을 생성 mockjs 설정 간주 될 수있다.

다음 인용 mockjs 사진 공식 웹 사이트 :

본문 : 어떻게 웹팩에 VUE-CLI, 내장 mockjs을 변환하는 방법?

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

브라우저의 HTTP 요청에 대한 응답으로, 웹 서버 구축

당신은 우리가 단지와 함께이 직접 좋은 패키지가 필요했다 웹팩-DEV-서버에 자신의 웹 서버를 구축하거나 의존 설치할 필요가 없습니다.

프로젝트 루트 경로에 모의 폴더를 만들고 사진 폴더 모의에 여러 개의 파일을 생성
하는 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
        }
    }

DevServer 속성 경로 빌드 / 새로 웹에서 HTTP 요청을 모니터링하는 데 사용 후크 기능, 이전에 파일을 추가 webpack.dev.conf.js. ( 켜짐 devServer.before를 사용하는 방법 )

    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,
        }
      },

브라우저는 모의 데이터를 얻기 위해 요청을 시작합니다

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 = {};
        }
        
      });
    }
  }
}