vue+koa2搭建mock數(shù)據(jù)環(huán)境的詳細教程

更新時間：2020年05月18日 11:19:26 作者：rocky191

這篇文章主要介紹了vue+koa2搭建mock數(shù)據(jù)環(huán)境的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

前段時間寫了一篇前端vue項目實現(xiàn)mock數(shù)據(jù)方式的文章，主要是在vue項目里使用mock數(shù)據(jù)，數(shù)據(jù)和項目耦合在一起，不太優(yōu)雅，作為一個有追求的前端，怎么能容忍這種方法呢？特以此篇，記錄利用koa2搭建服務端，提供mock數(shù)據(jù)的方法。

初始化vue項目

這里以vue項目為主，當然別的類型項目依然可以使用這種mock數(shù)據(jù)的方式。

vue create vue-koa2-demo

前提是安裝了vue-cli的腳手架，我電腦安裝的是vue-cli3的版本。按照要求一步一步選擇后，記得選擇安裝vuex，后續(xù)要使用，啟動項目。

koa2項目初始化

前端項目弄好之后，開始安裝koa

mkdir koa-demo
cd koa-demo
npm koa koa-router koa-cors

安裝工作完成后，在項目根目錄下新建一個server.js.

let Koa=require('koa')
let Router=require('koa-router')
let cors=require('koa-cors')
let fs=require('fs')

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

router.get('/getData',async ctx=>{
 // 允許cors跨域請求
 await cors();
 // 返回數(shù)據(jù)
 ctx.body=JSON.parse(fs.readFileSync('./static/data.json'));
})

// 將koa和中間件連起來
app.use(router.routes()).use(router.allowedMethods());

let port=3000;
app.listen(port,()=>{
 console.log('server is running on'+port)
})

上面請求了一個data.json。需要在項目根目錄下新建文件夾static，新建data.json

[{
 "id": 1,
 "name": "曹操",
 "age": "18"
}, {
 "id": 2,
 "name": "孫權",
 "age": "20"
}, {
 "id": 3,
 "name": "劉備",
 "age": "24"
}, {
 "id": 4,
 "name": "魏延",
 "age": "28"
}]

在終端中執(zhí)行命令啟動koa項目

node server.js

當看到下圖時，表示啟動項目成功

改造前端項目修改Home.vue文件

<template>
 <div class="home">
 <ul>
  <li v-for="item in list" :key="item.id">
  <p>姓名:{{ item.name }}</p>
  <p>年齡:{{ item.age }}</p>
  </li>
 </ul>
 </div>
</template>

<script>
export default {
 name: "Home",
 computed: {
 list() {
  return this.$store.state.list;
 }
 },
 mounted() {
 this.getlist();
 },
 methods: {
 getlist() {
  this.$store.dispatch('getData')
 }
 }
};
</script>

修改App.vue文件

<template>
 <div id="app">
 <router-view />
 </div>
</template>

修改store/index.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
 list: []
 },
 mutations: {
 setlist(state, data) {
  state.list = data;
 }
 },
 actions: {
 getData({ commit }) {
  axios
  .get("/api/getData", {
   headers: {
   Accept: "application/json",
   "Content-Type": "application/json"
   }
  })
  .then(res => {
   if (res.status === 200) {
   return res.data;
   }
  })
  .then(res => {
   commit("setlist", Array.from(res));
  });
 }
 },
 modules: {}
});

記得提前安裝axios，這里需要使用axios請求后端接口。

新建配置文件

在根目錄下新建一個vue.config.js，由于前后端項目存在跨域，需要使用代理實現(xiàn)。

module.exports = {
 devServer: {
 port: 8085, // 端口號
 https: false, // https:{type:Boolean}
 open: true, //配置自動啟動瀏覽器
 proxy: {
  "/api": {
  target: "http://127.0.0.1:3000",
  changeOrigin: true,
  pathRewrite: {
   "^/api": "/"
  }
  }
 }
 }
};

重新啟動項目