- 首先说明：这是看的技术胖的koa2及vue2.0+koa实战总结的一些，目前还没有正整用项目练习过，先说下思路：其实koa2就是通过使用路由，往mongodb数据库中写入数据及查找数据，增删改查等，然后前端通过axios进行请求koa2中写的路由返回的数据，然后进行页面的渲染就可以了（这里注意下：使用koa2操作mongodb的话，我们还需要几个模板，后续会进行更新的）
- 首先在我们创建的vue脚手架中的根目录下新建一个文件夹server, 在server下新建一个index.js，当然后面的话，可以多创建几个js文件，引入到index.js中就可以了，在这里我就在index.js中写了
- 1、使用koa2，那么就要先下载koa，不过我们要先初始化才能下载
npm init -y //不加-y也可以，一路回车就行
npm install --save koa
- 2、我们会使用到路由，那么就下载路由
npm install --save koa-router
- 3、里面会有跨域问题，那么下载中间件koa2-cors
npm install --save koa2-cors
- 4、会有post请求数据，下载中间件koa-bodyparser帮助我们处理post请求数据的格式
npm install --save koa-bodyparser
- 5、启动服务器的时候，命令
node index.js//你当前的编写服务器的js文件
- 6、直接上代码（这里没有使用将数据写入到mongodb中，后面会更新的）
const Koa = require('koa');//引入koa模块
const app = new Koa();//调用模块中的方法并进行声明
const cors = require('koa2-cors');//中间件，解决跨域问题
app.use(cors());//注册
const Router = require('koa-router');//路由中间件
const bodyparser = require('koa-bodyparser');//post请求数据处理格式的中间件
app.use(bodyparser());//注册
let home = new Router();//这是声明前缀不同的路由http://localhost:3000/home/menu0
home.get('/menu0', async (ctx)=>{
//get 使用query进行接受，post使用body进行接受
// 这是我们接受到前台传递的数据， 可以将这条数据进行处理或者是写入到mongodb数据库中
console.log(ctx.request.query);
//当前台请求当前数据的时候，成功了，后台返回给前台的响应，前台请求数据中的data中就会进行显示加提示这条信息
// ctx.body = JSON.stringify(ctx.request.query);
ctx.body = '请求数据写入成功啦';
});
home.get('/a', async(ctx)=>{//http://localhost:3000/home/a
// console.log(ctx.request.body);
ctx.response.body=({//这是后台给前台返回的数据，只要前台请求接口就会获取到数据
title:'我是后台返给前台的数据',
content:'快点接受数据',
status:200
});
});
let page = new Router();
page.post('/a', async(ctx)=>{//http://localhost:3000/page/a
// 输入localhost:3000/page/a页面会提示405，找不到post的方法
//原因为 Apache、IIS、Nginx等绝大多数web服务器，都不允许静态文件响应POST请求
// 所以将post请求改为get请求即可
// 还有在前台请求数据的时候，其实post已经执行了
ctx.body = ctx.request.body;
});
let router = new Router();//这是声明总的路由
//将上面写的home及page路由进行再主路由上注册
router.use('/home',home.routes(),home.allowedMethods());
router.use('/page',page.routes(),page.allowedMethods());
// 在将主路由注册到koa中就可以了
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000,()=>{//http://localhost:3000这是当前服务器的端口号
console.log('服务器启动成功！');//会在cmd命令符中显示这句话提示我们
});
- 7、在我们前台中，我们可以通过axios进行请求数据（先下载axios，之后再vue的main.js全局引入）
npm install --save axios
//main.js
import axios from 'axios';
Vue.prototype.$axios = axios;
注意：axios中get请求数据，写入参数的时候，属性名为params,post请求数据的时候，属性名为data
- get 请求（添加参数并返回给后台）
// get请求
this.$axios('/api/home/menu0',{
params:{
id:1,
title:'我是请求后台接口，并向后台传递参数'
}
}).then(res=>{
console.log(res);
console.log('写入成功！')
}).catch(msg=>{
console.log('写入失败！')
})
- post请求（添加参数并返回给后台，记得要下载中间件npm install --save koa-bodyparser，否则会接受不到前台传递的数据）
// post请求
this.$axios({
url: '/api/page/a',
method: 'post',
data: {
name: '小月'
}
}).then(res => {
console.log('请求结果：', res);
});
- get请求（请求接口，获取后台传递的数据）
this.$axios({
url: '/api/home/a',
method: 'get',
}).then(res => {
console.log('请求结果：', res);
}).catch(msg=>{
console.log(msg);
});
说明：请求URL中的api是我在vue中配置的跨域（因为我们在koa中配置了跨域的中间件，但是请求数据的时候，还是提示我们需要跨域，那么就在vue中进行了配置）
- 在vue的config文件夹下的index.js中
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {//这里是配置的跨域
'/api': {
target: 'http://localhost:3000', //目标路径，别忘了加http和端口号
changeOrigin: true, //是否跨域
ws: true,
pathRewrite: {
'^/api': '' //重写路径
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
}
-
如果有不对的地方，欢迎小伙伴留言指正！！！让我们一起进步
网友评论