欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2020年05月18日 11:19:26   作者:rocky191  
這篇文章主要介紹了vue+koa2搭建mock數(shù)據(jù)環(huán)境的方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

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

初始化vue項目

這里以vue項目為主,當(dāng)然別的類型項目依然可以使用這種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": "孫權(quán)",
 "age": "20"
}, {
 "id": 3,
 "name": "劉備",
 "age": "24"
}, {
 "id": 4,
 "name": "魏延",
 "age": "28"
}]

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

node server.js

當(dā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請求后端接口。

新建配置文件

在根目錄下新建一個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é)

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

相關(guān)文章

  • 解決Vue 刷新頁面導(dǎo)航顯示高亮位置不對問題

    解決Vue 刷新頁面導(dǎo)航顯示高亮位置不對問題

    這篇文章主要介紹了解決Vue 刷新頁面導(dǎo)航顯示高亮位置不對問題,本文圖文實例相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • Vue+Element?switch組件的使用示例代碼詳解

    Vue+Element?switch組件的使用示例代碼詳解

    這篇文章主要介紹了Vue+Element?switch組件的使用,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • graphQL在前端vue中使用實例代碼

    graphQL在前端vue中使用實例代碼

    這篇文章主要介紹了graphQL在前端vue中使用過程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能

    vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能

    這篇文章主要介紹了vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能,需要的朋友可以參考下
    2019-04-04
  • 使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細(xì)教程(一)

    使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細(xì)教程(一)

    這篇文章主要介紹了使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細(xì)教程(一)的相關(guān)資料,需要的朋友可以參考下
    2017-01-01
  • vue3中el-uplod結(jié)合ts實現(xiàn)圖片粘貼上傳

    vue3中el-uplod結(jié)合ts實現(xiàn)圖片粘貼上傳

    本文主要介紹了vue3中el-uplod結(jié)合ts實現(xiàn)圖片粘貼上傳,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-07-07
  • Vue-Cli項目優(yōu)化操作的實現(xiàn)

    Vue-Cli項目優(yōu)化操作的實現(xiàn)

    這篇文章主要介紹了Vue-Cli項目優(yōu)化操作,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-10-10
  • vue3輸入單號和張數(shù)如何自動生成連號的單號

    vue3輸入單號和張數(shù)如何自動生成連號的單號

    最近遇到這樣的需求輸入連號事件,需要在表格中輸入物流單號,物流號碼,生成的數(shù)量,名稱,點擊確定自動生成固定數(shù)量的連號物流單號,本文重點介紹vue3輸入單號和張數(shù),自動生成連號的單號,感興趣的朋友一起看看吧
    2024-02-02
  • 關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題

    關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題

    這篇文章主要介紹了關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue v-model的用法解析

    vue v-model的用法解析

    這篇文章主要介紹了v-model的基本用法解析,幫助大家更好的理解和學(xué)習(xí)vue v-model的使用方法,感興趣的朋友可以了解下
    2020-10-10

最新評論