Responsive personal blog based on AdonisJS

This blog I am at the top of the b station full stack learning, using a relatively popular Node.js Web framework AdonisJS, this framework and PHP Web development framework Laravel is very similar, the development time is relatively short, we are interested in learning, 1~2 hours can start. There are few related learning resources on AdonisJS, so I basically refer to the official documents of AdonisJS when ENCOUNTERING problems. Although the blog features are relatively simple at the moment, I don’t want to make them too complicated because I like simplicity. I hope I can share more experiences and projects on my own personal website in the future.

At present, my personal blog has been online, welcome to visit ~~ address is bol4.top

instructions

Development environment: Win10 Node.js 10.16.0 Chrome

Deployment environment: Aliyun server

Github address: github.com/Zhouqiaoqia…

Blog address: BOL4’s blog

Reference: Official AdonisJS documentation

Technology stack

AdonisJS + node.js + bootstrap+ mongodb

Project summary

• The UI design of the website is a little lazy, in order to save time, I use some template source code, mainly Bootstrap implementation. The blog effect is as follows:

• Edge files are used to implement AdonisJS on the view. Some syntax is different from HTML, which is the first time I use it. As the function is relatively simple, the reference document can be completed. For example, loop through our blog div and write:

  @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
  Copy the code

• We have time stamps for every piece of blog data, but setting the format of the time display was a bit of a headache for me at first, and was later developed by referring to the official documentation. It’s actually very simple to implement.

  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)
        }
  }
  Copy the code

• In order for the posts to be sorted by creation time, we also need to make the following changes using orderBy.

  PostController.js

  //index list of blog posts
      async index({request,view}){ 
          const posts=await Post.query().orderBy('created_at'.'desc').fetch()
          return view.render('posts.index', {posts:posts.toJSON()
          })y
      }
  Copy the code

• During the project deployment, I deployed several projects on the server through different port numbers and host names, but I encountered an error of 500, and I couldn’t find out what the problem was. Finally, I clone the project that I hosted on Github and run it locally, but it turns out that node_modules cannot be installed because some modules cannot be installed and resources cannot be accessed.

  Solution: I pushed the contents of the node_modules folder to the repository, ran it again on the server, and it worked.