Comment créer des données back-end avec json-server

Cette fois, je vais vous montrer comment json-server génère des données back-end et quelles sont les précautions à prendre pour comment json-server génère des données back-end. Ce qui suit est un cas pratique, jetons un coup d'œil.

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 méthodes de requête, telles que la limite, commande, etc. Ensuite, j'ai écrit ma propre utilisation comme Documentation

Installation

Vous devez d'abord avoir un environnement de nœud (vous devez avoir un environnement de nœud si vous utilisez json-server), puis installez json-global server

npm install json-server -g

Une fois l'installation terminée, vérifiez si l'installation globale a réussi

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 une base de données .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 dans package.json

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

Exécutez la commande dans le projet répertoire

npm run json

Vous verrez quelque chose comme ceci dans l'interface 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 pour le lancement 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 avant

Le serveur json est maintenant démarré

Le code d'appel est comme ceci

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

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 faire attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Comment utiliser le mécanisme de liaison de données angulaire

Comment utiliser le plug-in de sélection de plage de calendrier

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!