vue+vuex+koa2を使った開発環境の構築方法

この記事では主にvue + vuex + koa2開発環境の構築とサンプル開発の詳細な説明を紹介しますので、参考にしてください。

以前に書いたもの

この記事の主な目的は、koa フレームワークを使用して Web サービスを構築し、それによってフロントエンド呼び出しにいくつかのバックエンド インターフェイスを提供する方法を学ぶことです。

この環境を構築する目的は次のとおりです: フロントエンド エンジニアがバックエンド エンジニアとのインターフェースについて合意した後、共同デバッグを行う前に、バックエンドからのデータ要求を伴う機能は、バックエンド エンジニアによって構築された http パスを使用できます。フロントエンドに直接書き込むのではなく、フロントエンドエンジニア自身が、いくつかの死んだデータを書きます。つまり、バックエンド インターフェイスをシミュレートします。

もちろん、このプロセス全体 (環境の構築 + サンプルデモの開発) には、次の知識ポイントが含まれます。

含まれるもの:

1. koa2のナレッジポイント

2. ノードのナレッジポイント

3. クロスドメインの問題

4. フェッチの使用

5. axiosの使用

6. 約束への関与

7. vuex -> ステート、ミューテーション、アクションの使用

その 1: 環境セットアップ

vue + vuex 環境

1 つ目は、vue + vue-router + vuex の環境です。プロジェクトの生成には vue-cli スキャフォールディングを使用します。vue を使用できる学生はこれに精通しているはずです。

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

スキャフォールディングで生成されたvueプロジェクトにはvuexが含まれていないため、再度vuexをインストールしてください。

// 安装vuex
npm i vuex --save

koa2 環境

フロントエンド プロジェクトが構築されたら、バックエンド サービスの構築を開始しましょう。

まず、開発ツール (Webstorm であっても Sublime であっても) に新しいディレクトリを作成して、koa に基づいた Web サービスを構築します。

ここでは、このディレクトリに koa-demo という名前を付けてもよいでしょう。

次に実行します:

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

koaと2つのミドルウェアをインストールすると、環境が完成します。

パート 2: サンプル開発

使える環境が構築できたので、早速デモを書いていきます。

デモ開発は、開発環境でコードの書き方を練習するだけでなく、環境が正しく構築されているか、使用できるかを検証するプロセスでもあります。

バックエンドインターフェイスの開発

この例では、バックエンドに 1 つのサービスのみを提供します。これは、フロントエンドに json データを返すためのインターフェイスを提供することです。コードにはコメントが含まれているため、コードに直接アクセスします。

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

ここでは、'./static/material.json' パスで json ファイルが使用されています。 json ファイルのコードは次のとおりです:

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

次に、次のコマンドを使用してサービスを開始します。

node server.js

インターフェイスが適切かどうかをテストします

ブラウザを開いて http://127.0.0.1:3000/getJson と入力します。 jsonファイル内のjsonデータがページ上に表示されるか確認してください。表示できれば、jsonデータを提供するサービスが設定されています。

バックエンドインターフェイスを呼び出すフロントエンドの例

重要なポイントを強調し、干渉を排除し、理解を容易にします。フロントエンドは 2 つの部分で構成されます。まず、Web サービスの getJson インターフェイスを呼び出すボタンです。次に、バックエンドから返されたデータを取得した後、コンテンツ表示領域に配置されます。コンポーネントのこの部分が表示されます。

まずコンポーネントファイルを見てみましょう

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

とても簡単なので、多くは説明しません。

次に、vuex ファイルを見てください。

rreee

OK、コードは完成しました。

axios について話しましょう

このデモのフェッチを axios メソッドに変更したい場合は、以下を行う必要があります:

1. axios をインストールし、vuex ファイルに axios を参照します

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,
})

2.フェッチ部分のコードを次のように置き換えます:

npm i axios
import axios from 'axios'

3. Webpack でそれらを変更し、パス config/index.js ファイルに proxyTable 項目の構成を追加します:

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

Postscript

vue スキャフォールディングに基づいて構築されたプロジェクト。非同期データ取得をシミュレートするために、バックグラウンドから取得されたデータであるかのように、スキャフォールディングによって生成された静的フォルダーにデータを直接配置することもできます。

しかし、Express や KOA に基づいて Web サービスを構築することは、確かにフロントエンド エンジニアが習得すべきものです。

上記は私があなたのためにまとめたものです。

関連記事:

vueで前方リフレッシュと後方非リフレッシュ効果を実現する方法

反応サーバーレンダリングの実装の問題を詳しく説明

を使ってPC側のカルーセルチャートを書く方法jquery (詳細なチュートリアル)

JS で Object オブジェクトを詳しく説明します

WeChat アプレットで複数のファイルのダウンロードを実装する方法

vue.js を使用してポップアップ ボックスのみを実現する方法一度プレイします

以上がvue+vuex+koa2を使った開発環境の構築方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。