话不多说,先上图！
一.koa项目搭建
1.创建项目目录
npm init -y //快速生成package.json文件2.安装koa
npm inatsll koa -S3.根目录下创建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 = Article2.数据库操作方法封装
//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 = false
await 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.data
return 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.data
return obj
})
}
git clone https://github.com/z-god/oneword.git
//克隆到本地,自由发挥吧