Преобразование vue-cli и использование mockjs для создания фиктивного сервера

внешний интерфейс Vue.js Webpack

о

Недавно собирался разрабатывать веб-приложение, учитывая, что могут быть сценарии параллельной разработки фронтенда и бэкенда, решил использовать mockjs в качестве мок-сервера.

Просматривая официальную документацию веб-сайта, я обнаружил, что на веб-пакете нет примера, поэтому я просто нашел способ решить эту проблему самостоятельно.

Что такое mockjs и каков его сценарий использования?

Когда фронтенд-инженерам нужно разрабатывать параллельно, независимо от бэкенда, бэкэнд-интерфейс не доработан, так как же фронтенд получает данные?

В настоящее время вы можете рассмотреть возможность создания веб-сервера на внешнем интерфейсе для имитации поддельных данных, а mockjs используется для генерации случайных данных и перехвата запросов Ajax.

Цитируется нижеmockjsКартинки с официального сайта:

Текст: Как преобразовать vue-cli и встроить mockjs в веб-пакет?

инициализация проекта vue

  1. Установите инструмент создания лесов vue-cli и инициализируйте проект.
    //全局安装 vue-cli
    npm install vue-cli -g
    //创建一个基于 webpack 模板的新项目
    vue init webpack mock-server-demo
    //切换至mock-server-demo目录
    cd mock-server-demo
  1. Установить зависимости
    //我们使用axios来发起http请求
    npm install axios --save
    //安装依赖mockjs
    npm install mockjs --save-dev

Создайте веб-сервер для ответа на HTTP-запросы браузера.

Веб-сервер не нужно собирать сам по себе или устанавливать зависимости, он уже упакован в webpack-dev-server, нам просто нужно использовать его напрямую.

  1. Создайте фиктивную папку в корневом пути проекта и создайте несколько файлов в фиктивной папке на картинке.

  2. файл 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));
        });
    }
  1. файл 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);
        }
    };
  1. файл 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
        }
    }
  1. Добавьте новую функцию перед ловушкой в ​​свойство devServer в файле пути build/webpack.dev.conf.js, чтобы прослушивать HTTP-запросы из Интернета. (Как использовать 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,
        }
      },

Браузер инициирует запрос на получение фиктивных данных

  1. Используйте axios, чтобы инициировать HTTP-запрос в файле App.vue.
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 = {};
        }
        
      });
    }
  }
}

увидеть эффект

Вы можете увидеть случайно сгенерированные фиктивные данные, полученные с каждым запросом клика.

наконец

Адрес блога на этой странице используется в качестве демонстрации. Дополнительные методы использования вы можете найти в официальном коде.

Существует также внешний интерфейс для самостоятельного создания фиктивного сервера, который должен сначала связаться с серверной разработкой, чтобы определить структуру данных и URL-адрес интерфейса.Если серверная часть изменит согласованную структуру данных, мы можем только сделай все сначала.мок сервер только решает проблему до определенной степени.средства проблемы.

складской путь

Пожалуйста, не занимайтесь плагиатом оригинальной статьи!

Категории