koa2 mysql增删改查_react+koa2+mysql零门槛的全栈体验，附上完整项目分享
寫在前面
本文適用于對后端開發領域較為陌生的初級前端開發小伙伴，如果你想一個人搞定一整個項目(服務端接口定義開發+前端頁面渲染+數據庫搭建+服務器搭建+部署上線)，希望這篇文章能給你帶來一點點參考價值。
項目簡介
實現簡單的登錄、表單的增刪改查、文件上傳等功能。以下是項目地址：
技術棧
前端
主要基于React全家桶，UI框架選用ant-design-pro。
前端部分不做過多贅述，有興趣的可以直接查看源碼。
服務端
服務端采用Nodejs，框架采用的是Koa2.0
目錄結構說明├──?bin
│???├──?index.js?#?項目入口文件│???├──?www?#?配置引入├──?config
│???├──?config.js?#?配置項目│???├──?db.js?#?數據庫配置│???├──?redis?#?redis配置│???├──?render.js?#?數據接口渲染├──?app
│???├──?controllers?#?操作層?執行服務端模板渲染，json接口返回數據，頁面跳轉│???│???├──?admin.js
│???│???├──?index.js
│???│???├──?user.js
│???│???└──?work.js
│???├──?middleware?#?中間件集合│???│???└──?index.js
│???├──?models?#?數據模型層?執行數據操作│???│???└──?user.js
│???├──?routers?#?路由層?控制路由│???│???├──?user.js?#?/user/*?子路由│???│???├──?home.js?#?主頁子路由│???│???├──?index.js?#?子路由匯總文件├──?static??#靜態資源復制代碼
數據庫
數據庫采用Mysql，框架采用的是Sequelize,是一個基于promise的關系型數據庫Node.js ORM框架,用起來還蠻方便，推薦使用。
安裝mySql數據庫
可以參考官方文檔
這里順便推薦一款比較實用的數據庫管理工具：Navicat Premium
集群管理
集群管理采用PM2，是一個帶有負載均衡功能的 Node 應用的進程管理器。pm2的安裝和使用非常容易，具體可參考pm2的安裝和使用
API文檔工具
這里再分享一個能自動生成API文檔的庫koa2-swagger-ui,可以把 json 文件的 api 數據渲染成 swagger ui，具體使用方法可以參考項目代碼。npm?i?koa2-swagger-ui?-D復制代碼
服務端配置說明
www入口文件配置const?koa?=?require("koa");
const?koaSwagger?=?require('koa2-swagger-ui');
const?router?=?require('../app/routers/index');
const?path?=?require('path');
const?koaBody?=?require('koa-body');
const?{?cross,?onerror,?onheader?}?=?require("../app/middleware");
const?pkg?=?require("../package.json");
const?app?=?new?koa();
app.use(onerror());?//?系統錯誤,統一錯誤捕獲
/*更多的配置可以拉取倉庫代碼進行查看*/復制代碼
數據庫配置配置文件路徑：/config/db.js
針對不同環境，配置不同的數據庫地址：const?Sequelize?=?require('sequelize');
const?{?env?}?=?require("./config");
let?config?=?{};
switch?(env)?{
case?"dev":
config?=?{
database:?'testDB',?//?使用哪個數據庫
username:?'root',?//?用戶名
password:?'dev@123',?//?口令
host:?'127.0.01',?//?主機名
port:?3306?//?端口號，MySQL默認3306
};
break;
case?"test":
config?=?{
database:?'testDB',?//?使用哪個數據庫
username:?'root',?//?用戶名
password:?'test@123',?//?口令
host:?'test.mysql.rds.aliyuncs.com',?//?主機名
port:?3306?//?端口號，MySQL默認3306
};
break;
case?"prd":
config?=?{
database:?'testDB',?//?使用哪個數據庫
username:?'root',?//?用戶名
password:?'prd@123',?//?口令
host:?'prd.mysql.rds.aliyuncs.com',?//?主機名
port:?3306?//?端口號，MySQL默認3306
};
break;
}
export?const?sequelize?=?new?Sequelize(config.database,?config.username,?config.password,?{
host:?config.host,
dialect:?'mysql',
pool:?{
max:?5,
min:?0,
idle:?30000
}
});復制代碼
路由配置配置文件路徑：/app/routers/index.jsconst?router?=?new?require('koa-router')()
const?home?=?require('./home')
const?user?=?require("./backend/user")
const?swaggerJSDoc?=?require('swagger-jsdoc')
const?pkg?=?require("../../package.json")
const?swaggerDefinition?=?{
info:?{
title:?'API',
version:?'1.0.0',
description:?'API',
},
host:?`localhost:${pkg.port}`,
basePath:?'/'?//?Base?path?(optional)
};
const?options?=?{
swaggerDefinition,
apis:?['./app/routers/backend/*.js',?'./app/routers/front/*.js'],?//?寫有注解的router的存放地址
};
const?swaggerSpec?=?swaggerJSDoc(options)
//?通過路由獲取生成的注解文件
router.get('/swagger.json',?async?function?(ctx)?{
ctx.set('Content-Type',?'application/json');
ctx.body?=?swaggerSpec;
})
router.use('',?home.routes())
router.use('/backend/user',?user.routes())
module.exports?=?router復制代碼
中間件集合通俗的講：中間件就是匹配路由之前或者匹配路由完成做的一系列的操作。const?{?renderData?}?=?require("../../config/render")
const?{?log?}?=?require("../../util/utils")
const?koajwt?=?require('koa-jwt')
/**
*?跨域處理
*?@example?app.use(cross())
*/
export?function?cross()?{
return?async?function?(ctx,?next)?{
ctx.set('Access-Control-Allow-Origin',?ctx.get("Origin")?==?null???"*"?:?ctx.get("Origin"));
ctx.set('Access-Control-Allow-Methods',?ctx.get("Access-Control-Request-Method")?||?"PUT,?GET,?POST,?DELETE,?OPTIONS");
ctx.set('Access-Control-Allow-Headers',?ctx.get("Access-Control-Request-Headers")?||?"Content-Type");
ctx.set('Access-Control-Allow-Credentials',?"true");
if?(ctx.method?==?"OPTIONS")?{
ctx.status?=?204
}
await?next();
}
}
/**
*?兼容路由后綴，如?xxx/xxx.json?==?xxx/xxx?地址
*?@param?suffixes?string[]?后綴列表
*?@example?app.use(adaptRouteSuffix([".json"]))
*/
export?function?adaptRouteSuffix(suffixes?=?[])?{
return?async?function?(ctx,?next)?{
suffixes.forEach(e?=>?{
var?re?=?new?RegExp(e);
ctx.path?=?ctx.path.replace(re,?"")
})
await?next();
}
}
/**
*?錯誤日志捕獲
*?@example?app.use(onerror())
*/
export?function?onerror()?{
return?async?function?(ctx,?next)?{
return?next().catch((err)?=>?{
if?(err.status?===?401)?{
ctx.status?=?200;
renderData(ctx,?null,?401,?"用戶沒有權限(令牌、用戶名、密碼錯誤)",?err.message)
}?else?if?(ctx.status?===?404)?{
var?err?=?new?Error('Not?Found');
err.status?=?404;
renderData(ctx,?null,?404,?"系統繁忙，請聯系管理員",?err.message);
}?else?{
renderData(ctx,?null,?-1,?"服務端錯誤",?err.message);
log(err.message);
}
})
}
}
/**
*?延遲
*?@example?await?delay(5000)?//?延遲5s
*/
export?function?delay(time)?{
return?new?Promise(function?(resolve)?{
setTimeout(function?()?{
resolve();
},?time);
});
};
/**
*?請求頭攔截
*/
export?function?onheader()?{
return?koajwt({
secret:?'polo_token'
}).unless({
path:?[/\/user\/login|swagger|front/]
})
}復制代碼
基本功能展示
登錄
登錄模塊，這里就介紹下服務端的實現，主要依賴兩個插件，jsonwebtoken(jwt)和koa-jwt，前者主要負責加密，生成token返回給前端，后者實現對token的校驗，在中間件中實現請求頭攔截，驗證失敗返回401。具體可以參考代碼./app/controllers/user.js。/**
*?用戶登錄
*?@return?用戶登錄成功對象
*/
export?async?function?login(ctx)?{
const?data?=?ctx.request.body;
if?(!data.name?||?!data.password)?{
renderData(ctx,?null,?102,?'參數不合法');
}
const?result?=?await?GetUser({
name:?data.userName,
password:?data.password
})
if?(result?!==?null)?{
const?token?=?jwt.sign({
name:?result.name,
password:?result.password
},?'polo_token',?{?expiresIn:?'2h'?});
const?userData?=?{
userName:?result.name,
token:?'Bearer?'?+?token
}
renderData(ctx,?userData,?0,?'登錄成功');
}?else?{
renderData(ctx,?null,?101,?'用戶名或密碼錯誤');
}
}
/**
*?請求頭攔截
*/
export?function?onheader()?{
return?koajwt({
secret:?'polo_token'
}).unless({
path:?[/\/user\/login|swagger|front/]
})
}復制代碼
后臺部分內容展示
寫在最后
以上文章是我前段時間全棧開發已上線項目的簡略版分享，文章開頭已附上了該項目的前后端源碼，順便提供了測試數據(rnpxDemo.sql),只需把代碼克隆下來并保證電腦已安裝所需軟件，另有不足之處也請多多指正，非常感謝。
總結
以上是生活随笔為你收集整理的koa2 mysql增删改查_react+koa2+mysql零门槛的全栈体验，附上完整项目分享的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c#启动mysql数据库服务器_c#判断
- 下一篇： python写入数据库_Python p