vue.js使用express模拟接口数据

最新推荐文章于 2024-07-30 12:11:30 发布

Dean-ok

最新推荐文章于 2024-07-30 12:11:30 发布

阅读量411

点赞数

文章标签： express 模拟接口数据

本文链接：https://blog.youkuaiyun.com/weixin_45455582/article/details/100548782

版权

本文详细介绍如何在Webpack开发环境中，利用express框架搭建本地API服务器，实现前后端分离项目的快速开发与测试。通过修改build-webpack.dev.conf.js文件，加入express路由配置，可以轻松模拟后端接口，提供seller、goods和ratings等数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：找到 build - webpack.dev.conf.js
在const PORT = process.env.PORT && Number(process.env.PORT)后面加入以下配置：

/**
 * 使用express框架启动一个服务器
 */
const express = require('express')
const app = express() 					// 请求server
//1.读取数据
var appData = require('../data.json');  //加载本地数据
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
var apiRoutes = express.Router();		//定义一个路由
app.use('/api', apiRoutes);			    //通过路由请求数据

第二步：在devServer: { //中加入以下配置： }

	before(apiRoutes) {	//配置请求路由和响应
			apiRoutes.get('/api/seller', (req, res) => {
					res.json({
						errno: 0,		//错误码
						data: seller 	// 接口返回json数据
					});
				});
				apiRoutes.get('/api/goods', (req, res) => {
					res.json({
						errno: 0,
						data: goods 	// 接口返回json数据
					});
				});
				apiRoutes.get('/api/ratings', (req, res) => {
					res.json({
						errno: 0,
						data: ratings	 // 接口返回json数据
					});
				});
		}

配置完成后重新：npm run dev