vue前后端分离项目模拟后台接口数据

于 2024-07-30 12:11:30 发布
阅读量816 收藏 14
点赞数 13
分类专栏： 编程 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/svygh123/article/details/140793426
版权

在 Vue.js 前后端分离的项目中模拟后台接口数据通常有两种主要方法：使用前端模拟数据和设置一个简单的后端服务来模拟数据。下面详细介绍这两种方法。

1. 使用前端模拟数据

这种方法适用于开发阶段，可以快速地实现前端与后端接口的交互模拟。你可以使用一些工具如 axios-mock-adapter 或者 fetch-mock 来模拟 HTTP 请求。

示例代码（使用 axios 和 axios-mock-adapter）:

首先安装所需的依赖包:

npm install axios axios-mock-adapter --save

然后在你的项目中创建一个 mock 文件来定义模拟的数据:

// src/mock/index.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios);

mock.onGet('/api/users').reply(200, {
  users: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
});

export default axios;

在你的 Vue 组件中使用模拟的 API:

// src/components/UserList.vue
import axios from '../mock/index.js';

export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    const response = await axios.get('/api/users');
    this.users = response.data.users;
  }
};

2. 设置一个简单的后端服务来模拟数据

这种方式更加接近真实环境，并且可以让你更好地控制数据和状态。可以使用 Node.js 的 Express 框架来快速搭建一个后端服务器。

示例代码（使用 Express 和 json-server）:

首先安装所需的依赖包:

npm install express body-parser cors --save

创建一个简单的后端服务:

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

app.use(bodyParser.json());
app.use(cors());

app.get('/api/users', (req, res) => {
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ];
  res.json(users);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

运行后端服务:

node server.js

在前端 Vue 应用中调用这个 API:

// src/components/UserList.vue
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    const response = await axios.get('http://localhost:3000/api/users');
    this.users = response.data;
  }
};

以上就是两种常用的方法来模拟后台接口数据。你可以根据项目的实际需求选择适合的方法。

在实际项目中，登录验证是必不可少的。为了模拟带有登录验证标识的接口，我们可以使用前端模拟数据或后端服务的方式来实现。下面分别来介绍使用前端模拟数据的例子和后台服务器模拟，并且会包含登录验证逻辑。

3. 前端模拟数据 + 登录验证

我们将使用 axios 和 axios-mock-adapter 来模拟接口请求，并在前端添加一个简单的登录验证功能。

安装依赖
npm install axios axios-mock-adapter --save
创建模拟数据文件

创建一个文件 src/mock/index.js，用来定义模拟的数据和接口：

// src/mock/index.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios);

// 模拟登录接口
mock.onPost('/api/login').reply(config => {
  const { username, password } = config.data;
  if (username === 'admin' && password === 'password') {
    // 返回一个 token
    return [200, { token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' }];
  } else {
    return [401, { message: 'Invalid credentials' }];
  }
});

// 模拟获取用户列表的接口
mock.onGet('/api/users').reply(config => {
  const authHeader = config.headers.Authorization;
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return [401, { message: 'Unauthorized' }];
  }

  // 模拟用户数据
  return [200, {
    users: [
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Doe' }
    ]
  }];
});

export default axios;
创建登录组件

创建一个登录组件 src/components/Login.vue：

<template>
  <div>
    <form @submit.prevent="login">
      <input type="text" v-model="username" placeholder="Username" required />
      <input type="password" v-model="password" placeholder="Password" required />
      <button type="submit">Login</button>
    </form>
    <p>{{ errorMessage }}</p>
  </div>
</template>

<script>
import axios from '../mock/index.js';

export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/api/login', { username: this.username, password: this.password });
        localStorage.setItem('token', response.data.token);
        this.$router.push('/users'); // 登录成功后跳转到用户列表页面
      } catch (error) {
        this.errorMessage = error.response.data.message;
      }
    }
  }
};
</script>
创建用户列表组件

创建一个用户列表组件 src/components/UserList.vue：

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <p v-if="errorMessage">{{ errorMessage }}</p>
  </div>
</template>

<script>
import axios from '../mock/index.js';

export default {
  data() {
    return {
      users: [],
      errorMessage: ''
    };
  },
  async created() {
    try {
      const token = localStorage.getItem('token');
      if (token) {
        axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
        const response = await axios.get('/api/users');
        this.users = response.data.users;
      } else {
        this.$router.push('/login');
      }
    } catch (error) {
      this.errorMessage = error.response.data.message;
    }
  }
};
</script>
配置路由

在 src/router/index.js 中配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login';
import UserList from '@/components/UserList';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/users', component: UserList }
  ]
});

