1. Python技术站首页
  2. 其他
  3. Vue

vue-cli项目使用mock数据的方法（借助express）

• Vue
yizhihongxing

以下是详细讲解“vue-cli项目使用mock数据的方法（借助express）”的完整攻略。

前置知识

在讲解具体的实现方法之前，需要先了解一些前置知识：

  • vue-cli：Vue.js 的官方脚手架，可用于快速搭建 Vue.js 项目
  • mock.js：一个用于生成随机数据的库，可生成各种类型的数据
  • express.js：一个用于搭建 web 服务器的库，可用于处理 HTTP 请求和响应
  • axios：一个用于发送 HTTP 请求的库，可用于获取来自服务器端的数据

实现步骤

下面是使用 express.js 实现 vue-cli 项目中使用 mock.js 的具体步骤。

步骤一：安装依赖

在 vue-cli 项目的根目录下打开终端，输入以下命令安装依赖：

npm install --save-dev express body-parser
npm install --save-dev mockjs
  • express：用于搭建 web 服务器
  • body-parser：用于解析 HTTP 请求体中的 JSON 数据
  • mockjs：用于生成随机数据

步骤二：创建 mock 数据

在项目的根目录下创建一个名为 “mock” 的目录，并在该目录下创建一个名为 “index.js” 的文件。在该文件中编写 mock 数据，示例如下：

// mock/index.js

const Mock = require('mockjs');

const data = Mock.mock({
  'list|10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-30': 20
  }]
});

module.exports = data;

以上代码中，我们使用 mockjs 生成了一个包含 10 个元素的数组，每个元素包含 id、name 和 age 三个属性，其中 name 属性使用了 @cname 表示生成中文名字，age 属性使用了 18-30 表示生成 18 到 30 岁之间的随机数。

步骤三：创建 express 服务器

在项目的根目录下创建一个名为 “server.js” 的文件，并在该文件中编写如下代码：

// server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

const data = require('./mock');

app.use(bodyParser.json());

app.get('/api/data', (req, res) => {
  console.log('GET /api/data');
  res.json(data);
});

const server = app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

module.exports = server;

以上代码中，我们使用 express 搭建了一个简单的 web 服务器，对于发送到 “/api/data” 的 GET 请求，服务器将返回之前生成的 mock 数据。

步骤四：在 Vue 组件中使用 axios 获取数据

在我们已经可以响应 GET 请求的服务器的基础上，我们需要在 Vue 组件中使用 axios 发送 GET 请求，示例如下：

