Comment créer un environnement de développement en utilisant vue+vuex+koa2

Cet article présente principalement l'explication détaillée de la construction de l'environnement de développement vue + vuex + koa2 et du développement d'exemples. Je vais maintenant le partager avec vous et vous donner une référence.

Écrit avant

L'objectif principal de cet article est d'apprendre à utiliser le framework koa pour créer des services Web, fournissant ainsi des interfaces back-end pour le front-end appels.

Le but de la construction de cet environnement est le suivant : avant que l'ingénieur front-end ne se mette d'accord sur l'interface avec l'ingénieur back-end mais avant le débogage conjoint, la fonction impliquant la demande de données depuis le back-end peut utiliser le chemin http construit par l'ingénieur front-end lui-même, au lieu d'écrire des données mortes directement sur le front-end. Autrement dit, simulez l’interface backend.

Bien sûr, dans tout ce processus (environnement de construction + développement d'un exemple de démo), les points de connaissances suivants sont impliqués.

Comprend :

1. points de connaissance koa2

2. points de connaissance du nœud

3. Problèmes inter-domaines

4. Utilisation de fetch

5. Utilisation d'axios

6. Implication de promise

7. vuex -> Utilisation de l'état, des mutations, des actions

Partie 1 : Configuration de l'environnement

Environnement vue + vuex

Le premier est l'environnement de vue + vue-router + vuex. Nous utilisons l'échafaudage vue-cli pour générer le projet. Les étudiants qui peuvent utiliser vue doivent le connaître.

// 全局安装脚手架工具
npm i vue-vli -g
// 验证脚手架工具安装成功与否
vue --version
// 构建项目
vue init webpack 项目名
// 测试vue项目是否运行成功
npm run dev

Étant donné que le projet vue généré par l'échafaudage ne contient pas vuex, réinstallez vuex.

// 安装vuex
npm i vuex --save

Environnement koa2

Une fois le projet front-end construit, commençons à créer notre service back-end.

Tout d'abord, créez un nouveau répertoire dans votre outil de développement (qu'il soit webstorm ou sublime) pour construire un service web basé sur koa.

Ici, autant nommer ce répertoire koa-demo.

Puis exécutez :

// 进入目录
cd koa-demo
// 生成package.json
npm init -y
// 安装以下依赖项
npm i koa
npm i koa-router
npm i koa-cors

Après avoir installé koa et les deux middlewares, l'environnement est terminé.

Partie 2 : Développement d'échantillons

L'environnement est conçu pour être utilisé, nous allons donc écrire une démo immédiatement.

Le développement de démonstration n'est pas seulement un processus de pratique de l'écriture de code dans un environnement de développement, mais également un processus de vérification si l'environnement est correctement configuré et s'il est utilisable.

Développement d'interface back-end

Dans cet exemple, nous ne fournissons qu'un seul service sur le back-end, qui consiste à fournir une interface pour renvoyer les données json au l'extrémité avant. Le code contient des commentaires, allez donc directement au code.

fichier server.js

// server.js文件

let Koa = require('koa');
let Router = require('koa-router');

let cors = require('koa-cors');
// 引入modejs的文件系统API
let fs = require('fs');

const app = new Koa();
const router = new Router();

// 提供一个/getJson接口
router
  .get('/getJson', async ctx => {
    // 后端允许cors跨域请求
    await cors();
    // 返回给前端的数据
    ctx.body = JSON.parse(fs.readFileSync( './static/material.json'));
  
  });

// 将koa和两个中间件连起来
app.use(router.routes()).use(router.allowedMethods());

// 监听3000端口
app.listen(3000);

Un fichier json est utilisé ici. Dans le chemin './static/material.json', le code du fichier json est :

// material.json文件

[{
  "id": 1,
  "date": "2016-05-02",
  "name": "张三",
  "address": "北京 清华大学",
}, {
  "id": 2,
  "date": "2016-05-04",
  "name": "李四",
  "address": "上海 复旦大学",
}, {
  "id": 3,
  "date": "2016-05-01",
  "name": "王五",
  "address": "广东 中山大学",
}, {
  "id": 4,
  "date": "2016-05-03",
  "name": "赵六",
  "address": "广东 深圳大学",
}, {
  "id": 5,
  "date": "2016-05-05",
  "name": "韩梅梅",
  "address": "四川 四川大学",
}, {
  "id": 6,
  "date": "2016-05-11",
  "name": "刘小律",
  "address": "湖南 中南大学",
}, {
  "id": 7,
  "date": "2016-04-13",
  "name": "曾坦",
  "address": "江苏 南京大学",
}]

