话不多说,先上图！

一.koa项目搭建

1.创建项目目录

npm init -y //快速生成package.json文件

2.安装koa

npm inatsll koa -S

3.根目录下创建app.js文件

// app.js
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {ctx.body = 'hello world!';
});
app.listen(3000);
console.log('app started at port 3000...');

4.package.json文件中添加启动代码

5.测试

终端输入npm start 或者 node app

浏览器访问 http://localhost:3000/ 查看效果

6.脚手架搭建

npm install koa-generator -g//全局安装koa脚手架
koa2 project_name

脚手架搭建koa项目目录

 

7.利用koa2+mongodb搭建一套简易的nodejs后台服务，用于为客户端提供数据请求的数据api接口。 

推荐使用      koa2-mongodb-server    结构清晰，模块化，易学易用。

 

二. mongodb安装

1.打开官网 mongodb

选择对应配置下载即可

2.安装

1)默认安装在c盘,按操作提示很快完成安装。

2)安装完成后，启动mongod.exe之前先创建数据目录

在C:\ 根目录下创建data\db文件夹

3）运行mongod服务器

"C:\mobgodb\server\bin\mongod.exe" //cmd输入该指令

4) 连接数据库

"C:\mobgodb\server\bin\mongo.exe" //cmd输入该指令

5）在浏览器输入http://localhost:27017，如下图显示就表示，连接成功。如果不成功，请查看端口是否被占用。

 

 

三.编写API,并用Postman测试

1.下载  koa2-mongodb-server

git clone https://github.com/ivonzhang/koa2-mongodb-server.git
//克隆该项目到本地
npm install //安装依赖
node app //启动项目

该项目自带了一个用户模型，及其api,接下来我们仿照着写一个article模型。 

 

1.编写oneword model

//model/article.js
'use stricr'
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
/*** 定义一个模式(相当于传统意义的表结构)* 每个模式映射mongoDB的一个集合，* 它定义（只是定义，不是实现）这个集合里面文档的结构，就是定义这个文档有什么字段，字段类型是什么，字段默认值是什么等。* 除了定义结构外，还定义文档的实例方法，静态模型方法，复合索引，中间件等* @type {mongoose}*/
var ArticleSchema = new Schema({author:String,content:String,title:String,meta: {createAt: {type: Date,dafault: Date.now()},updateAt: {type: Date,dafault: Date.now()}}
})ArticleSchema.pre('save',function(next){if(this.isNew){this.meta.createAt = this.meta.updateAt = Date.now()}else{this.meta,updateAt= Date.now()}next()
})
var Article = mongoose.model('Article',ArticleSchema)
module.exports = Article

 2.数据库操作方法封装

//dbhelper/articleHelper
'use strict'var mongoose =  require('mongoose')
var Article = mongoose.model('Article')
//返回所有文章
exports.findAllArticles = async ()=>{var query = Article.find({});var res = []await query.exec((err,articles)=>{if(err){res = []}else{res = articles}})return res
}
//删除文章
exports.deletearticle = async ({author,title}) =>{var flag = falseawait Article.remove({author,title},(err)=>{if(err){flag = false}else{flag =true}})return flag
}

3. 编写控制器

//app/controller/article.js
'use strict'var xss = require('xss')
var mongoose = require('mongoose')
var Article = mongoose.model('Article')
import articleHelper from '../dbhelper/articleHelper'
//增
exports.postarticle = async (ctx,next)=>{var author = xss(ctx.request.body.author.trim())var content = xss(ctx.request.body.content.trim())var title =xss(ctx.request.body.title.trim())var article = await Article.findOne({author:author,content:content,title:title,}).exec()if(!article){article = new Article({author:xss(author),content:xss(content),title:xss(title)})    try{if(author == ''||content == ''||title == ''){ctx.body = {success:false,err:"请填写完整"}}else{article = await article.save()ctx.body = {success:true,article} }}catch(e){ctx.body = {success:false,err:"服务器错误"}return next}}else{ctx.body = {success:false,err:"请不要重复提交"}}
}
//查
exports.getarticles = async (ctx,next)=>{let data = await articleHelper.findAllArticles()ctx.body = {success: true,data}
}
//删
exports.delete = async (ctx,next)=>{const title = xss(ctx.request.body.title.trim())const author = xss(ctx.request.body.author.trim())var data = await articleHelper.deletearticle({author,title})ctx.body = {success:true,data}}

 

4.article接口路由

//article
router.post('/a/add',App.hasBody,Article.postarticle)
router.get('/a/articles',Article.getarticles)
router.post('/a/delete',Article.delete)

关于article的接口路由如上图所示

5.用Postman，测试接口  http://localhost:1234/api/a/add

 

成功后返回结果

 

控制台信息

 

OK！成功！其他接口就不一一测试了。

四.Vue跨域调用api

vue项目目录结构：本项目用Vue cli3构建，用Vue cli2的同学想升级请猛戳->这里

1.本地vue项目默认在8080端口,koapi项目在1234端口，所以Vue请求该接口api需要跨域.

跨域配置： 

//新建vue.config.js 添加下面的配置
module.exports = {// 修改的配置// 将baseUrl: '/api',改为baseUrl: '/',baseUrl: '/',devServer: {proxy: {'/api': {target: 'http://127.0.0.1:1234',changeOrigin: true,pathRewrite: {'^/api': ''}}}}
}

2.编写前端页面

koaapi接口已经通过postman测试，用axios请求接口

//增
import Vue from "vue";
var host = '/api'
export default function(word){return Vue.axios({url:host+'/api/a/add', method:'POST',data:word,headers: {Accept: "application/json","Content-Type": "application/json"}}).then(res =>{let obj = res.datareturn obj})
}

 

//查
import Vue from "vue";
var host = '/api'
export default function(){return Vue.axios({url:host+'/api/a/articles', method:'GET',headers: {Accept: "application/json","Content-Type": "application/json"}}).then(res =>{let obj = res.datareturn obj})
}

git clone https://github.com/z-god/oneword.git
//克隆到本地,自由发挥吧