搭建一个小型的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框架教程-阮一峰