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": "/" } } } } };
重新啟動項目
npm run serve
就會看到頁面上顯示出了koa-demo項目里定義的json數(shù)據(jù)了,大功告成。
這樣以后就可以將mock數(shù)據(jù)的項目和具體前端項目分離開,更方便的使用。再也不用求著后端給mock數(shù)據(jù)了,自己搞!
參考資料koa官網(wǎng)
總結(jié)
到此這篇關于vue+koa2搭建mock數(shù)據(jù)環(huán)境的詳細教程的文章就介紹到這了,更多相關vue koa2 mock數(shù)據(jù)環(huán)境內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能
這篇文章主要介紹了vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能,需要的朋友可以參考下2019-04-04使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細教程(一)
這篇文章主要介紹了使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細教程(一)的相關資料,需要的朋友可以參考下2017-01-01vue3中el-uplod結(jié)合ts實現(xiàn)圖片粘貼上傳
本文主要介紹了vue3中el-uplod結(jié)合ts實現(xiàn)圖片粘貼上傳,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-07-07