vue+koa2搭建mock數據環境的詳細教程

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

初始化vue項目

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

vue create vue-koa2-demo

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

koa2項目初始化

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

mkdir koa-democd koa-demonpm 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(); // 返回數據 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'}]

在終端中執行命令啟動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，由于前后端項目存在跨域，需要使用代理實現。

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': '/' } } } }};

重新啟動項目

npm run serve

就會看到頁面上顯示出了koa-demo項目里定義的json數據了，大功告成。

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

參考資料koa官網

總結

到此這篇關于vue+koa2搭建mock數據環境的詳細教程的文章就介紹到這了,更多相關vue koa2 mock數據環境內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！