mock express 的使用方法

最新推荐文章于 2023-08-09 14:27:46 发布

Dev _

最新推荐文章于 2023-08-09 14:27:46 发布

阅读量303

点赞数

分类专栏： Axios 文章标签： javascript node.js vue.js webpack axios

wushen

本文链接：https://blog.csdn.net/qq_44317018/article/details/119966531

版权

本文介绍了如何使用Express创建Mock接口。在项目中新建mock目录，存放所有模拟接口的文件。在mock.js中设置统一出口，导入并暴露mock数据。通过安装和配置，使项目能够解析和使用这些Mock接口。

摘要由CSDN通过智能技术生成

mock模拟接口，使用默认的devserve 完成，考虑到这边有后台提供的模拟数据，随不需要自己随机生成数据，如果说有需要自己随机生成数据，可以使用[mockjs](Mock.js (mockjs.com))

写mock接口

在src/目录下新建mock目录，存放所有的mock文件
在src/mock/目录下新建home.js

home.js mock 文件内容

/**
 * @desc 处理返回banner 数据
 * @param { object } request express 请求对象
 * @param { object } response express 响应对象
 * @returns { object } json 对象
 */
const getAdverising = (request, response) => {
     
  const result = {
     
    "errorCode": 0,
    "errorMessage": "success",
    "data": {
     
      "advertising_list": [{
     
        "id": "27",
        "title": "特供",
        "link": "\/pages\/productDetail\/index?id=295",
        "image": "http:\/\/saidad.oss-cn-guangzhou.aliyuncs.com\/image\/0b9709b4490830a47ad5b370b6a696ca.jpeg",
        "type": "image"
      }]
    },
    "success": true
  }

  response.json(result)
}


/**
 * @desc 处理获取 数据
 * @param { object } request express 请求对象
 * @param { object } response express 响应对象
 * @returns { object } json 对象
 */
 const getProductList = (request, response) => {
     
   console.log('request', request)
  let list = [
    {
     
      "base_info": {
     
        "product_name": "进口花伴手礼小花束",
        "publish_status": "1",
        "summary": "进口花伴手礼小花束",
        "product_type": 2,
        "stock": 99996,
        "sale": 7,
        "sale_price": 25800,
        "format_sale_price": "258.00",
        "original_price": 29800,
        "format_original_price": "298.00",
        "shipping_price": 0,
        "format_shipping_price": "0.00",
        "updated_timestamp": null,
        "created_timestamp": 1610858927,
        "item_id": 378,
        "sku_id": 0,
        "sort": 37,
        "main_image": "http:\/\/saidad.oss-cn-guangzhou.aliyuncs.com\/image\/eb209ef395fe09dc0db6a36ba2c2a5ca.jpeg"
      },
      "specifications": null,
      "galley_image_list": null,
      "brand_story": null,
      "care_instructions": null,
      "special_note": null</