基于AdonisJS的响应式个人博客

这个博客我是在b站全栈之巅学习的，用的是一个比较冷门的Node.js web 框架AdonisJS，这个框架和PHP Web开发框架 Laravel非常相似，开发时间比较短，大家感兴趣可以去学习一下，1~2个小时就可以上手。AdonisJS网上相关的学习资源也比较少，所以遇到问题我基本上都是查看AdonisJS的官方文档。虽然目前博客功能比较简单，但是因为喜欢简约风所以我也不打算把功能做得太复杂。以后有更多经验和项目积累了希望能多在自己的个人网站上分享。

目前我的个人博客已经上线，欢迎访问~~ 地址为 http://bol4.top

说明

开发环境 ： Win10 node.js 10.16.0 Chrome

部署环境 ：aliyun服务器

Github地址：https://github.com/Zhouqiaoqiao1026/adonis-bol4-blog

博客访问地址：BOL4的博客

参考资料：AdonisJS官方文档

技术栈

AdonisJS + node.js + bootstrap+ mongodb

项目总结

• 网站的UI设计上偷了点懒，为了节省时间，用的是一些模板的源代码，主要是Bootstrap实现的。博客效果如下图所示：
  
  
  

• AdonisJS在视图上用.edge的文件来实现，一些语法和html不太一样，我也是第一次使用，由于功能还是比较简单的所以参考文档可以完成。比如循环我们的博文div,可以这样写：

  @each(post in posts)
  <div class="col-12 col-md-6 col-lg-4" >
  						....
  	<div class="card-subtitle mb-2 text-muted" type=Date>{{post.created_at}}</div>
                          ...
  	</div>
  	@endeach
  

• 我们每一条博客数据都有时间戳，但是设置时间的显示格式刚开始让我很头疼，后来也是参考官方文档摸索出来的，其实实现起来非常简单。

  Post.js

  class Post extends Model {
      static castDates (field, value) {
          if (field === 'created_at') {
            return `${value.format('YYYY.MM.DD')}`
          }
          return super.formatDates(field, value)
        }
  }
  

• 为了让博文按照创建时间来排序，我们还需要使用orderBy进行如下修改。

  PostController.js

  //index 博文列表
      async index({request,view}){ 
          const posts=await Post.query().orderBy('created_at', 'desc').fetch()
          return view.render('posts.index',{
              posts:posts.toJSON()
          })y
      }
  

• 在项目部署的时候我通过不同的端口号和主机名实现在服务器上部署多个项目，但是遇到了一个500的报错，一直没办法排查出到底是哪里出了问题。最后我把我托管在Github上的项目clone下来之后在本地运行，发现原来是在安装node_modules是有部分模块无法安装导致资源访问不到。

  解决办法：我把node_modules文件夹的内容也push到仓库了，重新在服务器上跑了一遍，就成功了。