搭建一個小型的koa後端開發環境

以避免忘記，慢慢豐富

初始化準備

開始開發，依舊是常規的初始化

// 初始化文件夾
npm init

// 安裝koa
npm i koa --save-dev

helloworld

仍是先按照官方文檔helloword一下，測試koa的正常使用。
基本的文檔，能夠看這裏koa。

在根目錄新建app.js文件，輸入如下內容。

// 必修的 hello world 應用:

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000);

輸入命令運行

node app.js

則會在本地的3000端口生成一個內容爲Hello World的頁面。

這樣，咱們一個基本的服務就生成而且啓動成功了。

正式搭建開發環境

使用路由塑造接口

有兩種是不少人經常使用的，我最開始見到別人用的是koa-route，也用了，可是最近發現koa-router是被koa-route推薦的，也是用的人最多的，因此兩種都嘗試一下。

koa-route

安裝封裝好的koa-route模塊

npm i koa-route --save-dev

更改app.js文件，這也是官方給的例子。

const Koa = require('koa');
const app = new Koa();
var _ = require('koa-route');

var db = {
  tobi: { name: 'tobi', species: 'ferret' },
  loki: { name: 'loki', species: 'ferret' },
  jane: { name: 'jane', species: 'ferret' }
};
var pets = {
  list: (ctx) => {
    var names = Object.keys(db);
    ctx.body = 'pets: ' + names.join(', ');
  },
 
  show: (ctx, name) => {
    var pet = db[name];
    if (!pet) return ctx.throw('cannot find that pet', 404);
    ctx.body = pet.name + ' is a ' + pet.species;
  }
};
app.use(_.get('/pets', pets.list));

app.listen(3000);
console.log('listening on port 3000');

至此一個簡單的接口完成，咱們能夠經過瀏覽器訪問到數據。

koa-router

來自koa-router的官方的例子。
修改app.js文件

var Koa = require('koa');
var app = new Koa();
var Router = require('koa-router');
var router = new Router();

router.get('/test', (ctx, next) => {
  ctx.body = 'Hello World!';
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(3001);
console.log('listening on port 3001');

跨域

因爲我模擬的是先後端分離的項目，即後端採用本地3001端口開啓服務，前端採用8081訪問頁面，那麼前端請求後端接口一定跨域，瀏覽器報錯

所以咱們修改設置 Access-Control-Allow-Origin:*，容許全部域名的腳本訪問該資源。

app.use(async (ctx, next) => {
  ctx.set("Access-Control-Allow-Origin", "*");
  await next();
});

重啓服務便可拿取數據。

管理數據庫以及靜態資源

做爲一個後端框架，固然須要負責從數據庫拿取各類數據以及管理存儲的靜態資源。

管理靜態資源

對於靜態資源的管理，咱們使用koa-static。
熟悉的安裝

npm install koa-static

新建static文件夾，隨意存放一些圖片，模擬資源文件。

此時，經過本地開啓的服務端口是訪問不到這些靜態資源，咱們須要在服務裏針對目錄進行配置。
在app.js裏添加如下兩行代碼，即把當前文件（app.js）的目錄設置爲端口訪問的根目錄。

const serve = require('koa-static');

app.use(serve('.'));

此時，全部該目錄下的全部文件均可以經過端口直接訪問。
例如，我用瀏覽器直接訪問http://localhost:3001/static/img/category.png，便可看到圖片

除此以外，爲了整合，咱們新建service文件夾，存放處理拿取資源的邏輯，這樣保持app.js的接口清晰明瞭。

寫一個簡單的拿取圖片路徑的邏輯

exports.get_test_data = ()=>{
    var content = 'static/img/category.png';
    return content;
};

而後在app.js引入service文件，並寫一個獲取圖片的接口

var service = require('./service/webAppService.js');

router.get('/img', (ctx, next) => {
  ctx.body = service.get_test_data();
});

這就是一個簡單的模擬邏輯，前端請求該端口便可拿取數據

nodemon熱更新

開發中，咱們固然須要在修改文件後，項目可以自動重啓，方便調用，nodemon是一個比較常見的解決方式。
安裝nodemon

npm install --save-dev nodemon

使用nodemon來代替node啓動服務便可

nodemon app

有大佬寫了很詳細的教程koa框架教程-阮一峯