Comment connecter de manière transparente l'API de données entre les extrémités avant et arrière

Préface : Lorsque le front-end et le back-end interagissent avec le back-end, lorsque les données du back-end ne sont pas obtenues, les données doivent être simulées par elles-mêmes pour les afficher sur la page, ce qui améliore notre efficacité de développement. En même temps, il demande également le format de données que nous voulons du back-end, et obtient enfin le back-end Les données de fin ne doivent changer que l'interface. Pour le moment, nous utilisons nos puissantes données pour simuler des
données simulées: données simulées

1. Données factices: données simulées

site officiel de mockjs : http://mockjs.com/

Documentation officielle de mockjs : https://github.com/nuysoft/Mock/wiki/Getting-Started

Méthode d'utilisation spécifique

La première étape consiste à installer mockjs

npm installer mockjs

La deuxième étape consiste à créer un répertoire fictif pour générer des données fictives

例如: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);

Étape 3: Injectez les données simulées dans main.js

//注入mock
import './mock'

Étape 4: Demander des données dans le composant à demander

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

二 、 facile à simuler

easy-mock: générez de fausses données en ligne à partir de mockjs. C'est un outil qui peut modifier des données en ligne.
Cependant, la raison de la demande est un accès instable. Il n'est pas recommandé de l'utiliser.

Je suppose que tu aimes

Origine blog.csdn.net/weixin_48193717/article/details/108456969
conseillé
Classement