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

.