Rails 布署与响应式布局

80学院第三次课

大纲

• 响应式布局
• Session 与 Cookie
• 点赞功能开发要点
• 扫一扫分享
• mina 应用发布

上次课交流

响应式布局

meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 
user-scalable=no" />

网格布局

http://getbootstrap.com/css/#grid

媒体查询

http://getbootstrap.com/css/#grid-media-queries

响应式布局要点

• 移动优先的设计
• 移动优先的开发
• 擅于利用 Bootstrap 组件

最佳实践

Session 与 Cookie

• 结合后台用户登录讲解
• cookie 在客户端存储
• session 一般在服务端存储
• session 一般需用到 cookie 记录 session id

点赞功能实现要点

# JS 端实现
# app/assets/javascripts/like.coffee
$(document).on 'turbolinks:load', ->

  $('.like-button').click ->
    if $(this).hasClass('liked')
      $.ajax
        url: $(this).data('url') + '/' + Cookies.get('like')
        type: 'DELETE'
        success: (res)=>
          $(this).removeClass('liked')
          $(this).children('.count').text(res.count)
          Cookies.remove('like')
    else
      $.ajax
        url: $(this).data('url')
        type: 'POST'
        success: (res)=>
          $(this).addClass('liked')
          $(this).children('.count').text(res.count)
          Cookies.set('like', res.id)

点赞功能实现要点(2)

# 根据是否已经喜欢, 渲染不同的 class
# app/views/blogs/_post.html.slim
p
  button.button.like-button class="#{'liked' if post.liked_by?(cookies[:like])}" \
type='button' data-url=blog_likes_path(post)
    span.count #{@likes_count}
    span Like

扫一扫分享( 作业 )

• qrcode.js
• qrcode_op.js
• app/views/blogs/_qrcode.html.slim

Mina 应用发布

• config/deploy.rb
• 服务器配置
• mina deploy

Break time

任务安排

• 响应式布局支持
• 一键发布应用
• 点赞功能
• 扫一扫分享( 作业 )

Thx