vue + vuex + koa2開發環境搭建及示例開發

時間 2019-11-09

標籤 vue vuex koa2 koa 開發環境搭建示例開發简体版

原文原文鏈接

寫在前面

這篇文章的主要目的是學會使用koa框架搭建web服務，從而提供一些後端接口，供前端調用。
搭建這個環境的目的是：前端工程師在跟後臺工程師商定了接口但還未聯調以前，涉及到向後端請求數據的功能可以走前端工程師本身搭建的http路徑，而不是直接在前端寫幾個死數據。即，模擬後端接口。前端

固然在這整個過程（搭建環境 + 開發示例demo）中，涉及到如下幾點知識點。
包括：vue

koa2的知識點
node的知識點
跨域問題
fetch的使用
axios的使用
promise的涉及
vuex -> state、mutations、actions的使用

第一部分：環境搭建

vue + vuex環境

首先是vue + vue-router + vuex的環境。咱們用vue-cli腳手架生成項目，會用vue的同窗對這塊應該很熟了。node

// 全局安裝腳手架工具
npm i vue-cli -g
// 驗證腳手架工具安裝成功與否
vue --version
// 構建項目
vue init webpack 項目名
// 測試vue項目是否運行成功
npm run dev

由於腳手架生成的vue項目不包含vuex，因此再安裝vuex。webpack

// 安裝vuex
npm i vuex --save

koa2環境

前端項目構建好了，就開始構建咱們的後端服務。ios

首先在你的開發工具（無論是webstorm仍是sublime）裏新建一個目錄，用來搭建基於koa的web服務。git

在這裏，咱們不妨給這個目錄起名爲koa-demo。github

而後執行：web

// 進入目錄
cd koa-demo
// 生成package.json
npm init -y
// 安裝如下依賴項
npm i koa
npm i koa-router
npm i koa-cors

安裝好koa和兩個中間件，環境就算搭建完成了。vue-router

第二部分：示例開發

搭建環境是爲了使用，因此咱們立馬來寫一個demo出來。
demo開發既是一個練習如何在開發環境中寫代碼的過程，反過來，也是一個驗證環境搭建的對不對、好很差用的過程。vuex

後端接口開發

本例中，後端咱們只提供一個服務，就是給前端提供一個返回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);

這裏面用到了一個json文件，在'./static/material.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數據的服務，咱們已經搭建好了。

前端調用後端接口示例

爲突出重點，排除干擾，方便理解。咱們的前端就寫一個組件，組件有兩部分：首先是一個按鈕，用來調用web服務的getJson接口；而後是一個內容展現區域，拿到後端返回的數據之後，將其在組件的這塊區域顯示出來。

首先咱們看組件文件吧

<template>
    <div class="test">
        <button type="button" @click="getJson">從後端取json</button>
        <div class="showJson">{{json}}</div>
    </div>
</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文件。

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, 代碼擼完了，獲取後端數據以前是這樣的。

獲取後端數據以後是這樣的。

說說axios

想要把本demo的fetch改成axios方式，要作的工做有如下幾處：
一、安裝axios、在vuex文件引用axios

npm i axios
import axios from 'axios'

二、將fetch部分代碼替換爲：

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

三、又會遇到跨域，在webpack中修改，路徑config/index.js文件中添加proxyTable項的配置：

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