快捷導(dǎo)航

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

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

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

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

初始化vue項(xiàng)目

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

vue create vue-koa2-demo

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

koa2項(xiàng)目初始化

前端項(xiàng)目弄好之后，開始安裝koa

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

安裝工作完成后，在項(xiàng)目根目錄下新建一個(gè)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();
 // 返回?cái)?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)
})

上面請求了一個(gè)data.json。需要在項(xiàng)目根目錄下新建文件夾static，新建data.json

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

在終端中執(zhí)行命令啟動(dòng)koa項(xiàng)目

node server.js

當(dāng)看到下圖時(shí)，表示啟動(dòng)項(xiàng)目成功

改造前端項(xiàng)目修改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請求后端接口。

新建配置文件

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

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

重新啟動(dòng)項(xiàng)目

npm run serve

就會看到頁面上顯示出了koa-demo項(xiàng)目里定義的json數(shù)據(jù)了，大功告成。

這樣以后就可以將mock數(shù)據(jù)的項(xiàng)目和具體前端項(xiàng)目分離開，更方便的使用。再也不用求著后端給mock數(shù)據(jù)了，自己搞！

參考資料koa官網(wǎng)

總結(jié)

到此這篇關(guān)于vue+koa2搭建mock數(shù)據(jù)環(huán)境的詳細(xì)教程的文章就介紹到這了,更多相關(guān)vue koa2 mock數(shù)據(jù)環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: