当前位置:主页 > SEO优化 >

廖雪峰老师的课堂(32)

作者: 奕星SEO 分类: SEO优化 发布时间: 2019-10-12 19:51 内容来源:网络整理阅读量:

  我们已经可以用koa处理不同的URL,还可以用Nunjucks渲染模板。现在,是时候把这两者结合起来了!

  当用户通过浏览器请求一个URL时,koa将调用某个异步函数处理该URL。在这个异步函数内部,我们用一行代码:

  通过Nunjucks把数据用指定的模板渲染成HTML,然后输出给浏览器,用户就可以看到渲染后的页面了:

  异步函数是C:Controller,Controller负责业务逻辑,比如检查用户名是否存在,取出用户信息等等;

  包含变量{{ name }}的模板就是V:View,View负责显示逻辑,通过简单地替换一些变量,View最终输出的就是用户看到的HTML。

  MVC中的Model在哪?Model是用来传给View的,这样View在替换变量的时候,就可以从Model中取出相应的数据。

  注意到koa并没有在ctx对象上提供render方法,这里我们假设应该这么使用,这样,我们在编写Controller的时候,最后一步调用ctx.render(view, model)就完成了页面输出。

  由于登录请求是一个POST,我们就用ctx.request.body.拿到POST请求的数据,并给一个默认值。

  在编写View的时候,我们实际上是在编写HTML页。为了让页面看起来美观大方,使用一个现成的CSS框架是非常有必要的。

  我们用Bootstrap这个CSS框架。从首页下载zip包后解压,我们把所有静态资源文件放到/static目录下:

  这样我们在编写HTML的时候,可以直接用Bootstrap的CSS,像这样:

  我们把所有静态资源文件全部放入/static目录,目的就是能统一处理静态文件。

  我们来编写一个处理静态文件的middleware。编写middleware实际上一点也不复杂。

  staticFiles是一个普通函数,它接收两个参数:URL前缀和一个目录,然后返回一个async函数。

  这个async函数会判断当前的URL是否以指定前缀开头,如果是,就把URL的路径视为文件,并发送文件内容。

  如果不是,这个async函数就不做任何事情,而是简单地调用await next()让下一个middleware去处理请求。

  mz提供的API和Node.js的fs模块完全相同,但fs模块使用回调,而mz封装了fs对应的函数,并改为Promise。

  这样,我们就可以非常简单的用await调用mz的函数,而不需要任何回调。

  最后,这个middleware使用起来也很简单,在app.js里加一行代码:

  注意到createEnv()函数和前面使用Nunjucks时编写的函数是一模一样的。我们主要关心tempating()函数,它会返回一个middleware,在这个middleware中,我们只给ctx“安装”了一个render()函数,其他什么事情也没干,就继续调用下一个middleware。

  这里我们定义了一个常量isProduction,它判断当前环境是否是production环境。如果是,就使用缓存,如果不是,就关闭缓存。

  在开发环境下,关闭缓存后,我们修改View,可以直接刷新浏览器看到效果,否则,每次修改都必须重启Node程序,会极大地降低开发效率。

  Node.js在全局变量process中定义了一个环境变量env.NODE_ENV,为什么要使用该环境变量?

  因为我们在开发的时候,环境变量应该设置为development,而部署到服务器时,环境变量应该设置为production。在编写代码的时候,要根据当前环境作不同的判断。

  类似的,我们在使用上面编写的处理静态文件的middleware时,也可以根据环境变量判断:

  这是因为在生产环境下,静态文件是由部署在最前面的反向代理服务器(如Nginx)处理的,Node程序不需要处理静态文件。

  而在开发环境下,我们希望koa能顺带处理静态文件,否则,就必须手动配置一个反向代理服务器,这样会导致开发环境非常复杂。

  在编写View的时候,非常有必要先编写一个base.html作为骨架,其他模板都继承自base.html,这样,才能大大减少重复工作。

  编写HTML不在本教程的讨论范围之内。这里我们参考Bootstrap的官网简单编写了base.html。

  一切顺利的话,这个view-koa工程应该可以顺利运行。运行前,我们再检查一下app.js里的middleware的顺序:

  现在,在VS Code中运行代码,不出意外的话,在浏览器输入localhost:3000/,可以看到首页内容:

  直接在首页登录,如果输入正确的Email和Password,进入登录成功的页面:

  当然,真实的网站会根据用户输入的Email和Password去数据库查询并判断登录是否成功,不过这需要涉及到Node.js环境如何操作数据库,我们后面再讨论。

  注意到ctx.render内部渲染模板时,Model对象并不是传入的model变量,而是:

  Object.assign()会把除第一个参数外的其他参数的所有属性复制到第一个参数中。第二个参数是ctx.state {},这个目的是为了能把一些公共的变量放入ctx.state并传给View。

  例如,某个middleware负责检查用户权限,它可以把当前用户放入ctx.state中:

廖雪峰老师的课堂(32)

  感谢您的阅读,如果你觉得我的公众号还不错,请多帮我推荐给你的朋友,多谢了。

廖雪峰老师的课堂(32)

  福利:公众号回复“3”,将免费领取前端大牛主讲的【CSS3、HTML5、vue.js及实战项目】Web全栈架构师正式课程部分视频,价值2980元。

  受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。


本文链接地址:http://www.seohuizhou.com/seoyouhua/13276.html
上一篇:<<P模式的社交网站交互设计策略研究【2】
下一篇:网购假冒化妆品可找网站索赔>>