フロントエンドとバックエンドの間でデータAPIをシームレスに接続する方法

序文：フロントエンドとバックエンドがバックエンドとやり取りしているときに、バックエンドデータが取得されていない場合、データを独自にシミュレートしてページに表示する必要があるため、開発効率が向上します。最終データはインターフェースを変更するだけで十分です。現時点では、強力なデータを使用して
モックデータをシミュレートします。

1.モックデータ：シミュレーションデータ

mockjs公式サイト：http : //mockjs.com/

mockjsの公式ドキュメント：https : //github.com/nuysoft/Mock/wiki/Getting-Started

特定の使用方法

最初のステップは、mockjsをインストールすることです

npmインストールmockjs

2番目のステップは、モックデータを生成するためのモックディレクトリを作成することです

例如：course.js
import Mock from "mockjs";

//mock课程数据
var result=Mock.mock({
    
    
  code: 200,
  msg: "操作成功",
  data: {
    
    
    current_page: 1,
    last_page: 18,
    total: 178,
    "list|10": [
      {
    
    
        id: "@id",  //模拟id
        "price|100-200.1-2": 100, //模拟小数，在计算机中也称浮点数
        "has_buy|1": [0, 1], //模拟状态值,0,1,2,
        title: "@ctitle",  //模拟中文标题
        address: "@county(true)",  //模拟省市县
        "teachers_list|1": [
          {
    
    
            course_basis_id: "@id",
            id: "@id",
            teacher_avatar: "@image('150x120', '#ff0000', '1909A')",  //模拟图片
            teacher_name: "@cname"  //模拟中文姓名
          }
        ]
      }
    ]
  }
});


export default result;

//创建mock的入口文件，并配置请求的接口地址，提交方式，返回的假数据
import Mock from 'mockjs'
//导入的模拟数据
import courseData from "./course";

/**
 * Mock.mock( rurl, rtype, template )
 * rurl:请求的接口地址
 * rtype:提交方式
 * template:返回数据
 */

Mock.mock("http://www.1909A.com/coureslist", "get", courseData);

ステップ3：シミュレーションデータをmain.jsに挿入する

//注入mock
import './mock'

手順4：要求するコンポーネントのデータを要求する

 axios.get('http://www.1909A.com/coureslist').then(res=>{
    
    
        console.log(res)
 })

二、やさしいモック

easy-mock：mockjsに基づいてオンラインの偽データを生成します。これはオンラインでデータを編集できるツールですが
、リクエストの理由は不安定なアクセスであるため、使用は推奨されません。