vue.js+koa2項目實戰（四）搭建koa2服務端

搭建koa2服務端

安裝兩個版本的koa

1、版本安裝

1.安裝 koa1

npm install koa -g

注：必須安裝到全局

2.安裝 koa2

npm install koa@2 -g

 

2、建立項目

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

 

.