So erstellen Sie eine Entwicklungsumgebung mit vue+vuex+koa2

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Aufbaus der Vue + Vuex + Koa2-Entwicklungsumgebung und der Beispielentwicklung vor. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben.

Vorher geschrieben

Der Hauptzweck dieses Artikels besteht darin, zu lernen, wie man das Koa-Framework zum Erstellen von Webdiensten verwendet und dadurch einige Back-End-Schnittstellen für das Front-End bereitstellt Anrufe.

Der Zweck des Aufbaus dieser Umgebung ist: Bevor sich der Front-End-Ingenieur mit dem Back-End-Ingenieur auf die Schnittstelle einigt, aber vor dem gemeinsamen Debuggen, kann die Funktion zum Anfordern von Daten vom Back-End über http erfolgen Pfad, der vom Front-End-Ingenieur selbst erstellt wurde, anstatt einige tote Daten direkt auf das Front-End zu schreiben. Das heißt, simulieren Sie die Backend-Schnittstelle.

Natürlich sind in diesem gesamten Prozess (Erstellung einer Umgebung + Entwicklung einer Beispieldemo) die folgenden Wissenspunkte beteiligt.

Enthält:

1. koa2-Wissenspunkte

2. Knoten-Wissenspunkte

3. Domänenübergreifende Probleme

4. Verwendung von Fetch

5. Verwendung von Axios

6. Beteiligung an Promise

7. vuex -> Verwendung von Zustand, Mutationen, Aktionen

Teil 1: Umgebungseinrichtung

Vue + Vuex-Umgebung

Die erste ist die Umgebung von Vue + Vue-Router + Vuex. Wir verwenden das Vue-Cli-Gerüst, um das Projekt zu generieren. Schüler, die Vue verwenden können, sollten damit vertraut sein.

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

Da das vom Gerüst generierte Vue-Projekt kein Vuex enthält, installieren Sie Vuex erneut.

// 安装vuex
npm i vuex --save

koa2-Umgebung

Nachdem das Front-End-Projekt erstellt wurde, beginnen wir mit dem Aufbau unseres Back-End-Dienstes.

Erstellen Sie zunächst ein neues Verzeichnis in Ihrem Entwicklungstool (sei es Webstorm oder Sublime), um einen Webdienst auf Basis von Koa zu erstellen.

Hier könnten wir dieses Verzeichnis genauso gut koa-demo nennen.

Dann ausführen:

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

Nach der Installation von koa und den beiden Middlewares ist die Umgebung fertiggestellt.

Teil 2: Beispielentwicklung

Die Umgebung ist für den Einsatz konzipiert, daher werden wir sofort eine Demo schreiben.

Demo-Entwicklung ist nicht nur ein Prozess, bei dem das Schreiben von Code in einer Entwicklungsumgebung geübt wird, sondern auch ein Prozess, bei dem überprüft wird, ob die Umgebung korrekt eingerichtet und verwendbar ist.

Back-End-Schnittstellenentwicklung

In diesem Beispiel stellen wir nur einen Dienst im Back-End bereit, nämlich die Bereitstellung einer Schnittstelle für die Rückgabe von JSON-Daten an Frontend. Der Code enthält Kommentare, gehen Sie also direkt zum Code.

server.js-Datei

// 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);

Hier wird eine JSON-Datei verwendet. Im Pfad „./static/material.json“ lautet der Code der JSON-Datei:

// 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": "江苏 南京大学",
}]

Dann verwenden wir den folgenden Befehl, um den Dienst zu starten

node server.js

Testen Sie, ob die Schnittstelle gut ist

Öffnen Sie den Browser und geben Sie http://127.0.0.1 ein: 3000/getJson. Überprüfen Sie, ob die JSON-Daten in der JSON-Datei auf der Seite angezeigt werden. Wenn sie angezeigt werden können, bedeutet dies, dass wir den Dienst, der JSON-Daten bereitstellt, bereits eingerichtet haben.

Beispiel einer Front-End-Calling-Back-End-Schnittstelle

Um die wichtigsten Punkte hervorzuheben, Störungen zu beseitigen und das Verständnis zu erleichtern. Unser Front-End schreibt eine Komponente: Erstens eine Schaltfläche zum Aufrufen der getJson-Schnittstelle des Webdienstes, dann einen Inhaltsanzeigebereich, in dem sie platziert wird Dieser Teil des Komponentenbereichs wird angezeigt.

Schauen wir uns zunächst die Komponentendatei an

<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>

Es ist sehr einfach, deshalb werde ich es nicht viel erklären.

Dann schauen Sie sich unsere vuex-Datei an.

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, der Code ist fertig.

Sprechen Sie über Axios

Wenn Sie den Abruf dieser Demo in den Axios-Modus ändern möchten, müssen Sie Folgendes tun:

1. Installieren Sie Axios und verweisen Sie auf Axios in der Vuex-Datei.

npm i axios
import axios from 'axios'

2. Ersetzen Sie den Abrufteil des Codes durch:

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 config/index. Fügen Sie die Konfiguration des ProxyTable-Elements in der js-Datei hinzu:

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

Postscript

Ein Projekt, das auf Vue-Gerüst basiert, um den asynchronen Datenabruf zu simulieren, oder Platzieren Sie die Daten direkt in der vom Gerüst generierten statischen Datei und geben Sie vor, aus dem Hintergrund geholte Daten zu sein.

Aber der Aufbau eines Webservices auf Express- oder Koa-Basis ist in der Tat etwas, das ein Front-End-Ingenieur beherrschen sollte.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So erzielen Sie einen Vorwärtsaktualisierungs- und einen Rückwärts-Nichtaktualisierungseffekt in Vue

Erklären Sie die damit verbundenen Probleme im Detail Implementierung des React-Server-Renderings

Wie man mit jquery ein PC-Karusselldiagramm schreibt (ausführliches Tutorial)

Erklären Sie das Object-Objekt in JS im Detail

So implementieren Sie mehrere Dateidownloads im WeChat-Miniprogramm

So verwenden Sie vue.js, um zu erkennen, dass das Popup-Fenster nur erscheint einmal hoch

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Entwicklungsumgebung mit vue+vuex+koa2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!