这样我们就完成了一个简单的前端模拟带有登录验证的接口示例。当用户登录成功后，他们会被重定向到用户列表页面，并且只有通过验证的请求才能获取到用户列表数据。如果尝试未登录访问用户列表页面，用户将被重定向到登录页面。

4. 后端服务器模拟

我们先从后端开始。后端将包括两个主要的 API 路由：

  1. /api/login - 用户登录接口。
  2. /api/protected - 受保护的资源接口，需要有效的登录令牌才能访问。
步骤 1: 创建后端服务器

安装依赖

确保你已经安装了 Node.js 和 npm。然后运行以下命令来安装所需的包：

npm init -y
npm install express body-parser cors

server.js

这是我们的后端服务器代码：

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

const app = express();

// 使用中间件
app.use(bodyParser.json());
app.use(cors());

// 模拟用户数据
const users = [
  { username: 'admin', password: 'password' }
];

// 模拟登录
app.post('/api/login', (req, res) => {
  const { username, password } = req.body;

  const user = users.find(u => u.username === username && u.password === password);
  if (user) {
    // 发送模拟的 token
    res.json({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
});

// 受保护的资源
app.get('/api/protected', (req, res) => {
  const token = req.headers['authorization'];
  if (token === 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...') {
    res.json({ message: 'Welcome to the protected resource!' });
  } else {
    res.status(401).json({ message: 'Unauthorized' });
  }
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});
步骤 2: 创建前端 Vue.js 应用

安装 Vue CLI

如果还没有安装 Vue CLI，请运行以下命令：

npm install -g @vue/cli

创建 Vue 项目

vue create my-app
cd my-app

安装 Axios

npm install axios

src/App.vue

这是一个简单的 Vue 组件，用于展示登录表单和受保护资源的内容：

<template>
  <div id="app">
    <h1>Login Example</h1>
    <form @submit.prevent="login">
      <label>Username:
        <input type="text" v-model="username" required>
      </label>
      <label>Password:
        <input type="password" v-model="password" required>
      </label>
      <button type="submit">Login</button>
    </form>
    <div v-if="message">{{ message }}</div>
    <div v-if="token">
      <button @click="getProtectedResource">Get Protected Resource</button>
      <div v-if="protectedMessage">{{ protectedMessage }}</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      token: null,
      message: '',
      protectedMessage: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('http://localhost:3000/api/login', { username: this.username, password: this.password });
        this.token = response.data.token;
        this.message = 'Logged in successfully!';
      } catch (error) {
        this.message = error.response.data.message;
      }
    },
    async getProtectedResource() {
      try {
        const response = await axios.get('http://localhost:3000/api/protected', {
          headers: { Authorization: `Bearer ${this.token}` }
        });
        this.protectedMessage = response.data.message;
      } catch (error) {
        this.protectedMessage = error.response.data.message;
      }
    }
  }
};
</script>

运行示例

  1. 启动后端服务器:

    node server.js

  2. 启动 Vue.js 应用:

    npm run serve

现在你应该可以在浏览器中看到你的 Vue.js 应用，尝试登录并获取受保护资源。

实际项目中还需要考虑安全性、错误处理以及其他一些细节，请根据实际项目需要进行补充完善！

