json-server implémente la simulation de données back-end

Cette fois, je vais vous présenter json-server pour implémenter la simulation de données back-end. Quelles sont les précautions pour que json-server implémente la simulation de données back-end. Voici un cas pratique, prenons. un regard.

Pendant le processus de développement, le front-end et le back-end sont séparés ou non. L'interface est principalement développée avec la page plus tard, il est donc très nécessaire d'établir une interface APL de repos pour fournir des données virtuelles. le front-end, donc ici j'utilise json- En tant qu'outil, le serveur prend en charge les requêtes inter-domaines CORS et JSONP, prend en charge les méthodes GET, POST, PUT, PATCH et DELETE, et fournit également une série de requête méthodes, telles que limite, ordre, etc., puis j'ai écrit mes propres détails d'utilisation dans un document

Installation

Tout d'abord, il doit y avoir un environnement de nœud (json-server est utilisé. Il doit y avoir un environnement de nœud), puis installez json-server globalement

npm install json-server -g

Une fois l'installation terminée, vérifiez si le l'installation globale est réussie

G:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project>json-server -h
index.js [options] <source>
Options:
 --config, -c        Path to config file  [default: "json-server.json"]
 --port, -p         Set port              [default: 3000]
 --host, -H         Set host            [default: "0.0.0.0"]
 --watch, -w        Watch file(s)               [boolean]
 --routes, -r        Path to routes file
 --middlewares, -m     Paths to middleware files          [array]
 --static, -s        Set static files directory
 --read-only, --ro     Allow only GET requests          [boolean]
 --no-cors, --nc      Disable Cross-Origin Resource Sharing   [boolean]
 --no-gzip, --ng      Disable GZIP Content-Encoding       [boolean]
 --snapshots, -S      Set snapshots directory       [default: "."]
 --delay, -d        Add delay to responses (ms)
 --id, -i          Set database id property (e.g. _id) [default: "id"]
 --foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
                                 [default: "Id"]
 --quiet, -q        Suppress log messages from output     [boolean]
 --help, -h         Show help                 [boolean]
 --version, -v       Show version number            [boolean]
Examples:
 index.js db.json
 index.js file.js
 index.js http://example.com/db.json
https://github.com/typicode/json-server

Créez un répertoire db.json dans le répertoire racine du projet, puis écrivez les informations

{
 "api": [
  {
   "text": "数据统计",
   "link": "#",
   "hot": true
  },
  {
   "text": "数据检测",
   "link": "#",
   "hot": true
  },
  {
   "text": "流量分析",
   "link": "#",
   "hot": true
  },
  {
   "text": "广告发布",
   "link": "#",
   "hot": false
  }
 ]
}

Ajoutez une ligne de commandes aux scripts du package. json

  "json": "json-server db.json --port 3003"

Exécutez la commande dans le répertoire du projet

npm run json

Vous verrez une telle interface dans bash

> vue@1.0.0 json g:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project
> json-server db.json --port 3003
 \{^_^}/ hi!
 Loading db.json
 Done
 Resources
 http://localhost:3003/api
 Home
 http://localhost:3003
 Type s + enter at any time to create a snapshot of the database

Félicitations sur le démarrage réussi !

Entrez dans la page Web pour y accéder à ce moment

Vous pouvez y accéder à ce moment

http://localhost:3003/api

Vous pouvez voir la chaîne json écrite auparavant

Le serveur json est maintenant démarré

Appeler Le code est comme ceci

this.$http.get('http://localhost:3003/api')
   .then((data) => {
    console.log(data.body)
   }, () => {
    console.log('这里是用了vue-source,后端没有接口')
   })

Vous pouvez voir le les données sont complétées après l'initialisation de la page

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée des étapes de recadrage des images avec Vue-cropper

Explication détaillée des étapes pour utiliser la fonction Vue Mixin

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!