// MyComponent.vue

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.id }} - {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    axios.get('/api/data')
      .then(response => {
        this.list = response.data.list;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

以上代码中，我们使用了 axios 发送了一个 GET 请求，请求的 URL 是 “/api/data”，并在请求成功后将返回的数据赋值给 Vue 组件实例的 list 属性。

示例

以下是两个示例，分别针对使用 vue-cli 2.x 和 vue-cli 3.x 创建的项目。

示例一：Vue-cli 2.x

在使用 vue-cli 2.x 创建的项目中，我们需要在 webpack 配置文件中配置开发服务器，并使其支持代理功能。

  1. 安装依赖

进入项目根目录，打开命令行窗口，执行以下命令安装依赖：

npm i express body-parser -D
npm i mockjs -S
  1. 创建 mock 数据

在项目根目录下创建一个名为 “mock.js” 的文件，并输入以下代码：

// mock.js

const Mock = require('mockjs');

const data = Mock.mock({
  'list|10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-30': 20
  }]
});

module.exports = data;

以上代码中，我们使用了 mockjs 生成了一个包含 10 个元素的数组，每个元素包含 id、name 和 age 三个属性，其中 name 属性使用了 @cname 表示生成中文名字，age 属性使用了 18-30 表示生成 18 到 30 岁之间的随机数。

  1. 创建服务器

在项目根目录下创建一个名为 “server.js” 的文件，并输入以下代码：

// server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

const data = require('./mock');

app.use(bodyParser.json());

app.get('/api/data', (req, res) => {
  console.log('GET /api/data');
  res.json(data);
});

const server = app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

module.exports = server;

以上代码中，我们使用了 express 搭建了一个简单的 web 服务器，对于发送到 “/api/data” 的 GET 请求，服务器将返回之前生成的 mock 数据。

  1. 修改 webpack 配置

打开 webpack.dev.conf.js 文件，找到 devServer.proxy 属性，并在该属性中添加以下代码：

// webpack.dev.conf.js

module.exports = {
  // ... 省略其余配置
  devServer: {
    // ... 省略其余配置
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
  // ... 省略其余配置
}

以上配置中，我们使用了 devServer.proxy 属性，并将所有以 “/api” 开头的请求转发到之前启动的 web 服务器。

  1. 在组件中使用 axios 获取数据

在需要使用 mock 数据的 Vue 组件中，我们可以使用以下代码获取数据：

// MyComponent.vue

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.id }} - {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    axios.get('/api/data')
      .then(response => {
        this.list = response.data.list;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

以上代码中，我们使用了 axios 发送了一个 GET 请求，并将其 URL 设置为 “/api/data”，在请求成功后将返回的数据赋值给 Vue 组件实例的 list 属性。

示例二：Vue-cli 3.x

在使用 vue-cli 3.x 创建的项目中，我们可以使用 vue.config.js 文件来配置 webpack。

  1. 安装依赖

进入项目根目录，打开命令行窗口，执行以下命令安装依赖：

npm i express body-parser -D
npm i mockjs -S
  1. 创建 mock 数据

在项目根目录下创建一个名为 “mock.js” 的文件，并输入以下代码：

// mock.js

const Mock = require('mockjs');

const data = Mock.mock({
  'list|10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-30': 20
  }]
});

module.exports = data;

以上代码中，我们使用了 mockjs 生成了一个包含 10 个元素的数组，每个元素包含 id、name 和 age 三个属性，其中 name 属性使用了 @cname 表示生成中文名字，age 属性使用了 18-30 表示生成 18 到 30 岁之间的随机数。

  1. 创建服务器

在项目根目录下创建一个名为 “server.js” 的文件，并输入以下代码：

// server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

const data = require('./mock');

app.use(bodyParser.json());

app.get('/api/data', (req, res) => {
  console.log('GET /api/data');
  res.json(data);
});

const server = app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

module.exports = server;

以上代码中，我们使用了 express 搭建了一个简单的 web 服务器，对于发送到 “/api/data” 的 GET 请求，服务器将返回之前生成的 mock 数据。

  1. 修改 vue.config.js 配置

在项目根目录下创建一个名为 “vue.config.js” 的文件，并输入以下代码：

// vue.config.js

module.exports = {
  devServer: {
    before(app) {
      app.use(bodyParser.json());

      app.get('/api/data', (req, res) => {
        console.log('GET /api/data');
        res.json(require('./mock'));
      });
    }
  }
};

以上代码中，我们使用了 vue.config.js 文件，并在其中编辑了一个 “before” 钩子，在该钩子中，我们使用了 express 搭建了一个简单的 web 服务器，对于发送到 “/api/data” 的 GET 请求，服务器将返回之前生成的 mock 数据。

  1. 在组件中使用 axios 获取数据

在需要使用 mock 数据的 Vue 组件中，我们可以使用以下代码获取数据：

// MyComponent.vue

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.id }} - {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    axios.get('/api/data')
      .then(response => {
        this.list = response.data.list;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

以上代码中，我们使用了 axios 发送了一个 GET 请求，并将其 URL 设置为 “/api/data”，在请求成功后将返回的数据赋值给 Vue 组件实例的 list 属性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue-cli项目使用mock数据的方法（借助express） - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue2单元测试环境搭建

    Vue2单元测试环境搭建 单元测试是为了保证代码质量而必要的步骤。Vue2的单元测试环境搭建涉及的技术包括mocha、chai、sinon等。本文将详细讲述Vue2单元测试环境搭建的步骤和示例。 步骤 安装依赖 首先需要安装mocha、chai、sinon和vue-test-utils等依赖。 npm install –save-dev mocha cha…

    Vue 2023年5月28日
    00

  • vue 组件使用中的一些细节点

    下面我来详细讲解一下vue组件使用中的一些细节点。 组件标签名的命名 在Vue中使用组件需要先在Vue实例中注册该组件，命名时需要注意以下几点： 组件标签名建议使用连字符形式如 <my-component></my-component>，而不是驼峰式形式如 <MyComponent></MyComponent>…

    Vue 2023年5月27日
    00

  • 手把手带你搭建一个node cli的方法示例

    下面是手把手带你搭建一个node cli的方法示例的完整攻略： 前置知识 在开始搭建之前，我们需要掌握一些基础知识： Node.js的基本使用 npm包管理器的使用 shell命令行的基本使用 如果你还不会这些基础知识，建议先学习一下。 步骤 1. 初始化项目 首先，我们需要创建一个新的目录，进入目录后使用以下命令进行项目初始化： npm init -y 这…

    Vue 2023年5月29日
    00

  • vue引入静态js文件的方法

    当我们使用 Vue 构建应用时，有时需要引入一些静态的 JavaScript 文件。在 Vue 中，我们可以使用以下步骤引入静态的 JS 文件： 使用 script 标签引入静态 JS 文件 最简单的方式就是使用 HTML 中的 script 标签引入静态 JS 文件。这种方式的缺点是无法做到模块化。 例如，我们在 index.html 文件中引入一个位于 …

    Vue 2023年5月28日
    00

  • vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

    针对“vue实现动态给id赋值,点击事件获取当前点击的元素的id操作”的问题，我将详细讲解完整攻略，具体过程如下： 给元素动态赋值id 在Vue中，我们可以使用数据绑定语法来将id值动态赋值给元素。这可以通过v-bind指令和一个计算属性来实现。给定以下HTML内容： <div v-for="item in items" v-bin…

    Vue 2023年5月28日
    00

  • Vue表单快速上手

    Vue 表单快速上手 Vue 是一个流行的前端框架，提供了许多组件和工具来简化表单的创建和管理。在这个教程中，我们将介绍如何使用 Vue 来快速创建表单，并管理用户输入。 什么是 Vue 表单？ Vue 表单是一种用于收集用户输入数据的 Web 表单，通常与 Vue.js 和其它依赖关系管理器（例如 Vuex）一起使用。Vue 表单不仅提供了一个易于使用的用…

    Vue 2023年5月27日
    00

  • 关于vue-i18n在单文件js中的使用

    下面是关于vue-i18n在单文件js中的使用的完整攻略： 1. 安装vue-i18n 首先，我们需要安装vue-i18n，可以使用npm或yarn来安装，以下是命令： # 使用npm安装 npm install vue-i18n –save # 使用yarn安装 yarn add vue-i18n 2. 配置vue-i18n 在Vue项目中，我们可以通过…

    Vue 2023年5月28日
    00

  • vue3-HTTP请求方式

    下面是关于Vue3中HTTP请求方式的详细讲解： 1. 介绍 在Vue3中，可以使用多种方式来进行HTTP请求。其中，Vue3推荐使用axios库来进行HTTP请求。 2. 安装axios 在使用axios之前，需要先安装axios库。可以使用以下命令进行安装： npm install axios 3. 发送HTTP请求 3.1 GET请求 在Vue3中，可…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部