1. 首页
  2. IT资讯

基于Koa2搭建Node.js 前后端分离开发、部署服务器实战项目 (三)

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fd3e93d6081e947ccb28d13479d551660″ img_width=”542″ img_height=”324″ alt=”基于Koa2搭建Node.js 前后端分离开发、部署服务器实战项目 (三)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E前言u003Cu002Fh1u003Eu003Cpu003E在第二章(u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6687475932011168267u002F?group_id=6687475932011168267″ target=”_blank”u003E前往学习第二章u003Cu002Fau003E)中,我们已经学会了基本的中间件,接下来我们就进入中间件实践阶段,koa中最基础的路由中间件koa-router。u003Cu002Fpu003Eu003Ch1u003E基本介绍u003Cu002Fh1u003Eu003Cpu003E路由是什么?通俗的说就是指路牌。u003Cu002Fpu003Eu003Cpu003E在mvc框架中路由是用于描述 URL 与处理函数之间的对应关系的,比如我们启动项目后,在浏览器中输入http:u002Fu002Flocalhost:3000 进入的就是首页,而http:u002Fu002Flocalhost:3000u002Fcase,这样就相当于进入了case这个页面。u003Cu002Fpu003Eu003Cpu003E我们简单的实现上述功能也是可以的,我们可以自己去处理路由,u003Cu002Fpu003Eu003Cpu003E我们可以利用ctx去做路径出来,ctx.request.path这个去匹配当前的访问路径,从而达到路由的作用u003Cu002Fpu003Eu003Cpu003Eapp.js中写代码,示下:u003Cu002Fpu003Eu003Cpreu003Econst Koa = require(‘koa’)u003Cbru003Econst app = new Koa()u003Cbru003Eapp.use(async (ctx, next) => {u003Cbru003E if (ctx.request.path === ‘u002F’) {u003Cbru003E ctx.response.body = ‘<h1>我就是首页的内容<u002Fh1>’;u003Cbru003E } else {u003Cbru003E await next();u003Cbru003E }u003Cbru003E});u003Cbru003Eapp.use(async (ctx, next) => {u003Cbru003E if (ctx.request.path === ‘u002Fcase’) {u003Cbru003E ctx.response.body = ‘<h1>我就是case的页面<u002Fh1>’;u003Cbru003E } else {u003Cbru003E await next();u003Cbru003E }u003Cbru003E});u003Cbru003Eapp.use(async (ctx, next) => {u003Cbru003E if (ctx.request.path === ‘u002F404’) {u003Cbru003E ctx.response.body = ‘<h1>4我的天,内容竟然丢失了!<u002Fh1>’;u003Cbru003E } else {u003Cbru003E await next();u003Cbru003E }u003Cbru003E});u003Cbru003Eapp.listen(3000, () => {u003Cbru003E console.log(‘server is running at http:u002Fu002Flocalhost:3000’)u003Cbru003E})u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E写完启动项目:u003Cu002Fpu003Eu003Cpreu003Enode app.jsu003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E启动之后在浏览器中分别访问 http:u002Fu002Flocalhost:3000u002F、http:u002Fu002Flocalhost:3000u002Fcase、http:u002Fu002Flocalhost:3000u002F404 就可以看到我们自己定义的页面内容了。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EPS: 前面有童鞋私信我说怎么项目运行起来会报错呀,各种莫名其妙。聊了很久才发现是Node版本不对。由于 node 在 v7.6.0 中才支持 async 和 await,所以在运行 app.js 之前请确保 node 版本正确u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E上面介绍的写法项目中仅仅能处理简单的应用,一旦我们的项目比较大的时候要处理的 URL 较多厚,就会显得特别笨重且难以维护。因此我们还是使用 koa-router来实现路由功能是最明智的。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E接下来就和大家一起学习如何正确的使用 koa-routeru003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Ch1u003E安装 Koa-routeru003Cu002Fh1u003Eu003Cpu003E第一步肯定是先安装它,安装了才能引用呀。u003Cu002Fpu003Eu003Cpreu003Enpm i koa-router -Su003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003EPS:这句命令中的i其实就是install的简写,-s就是-save的简写。-s的作用就是在package.json 的 dependencies 中保留,这样下次在没有安装依赖包的时候,只需要执行 npm i 或者 npm install 就能够安装所有需要的依赖包。u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E使用u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eapp.js中写代码,示下:u003Cu002Fpu003Eu003Cpreu003Econst Koa = require(‘koa’)u003Cbru003Econst router = require(‘koa-router’)()u003Cbru003Econst app = new Koa()u003Cbru003E u002Fu002F 路由u003Cbru003E router.get(‘u002F’, async (ctx, next) => {u003Cbru003E ctx.response.body = `<h1>我是首页<u002Fh1>`u003Cbru003E})u003Cbru003Erouter.get(‘u002Fcase’, async (ctx, next) => {u003Cbru003E ctx.response.body = ‘<h1>我是case页面<u002Fh1>’u003Cbru003E})u003Cbru003Erouter.get(‘u002F404’, async (ctx, next) => {u003Cbru003E ctx.response.body = ‘<h1>404 Not Found<u002Fh1>’u003Cbru003E})u003Cbru003E u002Fu002F 调用路由中间件u003Cbru003E app.use(router.routes())u003Cbru003Eapp.listen(3000, ()=>{u003Cbru003E console.log(‘server is running at http:u002Fu002Flocalhost:3000’)u003Cbru003E})u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E启动之后在浏览器中分别访问 http:u002Fu002Flocalhost:3000u002F、http:u002Fu002Flocalhost:3000u002Fcase、http:u002Fu002Flocalhost:3000u002F404 显示的内容一样u003Cu002Fpu003Eu003Cpu003E看着页面效果好像咱们实现的功能和第一种不用koa-router的写法一样,不过咱们就看代码,简化了不少,不仅少了if判断,还少了await next()。u003Cu002Fpu003Eu003Cpu003E在功能上看,咱们可以看到使用了router.get,当然它也有其他几种使用方法:u003Cu002Fpu003Eu003Cpreu003Erouteru003Cbru003E .get(‘u002F’, async (ctx, next) => {u003Cbru003E ctx.body = ‘I’m get methods!’;u003Cbru003E })u003Cbru003E .post(‘u002Fcase’, async (ctx, next) => {u003Cbru003E ctx.body = ‘I’m post methods!’;u003Cbru003E })u003Cbru003E .put(‘u002Flogin’, async (ctx, next) => {u003Cbru003E ctx.body = ‘I’m put methods!’;u003Cbru003E })u003Cbru003E .del(‘u002Fnewsu002F:id’, async (ctx, next) => {u003Cbru003E ctx.body = ‘I’m del methods!’;u003Cbru003E })u003Cbru003E .all(‘u002Faboutu002F:page’, async (ctx, next) => {u003Cbru003E ctx.body = ‘I’m all methods!’;u003Cbru003E });u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E这几种方式相信用过ajax的童鞋都很了解,我们在大部分的项目中用到get和post还是最多的。通常在项目中使用 GET 来查询和获取数据,使用 POST 来更新资源。PUT 和 DELETE 使用比较少。其中还有一个特别的方法all,all 方法通常用于匹配一组路由或者全部路由从而做一些统一设置和处理,也可以处理不确定客户端发送的请求方法类型的情况u003Cu002Fpu003Eu003Cpu003E咱们来举个例子看看:u003Cu002Fpu003Eu003Cpreu003E假如有个登录请求:u003Cbru003E在路由中会最先匹配router.post中的url规则,如果匹配不到就会进入all的url规则一致的方法中u003Cbru003E$.ajax({u003Cbru003E type:’POST’,u003Cbru003E url:’u002Flogin’,u003Cbru003E data:{‘username’:’sd’,’pwd’:123456},u003Cbru003E success:function(req){u003Cbru003E u002Fu002F…u003Cbru003E }u003Cbru003E })u003Cbru003Eu003Cbru003E$.ajax({u003Cbru003E type:’GET’,u003Cbru003E url:’u002Flogin’,u003Cbru003E data:{‘username’:’sd’,’pwd’:123456},u003Cbru003E success:function(req){u003Cbru003E u002Fu002F…u003Cbru003E }u003Cbru003E })u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上面两个方法最主要的区别就是 ajax 中 method 的值,method 的值和 router 的方法是对应。 u003Cu002Fpu003Eu003Cpu003E我说个曾经在项目中all方法的例子,就是为所有的请求设置跨域头:u003Cu002Fpu003Eu003Cpreu003Erouter.all(‘u002F*’, async (ctx, next) => {u003Cbru003E u002Fu002F *代表允许来自所有域名请求u003Cbru003E ctx.set(“Access-Control-Allow-Origin”, “*”);u003Cbru003E await next();u003Cbru003E});u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E不过不推荐大家使用这样的方式解决跨越的问题,这是把所有URL规则匹配都允许了,是非常危险的做法。我也是只在本地项目调试中这样临时做的解决方式。在上线的项目中大家千万还是别使用。u003Cu002Fpu003Eu003Cpu003E说了这么多了,大家肯定会想,那我在路由中又用getu002Fpost,最后还写了个all。同样的url规则会一起匹配执行吗?那咱们试试看:u003Cu002Fpu003Eu003Cpreu003Econst Koa = require(‘koa’)u003Cbru003Econst router = require(‘koa-router’)()u003Cbru003Econst app = new Koa()u003Cbru003Eu002Fu002F 添加路由u003Cbru003Erouter.get(‘u002Fcase’, async (ctx, next) => {u003Cbru003E ctx.response.body = `<h1>我就是case页面<u002Fh1>`u003Cbru003E await next();u003Cbru003E})u003Cbru003Erouter.all(‘u002Fcase’, async (ctx, next) => {u003Cbru003E console.log(‘all方式’)u003Cbru003E await next();u003Cbru003E});u003Cbru003Eu002Fu002F 调用路由中间件u003Cbru003Eapp.use(router.routes())u003Cbru003Eapp.listen(3000, ()=>{u003Cbru003E console.log(‘server is running at http:u002Fu002Flocalhost:3000′)u003Cbru003E})u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E启动执行node app.js ,访问http:u002Fu002Flocalhost:3000u002Fcase ,大家会看到页面显示了’我就是case页面’,同时在控制台输出了’all方式’。u003Cu002Fpu003Eu003Cpu003E很简单,我们用了await next();自然也会执行到了all,我们再去掉await next()就发现控制台不会输出了。u003Cu002Fpu003Eu003Cpu003E很容易理解,路由其实也是中间件,没有把控制权移交,自然不会继续处理下一个中间件。u003Cu002Fpu003Eu003Cpu003E这一章节主要和大家介绍了koa-router的基本使用。u003Cu002Fpu003Eu003Cpu003E下一章我将会给大家说说koa-router的其他特性以及路由的封装。u003Cu002Fpu003Eu003Cpu003E下一章,我们再见!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:基于Koa2搭建Node.js 前后端分离开发、部署服务器实战项目 (三)

主题测试文章,只做测试使用。发布者:敢吻,转转请注明出处:http://www.cxybcw.com/11408.html