详解vue+vuex+koa2开发环境搭建及示例开发


Posted in Javascript onJanuary 22, 2018

写在前面

这篇文章的主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用。

搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径,而不是直接在前端写几个死数据。即,模拟后端接口。

当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点。

包括:

  1. koa2的知识点
  2. node的知识点
  3. 跨域问题
  4. fetch的使用
  5. axios的使用
  6. promise的涉及
  7. vuex -> state、mutations、actions的使用

第一部分:环境搭建

vue + vuex环境

首先是vue + vue-router + vuex的环境。我们用vue-cli脚手架生成项目,会用vue的同学对这块应该很熟了。

// 全局安装脚手架工具
npm i vue-vli -g
// 验证脚手架工具安装成功与否
vue --version
// 构建项目
vue init webpack 项目名
// 测试vue项目是否运行成功
npm run dev

因为脚手架生成的vue项目不包含vuex,所以再安装vuex。

// 安装vuex
npm i vuex --save

koa2环境

前端项目构建好了,就开始构建我们的后端服务。

首先在你的开发工具(不管是webstorm还是sublime)里新建一个目录,用来搭建基于koa的web服务。

在这里,我们不妨给这个目录起名为koa-demo。

然后执行:

// 进入目录
cd koa-demo
// 生成package.json
npm init -y
// 安装以下依赖项
npm i koa
npm i koa-router
npm i koa-cors

安装好koa和两个中间件,环境就算搭建完成了。

第二部分:示例开发

搭建环境是为了使用,所以我们立马来写一个demo出来。

demo开发既是一个练习如何在开发环境中写代码的过程,反过来,也是一个验证环境搭建的对不对、好不好用的过程。

后端接口开发

本例中,后端我们只提供一个服务,就是给前端提供一个返回json数据的接口。代码中包含注释,所以直接上代码。

server.js文件

// server.js文件

let Koa = require('koa');
let Router = require('koa-router');

let cors = require('koa-cors');
// 引入modejs的文件系统API
let fs = require('fs');

const app = new Koa();
const router = new Router();

// 提供一个/getJson接口
router
  .get('/getJson', async ctx => {
    // 后端允许cors跨域请求
    await cors();
    // 返回给前端的数据
    ctx.body = JSON.parse(fs.readFileSync( './static/material.json'));
  
  });

// 将koa和两个中间件连起来
app.use(router.routes()).use(router.allowedMethods());

// 监听3000端口
app.listen(3000);

这里面用到了一个json文件,在'./static/material.json'路径,该json文件的代码是:

// material.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": "江苏 南京大学",
}]

然后我们是用以下命令将服务启动

node server.js

测试接口是否良好

打开浏览器,输入http://127.0.0.1:3000/getJson。看一看页面上是否将json文件中的json数据显示出来,如果能够显示出来,则说明这个提供json数据的服务,我们已经搭建好了。

前端调用后端接口示例

为突出重点,排除干扰,方便理解。我们的前端就写一个组件,组件有两部分:首先是一个按钮,用来调用web服务的getJson接口;然后是一个内容展示区域,拿到后端返回的数据以后,将其在组件的这块区域显示出来。

首先我们看组件文件吧

<template>
  <div class="test">
    <button type="button" @click="getJson">从后端取json</button>
    <div class="showJson">{{json}}</div>
  </div>
</template>

<script>
  import {store} from '../vuex'
  export default {
    computed: {
     json(){
       return store.state.json;
     }
    },
    methods: {
     getJson(){
       store.dispatch("getJson");
     }
    }
  }
</script>

<style scoped>
 .showJson{
  width:500px;
  margin:10px auto;
  min-height:500px;
  background-color: palegreen;
 }
</style>

非常简单,就不多解释了。

然后看我们的vuex文件。

import Vue from 'vue'
import Vuex from 'vuex';

Vue.use(Vuex)
const state = {
  json: [],
};

const mutations = {
 setJson(state, db){
  state.json = db;
 }
}

const actions = {
 getJson(context){
  // 调用我们的后端getJson接口
  fetch('http://127.0.0.1:3000/json', {
   method: 'GET',
   // mode:'cors',
   headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
   },
  }).then(function (res) {
   if(res.status === 200){
    return res.json()
   }
  }).then(function (json) {

   //console.log(typeof Array.from(json), Array.from(json));
   context.commit('setJson', Array.from(json));
  })
 }
};

export const store = new Vuex.Store({
 state: state,
 mutations: mutations,
 actions: actions,
})

ok, 代码撸完了。

说说axios

想要把本demo的fetch改为axios方式,要做的工作有以下几处:

1、安装axios、在vuex文件引用axios

npm i axios
import axios from 'axios'

2、将fetch部分代码替换为:

const actions = {
 getJson(context){
  axios.get('/json', {
   method: 'GET',
   // mode:'cors',
   headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
   },
  }).then(function (res) {
   if(res.status === 200){
    return res.data
   }
  }).then(function (json) {

   //console.log(typeof Array.from(json), Array.from(json));
   context.commit('setJson', Array.from(json));
  })
 }
};

3、又会遇到跨域,在webpack中修改,路径config/index.js文件中添加proxyTable项的配置:

proxyTable: {
   '/json': {
    target: 'http://127.0.0.1:3000',
    changeOrigin: true,
    pathRewrite: {
     '^/json': '/json'
    }
   }
  },

后记

基于vue脚手架搭建的项目,模拟异步取数据,也可以直接在脚手架生成的static文件夹下放置数据,假装是后台拿过来的数据。

不过搭建一个基于express或者koa的web服务,确实也该是一个前端工程师应该掌握的。

OK,以上就是全文了。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
简单的js计算器实现
Oct 26 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 #jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 #jQuery
angular写一个列表的选择全选交互组件的示例
Jan 22 #Javascript
vue-router 组件复用问题详解
Jan 22 #Javascript
详解webpack多页面配置记录
Jan 22 #Javascript
详解html-webpack-plugin用法全解
Jan 22 #Javascript
js构造函数创建对象是否加new问题
Jan 22 #Javascript
You might like
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Selenium定位元素操作示例
2018/08/10 Python
Python理解递归的方法总结
2019/01/28 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
python3中property使用方法详解
2019/04/23 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python读写csv文件实例代码
2019/07/05 Python
在django中自定义字段Field详解
2019/12/03 Python
python重要函数eval多种用法解析
2020/01/14 Python
django API 中接口的互相调用实例
2020/04/01 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android