详解vue+vuex+koa2开发环境搭建及示例开发
写在前面这篇文章的主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用。 搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径,而不是直接在前端写几个死数据。即,模拟后端接口。 当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点。 包括:
第一部分:环境搭建vue + vuex环境首先是vue + vue-router + vuex的环境。我们用vue-cli脚手架生成项目,会用vue的同学对这块应该很熟了。 因为脚手架生成的vue项目不包含vuex,所以再安装vuex。 koa2环境前端项目构建好了,就开始构建我们的后端服务。 首先在你的开发工具(不管是webstorm还是sublime)里新建一个目录,用来搭建基于koa的web服务。 在这里,我们不妨给这个目录起名为koa-demo。 然后执行: 安装好koa和两个中间件,环境就算搭建完成了。 第二部分:示例开发搭建环境是为了使用,所以我们立马来写一个demo出来。 demo开发既是一个练习如何在开发环境中写代码的过程,反过来,也是一个验证环境搭建的对不对、好不好用的过程。 后端接口开发本例中,后端我们只提供一个服务,就是给前端提供一个返回json数据的接口。代码中包含注释,所以直接上代码。 server.js文件 let Koa = require('koa');
let Router = require('koa-router'); let cors = require('koa-cors'); const app = new Koa(); // 提供一个/getJson接口 }); // 将koa和两个中间件连起来 // 监听3000端口 这里面用到了一个json文件,在'./static/material.json'路径,该json文件的代码是: [{
"id": 1,"date": "2016-05-02","name": "张三","address": "北京 清华大学",},{ "id": 2,"date": "2016-05-04","name": "李四","address": "上海 复旦大学",{ "id": 3,"date": "2016-05-01","name": "王五","address": "广东 中山大学",{ "id": 4,"date": "2016-05-03","name": "赵六","address": "广东 深圳大学",{ "id": 5,"date": "2016-05-05","name": "韩梅梅","address": "四川 四川大学",{ "id": 6,"date": "2016-05-11","name": "刘小律","address": "湖南 中南大学",{ "id": 7,"date": "2016-04-13","name": "曾坦","address": "江苏 南京大学",}] 然后我们是用以下命令将服务启动 测试接口是否良好打开浏览器,输入http://127.0.0.1:3000/getJson。看一看页面上是否将json文件中的json数据显示出来,如果能够显示出来,则说明这个提供json数据的服务,我们已经搭建好了。 前端调用后端接口示例为突出重点,排除干扰,方便理解。我们的前端就写一个组件,组件有两部分:首先是一个按钮,用来调用web服务的getJson接口;然后是一个内容展示区域,拿到后端返回的数据以后,将其在组件的这块区域显示出来。 首先我们看组件文件吧 非常简单,就不多解释了。 然后看我们的vuex文件。 Vue.use(Vuex)
const state = { json: [],}; const mutations = { const actions = { //console.log(typeof Array.from(json),Array.from(json)); export const store = new Vuex.Store({ ok,代码撸完了。 说说axios想要把本demo的fetch改为axios方式,要做的工作有以下几处: 1、安装axios、在vuex文件引用axios 2、将fetch部分代码替换为: //console.log(typeof Array.from(json),Array.from(json));
}) } }; 3、又会遇到跨域,在webpack中修改,路径config/index.js文件中添加proxyTable项的配置: 后记基于vue脚手架搭建的项目,模拟异步取数据,也可以直接在脚手架生成的static文件夹下放置数据,假装是后台拿过来的数据。 不过搭建一个基于express或者koa的web服务,确实也该是一个前端工程师应该掌握的。 OK,以上就是全文了。希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |