How to build a development environment using vue+vuex+koa2

This article mainly introduces the detailed explanation of vue vuex koa2 development environment construction and sample development. Now I will share it with you and give you a reference.

Written before

The main purpose of this article is to learn to use the koa framework to build web services, thereby providing some back-end interfaces for front-end calls.

The purpose of building this environment is: After the front-end engineer has agreed on the interface with the back-end engineer but before joint debugging, the function involving requesting data from the back-end can use the http path built by the front-end engineer himself, instead of Write some dead data directly on the front end. That is, simulate the backend interface.

Of course, in this whole process (building environment and developing sample demo), the following knowledge points are involved.

Includes:

1. koa2 knowledge points

2. ##node knowledge points

3. Cross-domain issues

4. Use of fetch

5. Use of axios

6. Involvement of promise

7. vuex -> Use of state, mutations, and actions

Part 1: Environment setup

vue vuex environment

The first is the environment of vue vue-router vuex. We use vue-cli scaffolding to generate the project. Students who can use vue should be familiar with this.

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

Because the vue project generated by the scaffolding does not contain vuex, install vuex again.

// 安装vuex
npm i vuex --save

koa2 environment

After the front-end project is built, let’s start building our back-end service.

First create a new directory in your development tool (whether it is webstorm or sublime) to build a web service based on koa.

Here, we might as well name this directory koa-demo.

Then execute:

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

After installing koa and the two middlewares, the environment is completed.

Part 2: Sample Development

The environment is built for use, so we will write a demo immediately.

Demo development is not only a process of practicing how to write code in the development environment, but also a process of verifying whether the environment is set up correctly and whether it is easy to use.

Back-end interface development

In this example, we only provide one service on the back-end, which is to provide an interface for returning json data to the front-end. The code contains comments, so go directly to the code.

server.js file

// 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);

A json file is used here. In the './static/material.json' path, the code of the json file is:

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

Then we use the following command to start the service

node server.js

Test whether the interface is good

Open the browser and enter http://127.0.0.1:3000/getJson. Check to see if the json data in the json file is displayed on the page. If it can be displayed, it means that we have already set up the service that provides json data.

Example of front-end calling back-end interface

To highlight key points, eliminate interference, and facilitate understanding. Our front-end writes a component. The component has two parts: first, a button to call the getJson interface of the web service; then, a content display area. After getting the data returned by the back-end, it is placed in this part of the component. area is displayed.

First let’s look at the component file

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

<script>
  import {store} from &#39;../vuex&#39;
  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>

It’s very simple, so I won’t explain it much.

Then look at our vuex file.

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, the code is finished.

Talk about axios

If you want to change the fetch of this demo to axios mode, you need to do the following:

1. Install axios, reference axios

npm i axios
import axios from 'axios'

2 in the vuex file, replace the fetch part of the code with:

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, you will encounter cross-domain, modify it in webpack, the path config/index. Add the configuration of the proxyTable item in the js file:

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

Postscript

A project built based on vue scaffolding to simulate asynchronous data acquisition, or directly in the static file generated by the scaffolding Clip and place the data, pretending to be the data brought from the background.

But building a web service based on express or koa is indeed something that a front-end engineer should master.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to achieve forward refresh and backward non-refresh effect in vue

Explain in detail the issues related to the implementation of react server rendering

How to write a carousel chart on PC using jquery (detailed tutorial)

Explain the Object object in JS in detail

How to implement multiple file downloads in the WeChat applet

How to use vue.js to realize that the pop-up box only plays once

The above is the detailed content of How to build a development environment using vue+vuex+koa2. For more information, please follow other related articles on the PHP Chinese website!