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

  • 一、商店技术架构

    • 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
时间: 2024-10-11 20:33:36

JD-Store购物网站复盘——20170312的相关文章

css3购物网站商品文字提示实例

css3购物网站商品文字提示实例先来看效果图:<ignore_js_op> 当鼠标划过图片时,有着泰迪熊黑色长方形的背景就会出现.来看HTML5+CSS3代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物网站商品文字提示</title> <style type="te

购物网站的发展历史

网上购物指交易双方从洽谈,签约及货款的支付,交货通知等整个交易过程都通过国际互联网络进去的新型购物模式.它作为一种新兴的购物方式,以方便,快捷,低廉等优点,受到人们越来越多的青睐.几年间,网上购物悄悄走进你我中间,“网购”这个新名词已经不知不觉渗透进人们的日常生活中,而且越来越影响着人们特别是年轻人的生活方式. 网购的前景,业内专家指出,网络购物的快速增长不仅印证了网络世界的美好前景,也给传统零售业带来巨大的压力.同时,网络购物也必将改变人们的生活,网络购物即将进入一个新的爆发性增长期. 业内人

手把手教你做一个吸引人的购物网站

购物网站盈利能力相信很多用户都是有目共睹的,因此不少的中小企业对购物网站的建设也是趋之若鹜,怎么企业设计购物网站有什么方法能够为购物网站提高人气呢?下面看看凡科网站建设带来的一些分析. 要对用户的跟随心理进行分析.无论是实体销售还是线上的销售,用户都会有一种莫名的跟随心理.网上购物网站的评论就好想是生活中的口口相传,购买过的用户可以对产品进行评论,这样可以给潜在用户一个引导作用. 企业要对购物网站网页的每一个角落都要发挥极限.企业都知道网页的每一个角落都是有用的,购物网站也一样.一个列表页不会是

springMVC+angular+bootstrap+mysql的简易购物网站搭建

springMVC+angular+bootstrap+mysql的简易购物网站搭建 介绍 前端的css框架用了bootstrap, 以及bootstrap的JS组件, 以及很好用的angular(angular大法好), 项目一共包含了7个静态界面, 静态界面的数据展示都使用了angularJS , 后端是基于java的spring, 容器为tomcat, 项目代码分享到百度云盘 , 这个项目的优势是, 所有的显示都是在前端完成, 数据交互也是通过ajax完成, 没有频繁的页面跳转:先上两张商

SSH2开发简易的购物网站源代码下载

原文:SSH2开发简易的购物网站源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463431412736.htm 简易的购物网站,采用SSH2 程序的BUG处理方法: 严重: StandardWrapper.Throwable java.lang.IllegalStateException: Cannot initialize context because there is already a root application context p

购物网站建设 微信三级分销网站系统开发

专业团队,定制购物网站建设 微信三级分销网站系统开发 服务器选择:  服务器购买地址:http://www.erduyun.com/services/cloudhost/域名购买地址:http://www.erduyun.com/services/domain/<ignore_js_op> [服务与售后]1.为了更好的为客户服务,我们实行全方位一条龙服务, 包括如下内容:   A.服务器.域名.支付.公众号等信息的准备,,我们全部搞定.   B.软件平台部署.测试.上线.   C.系统售后维护

购物网站简介

百科名片 购物网站就是提供网络购物的站点,足不出户即可购买到你所喜欢的商品.目前国内比较知名的专业购物网站有卓越.当当等,提供个人对个人的买卖平台有淘宝.易趣.拍拍等,另外还有许多提供其它各种各样商品出售的网站.购物网站就是为买卖双方交易提供的互联网平台,卖家可以在网站上登出其想出售商品的信息,买家可以从中选择并购买自己需要的物品. 从交易双方类型分为四种形式: 第一种是B2C,即商家对顾客的形式(如当当网.惠心网.卓越亚马逊.第九大道等) 第二种是C2C,即顾客对顾客的形式(如淘宝.易趣.拍拍

shop域名,终将成为购物网站主流域名吗?

首先我们来感受下云栖大会圆桌对话,shop域名注册局CEO冢原广哉是怎么说的: “上网的人越来越多,中国人的购物习惯随着电商的快速发展悄然改变,.shop作为一个主要面向线上.线下销售实体的新顶级域名,顺应了这个趋势..shop这个域名后缀含义明确,市场指向性精准.比如说如果消费者 看到champagne.com (中文为香槟),可能不知道这是一个关于香槟的哪方面的网站,但如果是champagne.shop,就很容易让人看出这是卖香槟的.同时,中国的投资热情很高,,相信.shop在中国域名市场将

经典网页设计:10个响应式设计的购物网站

今天我想与大家分享电子商务主题的网站设计,更精确地说是为设计在线商店提供新思想.每个人都知道移动技术的市场发展迅速,已经很难找到一个人没有手机的人了.响应设计给我们提供了一个巨大的机遇:站点的访问量的增长和销售收入的增加.在今天的收集中,分享10个响应式设计的国外购物网站给大家. 1. Snipcart 2. Bold & Noble 3. Greats Brand 4. Create and customize your own cube 5. The Gadget Flow 6. USM M