搭建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 testcd testnpm install运行：npm start访问：http://localhost:3000
3.创建 koa2 项目
koa2 生成一个 test 项目，切到 test 目录并下载依赖
koa2 testcd testnpm 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 handleronerror(app)// middlewaresapp.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'}))// loggerapp.use(async (ctx, next) => {const start = new Date()await next()const ms = new Date() - startconsole.log(`${ctx.method} ${ctx.url} - ${ms}ms`)})// 使用 corsapp.use(cors())// routesapp.use(index.routes(), index.allowedMethods())app.use(users.routes(), users.allowedMethods())// error-handlingapp.on('error', (err, ctx) => {console.error('server error', err, ctx)});module.exports = app
.
