序文
ないN- ode.jsフロントエンドは良いフロントエンドではありません!
近年ではNode.jsのは、確かに、より多くの火災、多くの企業でのNode.jsは、要件を持ち始めています。フロントエンド、バックエンドでなければならないが、良いフロントエンドになることを望んでいませんが、Node.jsのが唯一の方法です。
私はNode.jsの第一印象は、それがバックエンドの言語ですが、コストが低く、フロントは良く始める学習に終わるだろうということです。ゆっくりと理解した後、使用してNode.jsのは、インターフェイスは、フロントエンドのために非常に便利ですが、インタフェースを書くために限定されない書き込み。いくつかの大企業では、Node.jsのは、開発のインターフェイスのための主要なターゲットではなく、中間層として使用されています。我々は、すべての分業、専門的なことを行うために、より専門的な人々は、作業効率が大幅に改善されることを知っています。Node.jsの中間層として、書き込み、データを管理するために、バックエンドインターフェイスの詳細フォーカスを可能にします。
今、想像して、ビジネス・ロジックの変更、バックエンドは、データ・インターフェースに変更を加える必要があるので、あなたが時間を過ごすのだろうか?あなたが希望の場合のNode.js、あなたはできるのNode.jsがあるため、データ構造とデータ内容のトラブルを必要とせずに、データの集約、フロントエンドのスプライシングの使用のためのいくつかのインタフェースからデータを行い、そして、あなたは効率性を心配する必要はありませんノード.js本質的に非同期。
含む当社の使用いくつかの足場ツールも基づいているNode.jsの設定環境、あなたも使用できるのNode.jsをデータマイニングを行うために、それは我々が爬虫類呼んで、Node.jsのだけでなく、アプリケーションレベルを。これらは私が学んだ情報の一部です。
現在、Node.jsのより多くの主流のフレームワークは、エクスプレス、KOA、卵に分かれています。ES7の急行支援非同期/のawaitの開発者の同じチームによって構築された新世代の枠組みとしてKOA、文言上より自然なコールバックを、放棄しました。KOAは、任意の結合しなかった中間体を、重要な点は、その下部ミドルウェア層、KOA体積したがって小さい高レベル設計「糖衣構文」を提供することです。(ミドルウェアKOAは、私はそれを学ぶために背中に焦点を当てる、非常に重要な存在です)
次に、私はKOAアプローチにピットを開始したいです。
KOA初めての経験
こんにちは、兵士!
app.jsを作成し、コマンドライン実行ノードアプリ
CONST興亜は=( 'KOA'を必要とします)。 constのアプリ = 新しい興亜();
app.context.msg = 'こんにちは興亜!' app.use(非同期CTX => { ctx.body = ctx.msg; });
app.listen( 3000)。
app.context コンテキストを実行するためのプロパティとメソッドを追加します
app.use ミドルウェア・アプリケーションに与えられた方法を
この方法は、受信CTXと次の引数としてCTXは ctx.body、要求及び応答情報を格納する実行コンテキストであるが、我々は次の右中間への関数呼び出し、次の実行のように、それを介してデータを返すことができ作品の実行。
ここで私は、最初のたびにファイルが変更するので、あなたはコードを、処理するために、モジュールへのこの反復作業を更新するには、コマンドを再実行する必要があり、nodemonをインストールしました。
NPM私はnodemonインストール、コマンドライン実行後のApp nodemonので、各ファイルの変更は、自動的に更新nodemonあるとき。
KOA-ルータのルート管理
コードの保守性に、符号量を削減します。管理が特に重要であるルーティング、KOAフレームは独自の対応するルーティング管理モジュール(KOA-ルータ)を持って、我々はNPMのダウンロードを通じて使用することができます使用してください。
VAR興亜は=( 'KOA'を必要)。 VARルータは=( 'KOA-ルータ'を必要)。
VaRのアプリ= 新しい興亜(); VaRのルータ= 新しいルータ();
router.get( '/'、(CTX、次)=> { ctx.body = 'ハロー' })。
//使用路由中间件 アプリ .USE(router.routes()) .USE(router.allowedMethods())。
app.listen( 3000 )
ルーティングを使用してサイン路線
allowedMethods 处理的业务是当所有路由中间件执行完成之后,若 ctx.status 为空或者404的时候,丰富 response 对象的 header 头,不加问题也不大,官方例子有加上,所以我这里也加了
这时访问3000端口就可以得到ctx.body 返回的内容
get请求
1. 获取接口query参数
通过查询 ctx.request.query 得到get参数, ctx.request.header 得到请求时的头部信息,ctx.request.method 得到请求方法。这样可以对应的来做一些判断,例如请求的参数是否合法,请求方法是否合法。
router.get( '/get', (ctx, next) => {
let id = ctx.request.query.id
ctx.body = {
id,
code: 1
}
});
2. 命名路由 获取参数
router.get( '/get/:id', (ctx, next) => {
let id = ctx.request.params.id
ctx.body = {
id,
code: 1
}
});
例如请求地址为 /get/123,通过 ctx.request.params 获取参数
这写法让我想起了vue-router,设置params可以说是一样了。
post请求
原生获取post请求的参数,需要监听ctx.req的data事件和end事件,分段拼接成完整的字符串,然后还需要切割转码。所以在获取post参数时,我会借助 koa-bodyparser 来减少不必要的操作。
在引入 koa-bodyparser 时,需要注意的是顺序问题,使用 koa-bodyparser 需要放在使用路由之前,这是由于中间件执行顺序的原因(暂且理解为 bodyparser 经过处理,把处理好的值转交到路由)
var bodyParser = require('koa-bodyparser');
app.use(bodyParser());
app
.use(passport.initialize())
.use(passport.session())
借助中间件koa-bodyparser,访问 ctx.request.body 得到post参数
通过 ctx.set 设置返回头,设置多个时可传入对象
router.post('/post', ctx=>{
//设置允许跨域
ctx.set('Access-Control-Allow-Origin','*')
ctx.body = {
code:1,
postParams:ctx.request.body
}
})
路由模块化管理
试想一下,现在文件中写有多个接口,我们在开发和调试起来都会特别麻烦,浪费时间。为了更好的管理接口,现在需要把接口按照功能抽离出来,封装到一个个的JS文件中,并存放到routes文件夹下。
例如,创建 user.js 来存放用户相关的接口
const Router = require('koa-router')
const route = new Router()
const jwt = require('jsonwebtoken')
route.get('/getToken', async (ctx)=>{
let {name,id} = ctx.query
if(!name && !id){
ctx.body = {
msg:'不合法',
code:0
}
return
}
//生成token
let token = jwt.sign({name,id},'secret',{ expiresIn: '1h' })
ctx.body = {
token: token,
code:1
}
})
route.get('/getUser', async ctx=>{
let id = ctx.query.id
ctx.body = {
user:ctx.payload,
id,
code:1
}
})
route.get('/getAllUser', async ctx=>{
let type = ctx.query.type
if(type){
ctx.body = {
type,
code:1
}
}else{
ctx.body = {
msg:'缺少参数type',
code:0
}
}
})
module.exports = route
以上代码,将写好的接口暴露出去,供app.js注册使用
app.js代码(部分代码省略)
let urls = fs.readdirSync(__dirname + '/routes')
urls.forEach((element) => {
//routes里的js接口文件
let module = require(__dirname + '/routes/' + element)
//routes里的文件名作为 路由名
router.use('/' + element.replace('.js', ''), module.routes())
})
//使用路由
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)
以上代码,我大概讲下流程
1. fs文件模块读取routes文件夹目录内容(获得的是一个文件名的数组)
2. 数组遍历,引入接口文件,将文件名作为路由名,注册使用路由
将 user.js 作为例子,user.js 内有一个 getUser 的接口,我访问的api地址为 /user/getUser
头部信息处理
在前后端交互中,头部信息也是很关键的一步,通过对头部信息的配置,可以对请求作出一些限制,或者是一些优化。
这里我会使用 koa2-cors 为例子,来对跨域做cors处理(部分代码省略)。
const cors = require('koa2-cors')
app.use(cors({
origin: function(ctx) {
return 'http://127.0.0.1:5500';//cors
},
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
maxAge: 5,
credentials: true,
allowMethods: ['GET', 'POST'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)
origin : 接受字符串和函数,这里配置的就是允许跨域的域名,如果允许所有域名跨域可传入 *
allowMethods : 允许请求的方式
allowHeaders : 允许接受的头部信息
其他的配置选项可以在npm上查看:https://www.npmjs.com/package/koa2-cors
写在最后
本文通过路由中间件简单实现接口,模块化管理接口文件,还对接口进行跨域处理。
主要还是玩模块,通过模块可以组合出适合自己业务的系统。