svygh123
关注
  • 13
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue 项目 前端 模拟后端接口数据（vue2,vue3）
YYniannian的博客
07-11 1867
项目中或者平常自己创建demo的过程中，往往需要后端配合，但是有时候没有后端，又需要数据，此时就展示了我们前端的强大之处，自己模拟后端接口数据。
vue前后端分离后台管理系统（权限管理，登录），前端脚手架。对接后端基于SpringSecurity提供的后台接口
web15085599741的博客
03-09 706
文章目录 前言(很重要哦) 一、概念和技术总结(重点，一定要搞懂) 1. vue 2. vue-admin-template模板文件解析 3. 异步相关，前后端交互 4. 导航守卫 5. 路由解析 二、单点登录实现 1. 后端接口和响应结果分析 2. 解决跨域，以及请求头.几乎所有项目都需要的配置，背下来吧。 3. 验证码展示 4. 单点登录，退出登录，根据后端API实现 1. api接口 2. 路由组件编写登录函数逻辑 3. 修改store（vuex）异步逻辑 5. 流程总结 三
Apifox使用-前端接口模拟
打工人
06-28 6001
Apifox使用-前端接口模拟
【工程化】前端开发阶段没有接口，如何模拟后端接口请求
庞囧的博客
03-15 4516
在开发的过程中，会遇到后端文档出来了但接口没出来，或者是联调的时候接口有问题等待修复的时间比较久，那么前端的调试就有困难了。自己还是新手的时候遇到这些情况的应对措施是前端写死假数据，感觉有点傻哈哈，不灵活还有一定的风险。这里举例个人积累过的方案，希望能帮助到大家。
前端-模拟接口数据
weixin_42508745的博客
11-16 420
前端-模拟接口
vue mock数据，模拟后台接口
热门推荐
不求甚解的博客
08-15 3万+
在前端开发过程中，有后台配合是很必要的。但是如果自己测试开发，或者后台很忙，没时间，那么我们需要自己提供或修改接口。下面提供两种方式，第二种更简单，个人推荐第二种。 一、mock文件 1、安装，开发环境 npm i mockjs -D 2、在src目录下新建mock目录，结构如下： 3、index.js内容如下： const Mock = require('mockjs'); ...
json-server----模拟后端接口
weixin_34174132的博客
02-27 187
1.全局安装 cnpm install json-server -g 2.建立一个文件夹dataserver,建立文件data.json----------文件夹和文件都是自己定义的 在文件夹中打开终端， json-server data.json 运行，生成接口 json-server实现数据的增删改查 增 /...
vue+mockjs模拟数据实现前后端分离开发的实例代码
01-21
本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码，分享给大家，也给自己留个笔记。 在项目中尝试了mockjs，mock数据，实现前后端分离开发。 关于mockjs，官网描述的是 1.前后端分离 2.不需要修改既有...
Python优秀项目 基于Flask+MySQL+Vue前后端分离的疫情传播模拟系统源码+部署文档+全部资料齐全.zip
最新发布
05-25
Python优秀项目 基于Flask+MySQL+Vue前后端分离的疫情传播模拟系统源码+部署文档+全部资料齐全.zip 1、代码压缩包内容 代码的项目文件 部署文档文件 2、代码运行版本 python3.7或者3.7以上的版本；若运行有误，根据...
vue 模拟a访问_vue之如何模拟后端接口
weixin_29830257的博客
12-23 136
步骤如下：1.首先你的项目必须配置了vue-resource,配置成功后我们需要下载json-servercnpm install json-server --save-dev2.在build------>webpack.dev.conf.js的任意位置去配置如下代码(代码是参考gitHub里面的json-server编写的，变量名为了避免重复，做过更改)：const jsonServer ...
前端-Rap模拟数据接口
12-14
一份关于前端-Rap模拟数据接口的开发文档。有需要的可以下载看看。
Vue中前端模拟后端接口数据
2301_77168019的博客
07-31 208
正常调用axios.get(地址).then（res=>{在编辑工具中data下新建一个data.json文件。在这个data.json中右键打开命令行工具执行。成功会显示一个地址里面就是json存的数据。在当前项目下新建一个data项目包。创建vue 的项目在项目内执行。打印res就可以看到这个数据了。前提首先要安装node.js。然后要用命令行工具执行。
在vue中如何模拟接口
qq_46030141的博客
07-11 465
后面就可以直接调接口使用了。
前端先行模拟接口（mock+express+json）
luemeon的博客
08-09 3335
适用于前端先行，api中有设置mock。
前端模拟接口（快速开发）
weixin_44289968的博客
07-07 1296
** 前端模拟接口（快速开发） ** Mocky 地址：https://designer.mocky.io/ 1、 2、 3、 到这里就完成模拟接口创建了，可以进行快速开发。 最近项目不是很多，可以经常发文章给大家分享一些前端技术，大姐可以关注我 ...
【vue】生成接口模拟数据
jggnice的博客
05-14 757
目录 方案一：自定义模拟数据 Step1 创建json文件 Step2 在 vue.config.js 中配置 Step3 在组件中使用 (方式一) Step3 封装api (方式二) Step4 在组件中使用 (方式二) 方案二：自动生成模拟数据 Step1 引入mock.js Step2 编写模拟数据 Step3 在组件中使用 在前端vue中使用虚拟数据模拟后端接口返回的数 据，从而使得前端开发独立化。这里使用了两种方案模拟接口返回的数据。 ...
Vue中使用mock模拟后端数据
2301_76662406的博客
05-05 1632
在开发的时候，由于页面中的数据来自后端，后端接口又处于开发中，阻碍了前端开发，为了解决这个问题，需求下来后，前后端先约定好数据结构后，在按照约定好的数据结构进行开发，这样前端只需一个本地服务，模拟返回约定好的数据结构。这个数据模板语法的含义是：以初始值 10 作为基准，在每次被调用时递增 15。换句话说，每次调用该模板语法生成的数据，sellingPrice 属性的值会比上一次增加 15。
vue路由传参+案例（使用mock模拟后端数据）
ioncannontic的博客
06-28 940
vue路由传参+mock模拟数据
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

svygh123

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值