Maison > interface Web > js tutoriel > json-server implémente la simulation de données back-end

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

php中世界最好的语言
Libérer: 2018-04-28 13:33:36
original
1290 Les gens l'ont consulté

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
Copier après la connexion

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
Copier après la connexion

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
  }
 ]
}
Copier après la connexion

Ajoutez une ligne de commandes aux scripts du package. json

  "json": "json-server db.json --port 3003"
Copier après la connexion

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
Copier après la connexion

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,后端没有接口')
   })
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal