vue+koa2搭建mock数据环境的详细教程


Posted in Javascript onMay 18, 2020

前段时间写了一篇前端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

当看到下图时,表示启动项目成功

vue+koa2搭建mock数据环境的详细教程

改造前端项目修改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数据了,大功告成。

vue+koa2搭建mock数据环境的详细教程

这样以后就可以将mock数据的项目和具体前端项目分离开,更方便的使用。再也不用求着后端给mock数据了,自己搞!

参考资料koa官网

总结

到此这篇关于vue+koa2搭建mock数据环境的详细教程的文章就介绍到这了,更多相关vue koa2 mock数据环境内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 #Javascript
react 生命周期实例分析
May 18 #Javascript
react使用CSS实现react动画功能示例
May 18 #Javascript
Node.js API详解之 net模块实例分析
May 18 #Javascript
Javascript实现简易天数计算器
May 18 #Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 #Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 #Javascript
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
php的urlencode()URL编码函数浅析
2011/08/09 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
微信支付开发发货通知实例
2016/07/12 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
jQuery 选择器详解
2015/01/19 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
javascript自定义加载loading效果
2020/09/15 Javascript
Python中的id()函数指的什么
2017/10/17 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python global关键字的用法详解
2019/09/05 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
蔻驰英国官网:COACH英国
2020/07/19 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
求职简历自荐信范文
2013/10/21 职场文书
前台接待员岗位职责
2014/01/02 职场文书
打架检讨书400字
2014/01/17 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
公司活动方案范文
2014/03/06 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
2016中秋节广告语
2016/01/28 职场文书