内容简介：前段时间写了一篇这里以vue项目为主，当然别的类型项目依然可以使用这种mock数据的方式。前提是安装了vue-cli的脚手架，我电脑安装的是vue-cli3的版本。按照要求一步一步选择后，记得选择安装vuex，后续要使用，启动项目。
前段时间写了一篇 前端vue项目实现mock数据方式 的文章，主要是在vue项目里使用mock数据，数据和项目耦合在一起，不太优雅，作为一个有追求的前端，怎么能容忍这种方法呢？特以此篇，记录利用koa2搭建服务端，提供mock数据的方法。
初始化vue项目
这里以vue项目为主，当然别的类型项目依然可以使用这种mock数据的方式。
vue create vue-koa2-demo
前提是安装了vue-cli的脚手架，我电脑安装的是vue-cli3的版本。按照要求一步一步选择后，记得选择安装vuex，后续要使用，启动项目。
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();
// 返回数据
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>
<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数据了，自己搞！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- Hyperledger Fabric环境搭建及环境测试(Mac环境)
- CV 环境很重要，各种环境搭建大全
- Openstack Queens 环境搭建（一）环境准备
- Python 环境搭建
- 1 - 搭建开发环境
- 搭建 Android 内核环境
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
