koa2交互实例

作者:亚搏app官网    发布时间:2020-02-09 19:41    浏览:107 次

[返回]

光阴: 2018-01-26阅读: 1456标签: vuex写在前面

那篇小说的主要目标是学会使用koa框架搭建web服务,进而提供一些后端接口,供前端调用。搭建这几个蒙受的指标是: 前端程序猿在跟后台技术员商定了接口但还未有联调此前,涉及到向后端央浼数据的效用能够走前端程序员自个儿搭建的http路线,实际不是直接在前端写多少个死多少。即,模拟后端接口。

理当如此在此一切进程(搭建情况 + 开荒示范demo)中,涉及到以下几点知识点。包罗:

koa2的知识点node的知识点跨域难题fetch的应用axios的应用promise的关系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。

// 安装vuexnpm i vuex --save

koa2环境

前面三个项目创设好了,就起来塑造我们的后端服务。

率先在您的开采工具(不管是webstorm如故sublime)里新建一个目录,用来搭建基于koa的web服务。

在这里边,大家不要紧给这么些目录起名字为koa-demo。

接下来实行:

// 进入目录cd koa-demo// 生成package.jsonnpm init -y// 安装以下依赖项npm i koanpm i koa-routernpm 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的文件系统APIlet 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

测量试验接口是还是不是美貌

开垦浏览器,输入。看后生可畏看页面上是还是不是将json文件中的json数据浮现出来,就算可以显得出来,则注脚这些提供json数据的劳务,我们曾经搭建好了。

前端调用后端接口示例

为非凡注重,消除烦恼,方便掌握。我们的前端就写二个组件,构件有两有个别:首先是五个按键,用来调用web服务的getJson接口;然后是八个剧情浮现区域,拿到后端再次回到的数目以往,将其在组件的那块区域显示出来

先是我们看组件文件

template div button type="button" @click="getJson"从后端取json/button div{{json}}/div /div/templatescript import {store} from '../vuex' export default { computed: { json(){ return store.state.json; } }, methods: { getJson(){ store.dispatch("getJson"); } } }/scriptstyle 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('', { 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,})

说说axios

想要把本demo的fetch改为axios方式,要做的做事有以下几处:1、安装axios、在vuex文件援引axios

npm i axiosimport 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: '', changeOrigin: true, pathRewrite: { '^/json': '/json' } } },

后记

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

然则搭建四个基于express或许koa的web服务,确实也该是二个前端程序猿应该调控的。

关于小编

技术博客||GitHub||丹佛掘金主页

搜索