Ensuite, nous utilisons la commande suivante pour démarrer le service

node server.js

Testez si l'interface est bonne

Ouvrez le navigateur et entrez http : //127.0.0.1:3000/getJson. Vérifiez si les données json dans le fichier json sont affichées sur la page. Si elles peuvent être affichées, cela signifie que nous avons configuré le service qui fournit les données json.

Exemple d'interface back-end d'appel front-end

Pour mettre en évidence les points clés, éliminer les interférences et faciliter la compréhension. Notre front-end écrit un composant. Le composant comporte deux parties : d'abord, un bouton pour appeler l'interface getJson du service web ; puis, une zone d'affichage du contenu. Après avoir récupéré les données renvoyées par le back-end, il est placé dans. cette partie de la zone du composant est affichée.

Regardons d'abord le fichier du composant

<template>
  <p class="test">
    <button type="button" @click="getJson">从后端取json</button>
    <p class="showJson">{{json}}</p>
  </p>
</template>

<script>
  import {store} from &#39;../vuex&#39;
  export default {
    computed: {
     json(){
       return store.state.json;
     }
    },
    methods: {
     getJson(){
       store.dispatch("getJson");
     }
    }
  }
</script>

<style scoped>
 .showJson{
  width:500px;
  margin:10px auto;
  min-height:500px;
  background-color: palegreen;
 }
</style>

C'est très simple, donc il n'y aura pas beaucoup d'explications.

Alors regardez notre fichier vuex.

import Vue from 'vue'
import Vuex from 'vuex';

Vue.use(Vuex)
const state = {
  json: [],
};

const mutations = {
 setJson(state, db){
  state.json = db;
 }
}

const actions = {
 getJson(context){
  // 调用我们的后端getJson接口
  fetch('http://127.0.0.1:3000/json', {
   method: 'GET',
   // mode:'cors',
   headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
   },
  }).then(function (res) {
   if(res.status === 200){
    return res.json()
   }
  }).then(function (json) {

   //console.log(typeof Array.from(json), Array.from(json));
   context.commit('setJson', Array.from(json));
  })
 }
};

export const store = new Vuex.Store({
 state: state,
 mutations: mutations,
 actions: actions,
})

ok, le code est terminé.

Parlez d'axios

Si vous souhaitez modifier la récupération de cette démo en mode axios, vous devez procéder comme suit :

1. Installez axios, référencez axios dans le fichier vuex

npm i axios
import axios from 'axios'

2. Remplacez la partie fetch du code par :

const actions = {
 getJson(context){
  axios.get('/json', {
   method: 'GET',
   // mode:'cors',
   headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
   },
  }).then(function (res) {
   if(res.status === 200){
    return res.data
   }
  }).then(function (json) {

   //console.log(typeof Array.from(json), Array.from(json));
   context.commit('setJson', Array.from(json));
  })
 }
};

3. Vous rencontrerez du cross-domain, modifiez le chemin dans webpack Ajoutez la configuration de l'élément proxyTable dans le fichier config/index.js :

proxyTable: {
   '/json': {
    target: 'http://127.0.0.1:3000',
    changeOrigin: true,
    pathRewrite: {
     '^/json': '/json'
    }
   }
  },

Postscript

Un projet construit sur la base d'un échafaudage vue pour simuler un travail asynchrone récupération de données, ou placez directement les données dans le dossier statique généré par l'échafaudage, en faisant semblant d'être les données extraites de l'arrière-plan.

Mais construire un service web basé sur express ou koa est en effet quelque chose qu'un ingénieur front-end doit maîtriser.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment obtenir un effet d'actualisation avant et arrière sans actualisation dans vue

Expliquez en détail les problèmes liés à implémentation du rendu du serveur React

Comment utiliser jquery pour écrire un carrousel côté PC (tutoriel détaillé)

Expliquez l'objet Object dans JS dans détail

Comment implémenter plusieurs téléchargements de fichiers dans le mini programme WeChat

Comment utiliser vue.js pour réaliser que la boîte contextuelle uniquement apparaît une fois

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!