vue + koa2如何搭建模拟数据环境

　　介绍

小编这次要给大家分享的是vue + koa2如何搭建模拟数据环境,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

前段时间写了一篇前端vue项目实现模拟数据方式的文章,主要是在vue项目里使用模拟数据,数据和项目耦合在一起,不太优雅,作为一个有追求的前端,怎么能容忍这种方法呢?特以此篇,记录利用koa2搭建服务端,提供模拟数据的方法。

这里以vue项目为主,当然别的类型项目依然可以使用这种模拟数据的方式。

前提是安装了vue-cli的脚手架,我电脑安装的是vue-cli3的版本。按照要求一步一步选择后,记得选择安装vuex,后续要使用,启动项目。

前端项目弄好之后,开始安装高雅

mkdir koa-demo 　　cd koa-demo 　　npm高雅koa-router koa-cors

安装工作完成后,在项目根目录下新建一个server.js。

节点服务器。js

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

vue + koa2如何搭建模拟数据环境

改造前端项目修改回家了。vue文件

& lt; template> 　　& lt; div类=癶ome"祝辞 　　& lt; ul> 　　& lt;李v=發ist"项目;:关键=癷tem.id"比; 　　& lt; p>姓名:{{item.name}} & lt;/p> 　　& lt; p>年龄:{{项目。年龄}}& lt;/p> 　　& lt;/li> 　　& lt;/ul> 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　出口默认{ 　　名称:“Home", 　　计算:{ 　　列表(){ 　　返回这个。store.state.list美元; 　　} 　　}, 　　安装(){ 　　this.getlist (); 　　}, 　　方法:{ 　　getlist () { 　　美元。store.dispatch (& # 39; getdata # 39;) 　　} 　　} 　　}; 　　& lt;/script>

修改程序。vue文件

& lt; template> 　　& lt; div id=癮pp"祝辞 　　& lt; router-view/比; 　　& lt;/div> 　　& lt;/template>

修改存储/索引。js 

从“进口Vue vue";
　　从“进口Vuex vuex";
　　从“进口axios axios";
　　
　　Vue.use (Vuex);
　　
　　出口默认新Vuex.Store ({
　　状态:{
　　列表:[]
　　},
　　突变:{
　　setlist(状态、数据){
　　状态。列表=数据;
　　}
　　},
　　行动:{
　　getData({提交}){
　　axios
　　. get (“/api/getData", {
　　标题:{
　　接受:“应用程序/json"
　　“Content-Type":“应用程序/json"
　　}
　　})
　　不要犹豫(res=比;{
　　如果(res.status===200) {
　　返回res.data;
　　}
　　})
　　不要犹豫(res=比;{
　　提交(“setlist" Array.from (res));
　　});
　　}
　　},
　　模块:{}
　　});

记得提前安装axios,这里需要使用axios请求后端接口。

新建配置文件

在根目录下新建一个vue.config。js,由于前后端项目存在跨域,需要使用代理实现。

模块。出口={ 　　devServer: { 　　端口:8085//端口号 　　https:假的,//https:{类型:布尔} 　　开放:真的,//配置自动启动浏览器 　　代理:{ 　　“/api": { 　　目标:“http://127.0.0.1:3000" 　　changeOrigin:没错, 　　pathRewrite: { 　　“^/api":“/? 　　} 　　} 　　} 　　} 　　};

重新启动项目

 npm运行服务

就会看到页面上显示出了koa-demo项目里定义的json数据了,大功告成。

vue + koa2如何搭建模拟数据环境