この記事では主にvue + vuex + koa2開発環境の構築とサンプル開発の詳細な説明を紹介しますので、参考にしてください。
以前に書いたもの
この記事の主な目的は、koa フレームワークを使用して Web サービスを構築し、それによってフロントエンド呼び出しにいくつかのバックエンド インターフェイスを提供する方法を学ぶことです。
この環境を構築する目的は次のとおりです: フロントエンド エンジニアがバックエンド エンジニアとのインターフェースについて合意した後、共同デバッグを行う前に、バックエンドからのデータ要求を伴う機能は、バックエンド エンジニアによって構築された http パスを使用できます。フロントエンドに直接書き込むのではなく、フロントエンドエンジニア自身が、いくつかの死んだデータを書きます。つまり、バックエンド インターフェイスをシミュレートします。
もちろん、このプロセス全体 (環境の構築 + サンプルデモの開発) には、次の知識ポイントが含まれます。
含まれるもの:
koa2のナレッジポイント
ノードのナレッジポイント
クロスドメインの問題
フェッチの使用
axiosの使用
約束への関与
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 '../vuex'
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 ファイルを見てください。
rreeeOK、コードは完成しました。
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 (詳細なチュートリアル)
WeChat アプレットで複数のファイルのダウンロードを実装する方法
vue.js を使用してポップアップ ボックスのみを実現する方法一度プレイします
以上がvue+vuex+koa2を使った開発環境の構築方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
