vue.js+koa2项目实战（四）搭建koa2服务端

搭建koa2服务端

安装两个版本的koa

一、版本安装

1.安装 koa1

npm install koa -g

注：必须安装到全局

2.安装 koa2

npm install koa@2 -g

二、创建项目

1.安装 koa 生成器 （koa1 和 koa2 都用此生成器）

npm install koa-generator -g

2. koa1 生成一个 test 项目，切到 test 目录并下载依赖

koa test

cd test

npm install

运行：npm start

访问：http://localhost:3000

3.创建 koa2 项目

koa2 生成一个 test 项目，切到 test 目录并下载依赖

koa2 test

cd test

npm install

运行：npm start

访问：http://localhost:3000

4.axios 向 koa2 发送参数

Login.vue

<template>

  <table>

    <tr>

      <!-- 登录 -->

      <td>

        <form>

          <table align="center">

            <tr>

              <td align="right">email:</td>

              <td align="right">

                <el-input name="email" placeholder="请输入email"></el-input>

              </td>

            </tr>

            <tr>

              <td align="right">密码:</td>

              <td align="right">

                <el-input type='password' name="pwd"></el-input>

              </td>

            </tr>

            <tr>

              <td colspan="2" align="center">

                <el-button type="primary">登录</el-button>

              </td>

            </tr>

          </table>

        </form>

      </td>

      <!-- 注册 -->

      <td>

        <form name="zhuceForm">

          <table align="center">

            <tr>

              <td align="right">email:</td>

              <td align="right">

                <el-input name="email" placeholder="请输入email"></el-input>

              </td>

            </tr>

            <tr>

              <td align="right">密码:</td>

              <td align="right">

                <el-input type='password' name="pwd"></el-input>

              </td>

            </tr>

            <tr>

              <td align="right">重复密码:</td>

              <td align="right">

                <el-input type='password' name="repwd"></el-input>

              </td>

            </tr>

            <tr>

              <td align="right">昵称:</td>

              <td align="right">

                <el-input name="nicheng"></el-input>

              </td>

            </tr>

            <tr>

              <td colspan="2" align="center">

                <el-button type="primary" @click='zhuce'>注册</el-button>

              </td>

            </tr>

          </table>

        </form>

      </td>

    </tr>

  </table>

</template>

<script>

import axios from 'axios'

export default {

  methods:{

    zhuce:function() {

      let formObj = {};

      formObj.email = zhuceForm.email.value;

      formObj.pwd = zhuceForm.pwd.value;

      formObj.repwd = zhuceForm.repwd.value;

      formObj.nicheng = zhuceForm.nicheng.value;

      // 向服务器传参

      axios.post('http://localhost:3000/users/zhuce',formObj)

        .then(function(res){

          console.log(res);

          alert(res.data);

        })

        .catch(function(err){

          console.log(err);

        })

    }

  }

}

</script>

5.koa2 配置 路由

6.koa 跨域访问：

（1）安装插件

npm install koa-cors --save-dev

（2）项目的 app.js 中

var cors = require('koa-cors')

app.use(cors())  // 放在route前面

app.js

const Koa = require('koa')

const app = new Koa()

const views = require('koa-views')

const json = require('koa-json')

const onerror = require('koa-onerror')

const bodyparser = require('koa-bodyparser')

const logger = require('koa-logger')

// 解决跨域访问问题

var cors = require('koa-cors')

const index = require('./routes/index')

const users = require('./routes/users')

// error handler

onerror(app)

// middlewares

app.use(bodyparser({

  enableTypes:['json', 'form', 'text']

}))

app.use(json())

app.use(logger())

app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {

  extension: 'pug'

}))

// logger

app.use(async (ctx, next) => {

  const start = new Date()

  await next()

  const ms = new Date() - start

  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)

})

// 使用 cors

app.use(cors())

// routes

app.use(index.routes(), index.allowedMethods())

app.use(users.routes(), users.allowedMethods())

// error-handling

app.on('error', (err, ctx) => {

  console.error('server error', err, ctx)

});

module.exports = app

.