• 一、商店技术架构
  • 1.主题
  • 2.涉及技术点：
  • 3.核心业务功能
  • 4.角色
  • 5.用户故事
• 二、实现步骤
  • 专案基础设施
  • 上传图片模块
  • 购物车
  • 订单
  • 支付&寄信
  • 专案源码
• 三、第三方服务应用
  • 支付
  • 存储
  • figaro 机密信息管理
  • SendCloud服务发送邮件
  • 在线Bug报错 airbrake

一、商店技术架构

1.主题

• 购物车设计
• 结帐订单
• 第三方整合
• 代码重构

2.涉及技术点：

• Model 设计原则
• 自定 before_action
• 自定义 Routing
• validation
• session 操作
• find_by 操作
• where / order
• 巢状表单
• State Machine
• ActiveJob
• Mailer
• Partial / Helper

3.核心业务功能

• 购买机制 - 消费者购买商品，放入购物车
• 结帐机制 - 消费者将购物车中的商品，结帐生成订单
• 上架机制 - 商家上架物品，设定开卖
• 配送机制 - 商家针对订单配送

4.角色

• 消费者
• 商家

5.用户故事

身为管理者，我要能够登入后台

• 整个商店网站分为两种权限：admin (商家) / user （消费者）
• 商家可以登入 /admin 后台
• 能够登入后台上架商品
• 后台上架网址必须要是 /admin/products
• 商品的内容分为物品标题、描述、价格、库存
• 商品要能够设定是否能上架贩售
• 商品必须要有商品图片

二、实现步骤

专案基础设施

Bootstrap

gem ‘bootstrap-sass‘
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
@import "bootstrap-sprockets";
@import "bootstrap";

//= require bootstrap/alert
//= require bootstrap/dropdown

common/_navbar.html.erb
common/_footer.html.erb
weclome#index
flash提示

app/views/common/_flashes.html.erb
<% if flash.any? %>
  <% user_facing_flashes.each do |key, value| %>
    <div class="alert alert-dismissable alert-<%= flash_class(key) %>">
      <button class="close" data-dismiss="alert">×</button>
      <%= value %>
    </div>
  <% end %>
<% end %>


app/helpers/flashes_helper.rb
module FlashesHelper
  FLASH_CLASSES = { alert: "danger", notice: "success", warning: "warning"}.freeze

  def flash_class(key)
    FLASH_CLASSES.fetch key.to_sym, key
  end

  def user_facing_flashes
    flash.to_hash.slice "alert", "notice","warning" 
  end
end

Devise

rails g devise:install
rails g devise user
rake db:migrate

SimpleForm rails generate simple_form:install --bootstrap
font-awesome-rails

上传图片模块

gem ‘carrierwave‘
gem ‘mini_magick‘
rails g uploader image

购物车

订单

支付&寄信

专案源码

三、第三方服务应用

支付

• 微信、支付宝支付(需要企业身份进行申请)
• 有偿代收服务接口：ping++等

存储

• 阿里云、七牛云、AWS S3

配置ASW S3 保存图片

gem ‘fog‘

config.fog_provider = ‘fog‘                  
    config.fog_credentials = {
      provider:              ‘AWS‘,                        
      aws_access_key_id:     ENV["AWS_ACCESS_KEY_ID"],         

      aws_secret_access_key: ENV["AWS_SECRET_ACCESS_KEY"],        

      region:                ENV["AWS_REGION"]    

    }
    config.fog_directory  = ENV["AWS_BUCKET_NAME"] 

七牛云

gem ‘carrierwave-qiniu‘
gem ‘qiniu-rs‘

config/initializers/carrierwave.rb
CarrierWave.configure do |config|
  config.storage             = :qiniu
  config.qiniu_access_key    = ENV["qiniu_access_key"]
  config.qiniu_secret_key    = ENV["qiniu_secret_key"]
  config.qiniu_bucket        = ENV["qiniu_bucket"]
  config.qiniu_bucket_domain = ENV["qiniu_bucket_domain"]
  config.qiniu_block_size    = 4*1024*1024
  config.qiniu_protocol      = "http"
  config.qiniu_up_host       = "http://up.qiniug.com"  #选择不同的区域时，"up.qiniug.com" 不同

end

figaro 机密信息管理

gem ‘figaro‘
bundle install
figaro install
会自动生成 config/application.yml 文件并自动添加到 .gitignore 档案里
cp config/application.yml config/application.yml.example

production:
    XXXXX_KEY_ID: ""
development:
    XXXXX_KEY_ID: ""
#排版缩进 非常重要，否则报错

一键部署机密信息到heroku
figaro heroku:set -e production
heroku config可以列出目前所有的设定

SendCloud服务发送邮件

http://sendcloud.net/

config/environments/production.rb
Rails.application.configure do
...(略)
  # config.action_mailer.delivery_method = :letter_opener #dev环境本地预览邮件
  config.action_mailer.default_url_options = { :host => ‘你的herokuapp地址‘}

  config.action_mailer.delivery_method = :smtp
  ActionMailer::Base.smtp_settings = {
    address: "smtpcloud.sohu.com",
    port: 25,
    domain: "heroku.com",
    authentication: "login",
    enable_starttls_auto: true,
    user_name: ENV["SEND_CLOUD_USER_NAME"],
    password: ENV["SEND_CLOUD_USER_KEY"]
    }
end

在线Bug报错 airbrake

https://airbrake.io 三十天免费

gem ‘airbrake‘, ‘~> 5.4‘
bundle install
rails g airbrake PROJECT_ID PROJECT_KEY

配置
config/initializers/airbrake.rb
 c.project_id = ENV[‘PROJECT_ID‘]
 c.project_key = ENV[‘PROJECT_KEY‘]
 测试
 rake airbrake:test

JD-Store购物网站复盘——20170312